DIV update after file upload

1

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

    
asked by anonymous 08.02.2015 / 02:35

0 answers