I'm developing an upload system with jQuery Form, it worked perfectly uploading with the insertion of the data in mysql via PHP, however I tried to update a div with the contents of the files dynamically after uploading. I do this with jQuery $ .post, but when (and only when) I pass the data parameters I receive the following error message in the google chrome (console) developer tool:
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 do a file upload with insertion in the mysql database via PHP with ajax (jquery) and after the upload automatically update a div displaying the uploaded data?
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 tested with the php and html files. I know the error occurs when I perform parameter passing within ajaxForm