1
I am developing an upload system with jQuery Form, it worked perfectly the upload with the insertion of the data in mysql via PHP, but I tried to update a div with the contents of the files dynamically after the upload. I perform this request with jQuery’s $.post, but when (and only when) I pass the data parameters I get the following error message in the google Developer Tool Chrome (console):
Uncaught Invalidstateerror: Failed to read the 'selectionDirection' Property from 'Htmlinputelement': The input element’s type ('Hidden') does not support Selection.
Or some solution that can upload a file with insertion in the mysql database via PHP with ajax (jquery) and after the upload automatically update a div displaying the data uploaded?
Follow the code for understanding:
(function() {
var bar = $('.bar');
var percent = $('.percent');
var progress = $('.progress')
progress.hide();
var status = $('#message');
var pas_pai_upload = $("#pas_pai_upload").val();
$('#formUpload').ajaxForm({
data:{pas_pai_upload:pas_pai_upload},
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
if($('input[type=file]').val() != ""){
progress.show();
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
}else{
progress.hide();
}
},
success: function() {
if($('input[type=file]').val() != ""){
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
}
},
complete: function(response) {
if($('input[type=file]').val() == ""){
$("#message").html("<div class='alert alert-error'>Selecione um arquivo</div>");
$("#message").hide().fadeIn(1000);
bar.css('width','100%').css('width','0%')
}
else
{
$("#msg").html('<div class="alert alert-success">Arquivo enviado</div>');
$('#msg').hide().fadeIn(1500);
$("#modal_upload").modal('hide');
$('input[type=file]').val("") ;
$("#message").html(response.responseText)
$('.progress').fadeOut();
$("#message").hide().fadeIn(1000);
//trecho do código que ocorre o erro, somente quando passo a variável pas_pai_upload
$.post(base+'inc/php/load_folder.php',{pas_pai_upload:pas_pai_upload}, function(data){
$('.intranet_explorer').html(data);
})
}
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
});
})();
HTML file:
<?php
$pre_id = $_SESSION['id'];
if(!isset($id)):
//recupera id pasta pai
$sql = 'select min(pas_id) as pas_id from pasta_pai where pre_id = ?';
$conn = new Conexao();
if($stm = $conn->prepare($sql)):
$stm->bind_param('i',$pre_id);
$stm->execute();
$stm->bind_result($id);
$stm->data_seek(0);
$stm->fetch();
$stm->close();
else:
echo 'Erro ao selecionar pasta_pai';
endif;
else:
//verfica o dono da pasta
$sql2 = 'select pas_id from pasta_pai where pre_id = ? and pas_id = ?';
$conn = new Conexao();
if($stm = $conn->prepare($sql2)):
$stm->bind_param('ii',$pre_id, $pas_id);
$pre_id = $pre_id;
$pas_id = $id;
$stm->execute();
$stm->bind_result($pas_id_result);
$stm->store_result();
$stm->fetch();
if ($stm->num_rows == 0):
$url = BASESYSTEM . 'erro/4/';
header("location: $url");
endif;
$stm->close();
else:
echo 'Erro ao verificar o dono da pasta';
endif;
endif;
?>
<div class="row-fluid">
<div class="span2">
<div class="btn-group">
<button href="#" class="btn btn-toolbar btn-group-align " data-toggle="modal" data-target="#modal_mkdir" ><img src="<?php echo BASE;?>inc/img/folder_new.png" /></button>
<button href="#" class="btn btn-toolbar btn-group-align " data-toggle="modal" data-target="#modal_upload" ><img src="<?php echo BASE;?>inc/img/upload.png" /></button>
<br />
<br />
</div>
</div>
<div class="span10">
<div id="msg" class="">
</div>
</div>
</div>
<div id="modal_mkdir" class="modal hide fade" aria-hidden="true">
<form id="formMkdirProfessor" action="javascript:func()" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Cadastro de Pastas</h3>
<br />
</div>
<div class="modal-body">
<div id="msg_mkdir" class=""> </div>
<p>Pasta: <input type="text" id="pas_desc" value="" class="input-large" placeholder="Digite o nome da pasta" autofocus/></p>
<p>
<input type="hidden" id="pas_pai" value="<?php echo $id;?>" class="input-xlarge" placeholder="Digite o nome da pasta" disabled="true" />
<input type="hidden" id="pre_id" value="<?php echo $_SESSION['id'];?>" class="input-xlarge" placeholder="Digite o nome da pasta" disabled="true" />
</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Criar</button>
<button class="btn" data-dismiss="modal" aria-hidden="true" >Cancelar</button>
</div>
</form>
</div>
<div class="intranet_explorer">
<?php
$pastapai = new PastaPai();
$pastapai->setPastaPai($id);
$pastapaiCtrl = new PastaPaiControl();
$pastapaiCtrl->setPastaPai($pastapai);
$pastas = $pastapaiCtrl->showFolder($pastapai);
foreach($pastas as $p):
echo '<div class="folder" style=""><img src="'.BASEIMG.'folder.png"> '
.'<a href="'.BASESYSTEM.'form_upload/'.htmlentities($p[0]).'/">'
. '<span class="folder_name" >'. htmlentities($p[1]).'</span> </a>'
. '<a href="'.BASESYSTEM.'/form_alterar_pasta/'. $p[0].'/" >alterar</a>'.
'<a href="#'.$p[0].'" class="btn_rmdir" >excluir</a></div>' ."";
endforeach;
$arqCtrl = new ArquivoControl();
$file = $arqCtrl->showFile($id);
foreach($file as $p):
echo '<div class="folder" style=""><img src="'.BASEIMG.'file.png"> '
.'<a href="'.BASESYSTEM.'form_upload/'.htmlentities($p[0]).'/">'
. '<span class="folder_name" >'. htmlentities($p[2]).'</span> </a>'
. '<a href="'.BASESYSTEM.'/form_alterar_pasta/'. $p[0].'/" >alterar</a>'.
'<a href="#'.$p[0].'" class="btn_rmdir" >excluir</a></div>' ."";
endforeach;
?>
</div>
<!--<a href="#" class="" data-toggle="modal" data-target="#modal_rmdir" >excluir</a>-->
<div id="modal_rmdir" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<form id="formAlterarMkdir" action="javascript:func()" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>ATENÇÃO!</h3>
</div>
<div class="modal-body">
<div id="msg_rmdir" class=""> </div>
<p>Deseja realmente excluir a pasta <strong></strong>?</p>
<input type="hidden" value="" id="rmdir_id">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger" id="btnRmdir">Excluir</button>
<button class="btn" data-dismiss="modal" aria-hidden="true" autofocus >Cancelar</button>
</div>
</form>
</div>
<script src="<?php echo BASE.'inc/js/jquery.form.min.js'?>"></script>
<div id="modal_upload" class="modal hide fade" aria-hidden="true">
<form id="formUpload" enctype="multipart/form-data" action="<?php echo BASE.'inc/php/multiupload.php';?>" method="post" class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Upload de arquivos</h3>
<br />
</div>
<div class="modal-body">
<div id="msg_upload" class=""> </div>
<p>
<input type="file" class="input input-xxlarge" name="myfile[]" multiple autofocus >
<input type="hidden" id="pas_pai_upload" value="<?php echo $id;?>" class="input-xlarge" placeholder="Digite o nome da pasta" disabled="true" />
<button type="submit" class="btn btn-primary">Enviar</button>
</p>
</div>
<div class="" style="margin: 1em;">
<div class="progress progress-striped active">
<div class="bar"></div>
<div class="percent"></div >
</div>
<div id="message"></div>
</div>
</form>
</div>
</div>
Note: I have already performed tests with php and html files. I know that the error occurs only when I perform the parameter passage inside the ajaxForm
Can you join HTML too? what do you have
$("#pas_pai_upload").val();?– Sergio
@Sergio, I just included the HTML file and make some more changes
– adrianosymphony
@adrianosymphony have you seen if the value of pas_pai_upload is being passed correctly? It looks like it is passing the html element and not the value of the element. What appears if you make an Alert with this value?
– Ricardo BRGWeb
@Ricardo Lima Gonçalves, I have done this test and the value is passed correctly. The PHP $id is the one that fills the " <input type="Hidden" id="pas_pai_upload" value="<? php echo $id;? >" class="input-xlarge" placeholder="Type the folder name" disabled="true" />", I just passed the value directly to the variable in javascript. I’ve even tried to set a value in var pas_pai_upload directly in javascript
– adrianosymphony
@adrianosymphony, since you tried almost everything, I can only imagine that the script of the plugin responsible modal should be interfering with the execution. then try to comment on the following line: $("#modal_upload"). modal('Hide');
– Tobias Mesquita