显示多个文件上传的进度Jquery/Ajax

Question

我有上传表单，允许用户上传多个文件。如果文件相当大，我决定进度条会很好。以下是我的源代码。我是新来的jquery通常我只是PHP，但我发现，Ajax更加用户友好。

<div id="new_upload"> 
    <div class="close_btn"></div> 
    <div id="uploads"></div> 
    <form action="global.func/file_upload.php" method="post" enctype="multipart/form-data" id="upload_file"> 
    <fieldset><legend>Upload an image or video</legend> 
    <input type="file" id="file" name="file[]" placeholder="Upload Image or Video" multiple /><input type="submit" value="upload file" id="upload_file_btn" required /> 
    </fieldset> 

    <div class="bar"> 
     <div class="bar_fill" id="pb"> 
      <div class="bar_fill_text" id="pt"></div> 
     </div> 
    </div> 

    </form> 
</div> 
<script> 
function OnProgress(event, position, total, percentComplete){  
    //Progress bar 
    console.log(total); 
    $('#pb').width(percentComplete + '%') //update progressbar percent complete 
    $('#pt').html(percentComplete + '%'); //update status text 
} 
function beforeSubmit(){ 
    console.log('ajax start'); 
} 
function afterSuccess(data){ 
    console.log(data); 
} 
$(document).ready(function(e) { 
    $('#upload_file').submit(function(event){ 
     event.preventDefault(); 
     var filedata = document.getElementById("file"); 
     formdata = new FormData(); 
     var i = 0, len = filedata.files.length, file; 
     for (i; i < len; i++) { 
      file = filedata.files[i]; 
      formdata.append("file[]", file); 
     } 
     formdata.append("json",true); 
     $.ajax({ 
      url: "global.func/file_upload.php", 
      type: "POST", 
      data: formdata, 
      processData: false, 
      contentType: false, 
      dataType:"JSON", 
      xhr: function() { 
       var myXhr = $.ajaxSettings.xhr(); 
       return myXhr; 
      }, 
      beforeSubmit: beforeSubmit, 
      uploadProgress:OnProgress, 
      success: afterSuccess, 
      resetForm: true 
     }); 
    }); 
}); 
</script> 

图片上传工作正常，数组发送到ajax但进度条不移动。事实上，被称为需要产生的两个函数的console.log也不会出现。有没有一种正确的方法来调用我的ajax请求中的函数，使这个进度条能够正常工作。

beforeSubmit：beforeSubmit， 上传进度：OnProgress， 成功：afterSuccess，

注意，这个函数的成功：afterSuccess'工作作为控制台显示的是我的数据。

Answer 1

这是你的HTML表单

<form method="post" action="uploadImages.php" name ='photo' id='imageuploadform' enctype="multipart/form-data"> 
     <input hidden="true" id="fileupload" type="file" name="image[]" multiple > 

     <div id ="divleft"> 
      <button id="btnupload"></button> 

     </div>  

    </form> 

这是你的jQuery和AJAX。 默认情况下，fileInput被隐藏。

上传按钮，点击

$("#btnupload").click(function(e) { 

    $("#fileupload").click(); 
    e.preventDefault(); 

}); 


$('#fileupload').change(function (e) { 

    $("#imageuploadform").submit(); 
    e.preventDefault(); 

}); 

$('#imageuploadform').submit(function(e) { 

    var formData = new FormData(this); 

    $.ajax({ 
     type:'POST', 
     url: 'ajax/uploadImages', 
     data:formData, 
     xhr: function() { 
       var myXhr = $.ajaxSettings.xhr(); 
       if(myXhr.upload){ 
        myXhr.upload.addEventListener('progress',progress, false); 
       } 
       return myXhr; 
     }, 
     cache:false, 
     contentType: false, 
     processData: false, 

     success:function(data){ 
      console.log(data); 

      alert('data returned successfully'); 

     }, 

     error: function(data){ 
      console.log(data); 
     } 
    }); 

    e.preventDefault(); 

}); 


function progress(e){ 

    if(e.lengthComputable){ 
     var max = e.total; 
     var current = e.loaded; 

     var Percentage = (current * 100)/max; 
     console.log(Percentage); 


     if(Percentage >= 100) 
     { 
      // process completed 
     } 
    } 
} 

你的PHP代码如下所示

<?php 

header('Content-Type: application/json'); 

     $valid_exts = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions 
     $max_size = 30000 * 1024; // max file size in bytes 

     $json = array(); 

      if ($_SERVER['REQUEST_METHOD'] === 'POST') 
      { 
       for($i=0;$i<count($_FILES['image']['tmp_name']);$i++) 
       { 
        $path="image/uploads/photos/"; 

        if(is_uploaded_file($_FILES['image']['tmp_name'][$i])) 
        { 
         // get uploaded file extension 
         $ext = strtolower(pathinfo($_FILES['image']['name'][$i], PATHINFO_EXTENSION)); 
         // looking for format and size validity 
          if (in_array($ext, $valid_exts) AND $_FILES['image']['size'][$i] < $max_size) 
          { 
            // unique file path 
            $uid = uniqid(); 
            $date = date('Y-m-d-H-i-s'); 
            $path = $path ."image_" .$date. '_' . $uid . "." .$ext; 

            $returnJson[]= array("filepath"=>$path); 

            $filename = "image_" . $date . "_" .$uid . "." . $ext; 
            $this->createthumb($i,$filename); 

            // move uploaded file from temp to uploads directory 
            if (move_uploaded_file($_FILES['image']['tmp_name'][$i], $path)) 
            { 
            //$status = 'Image successfully uploaded!'; 
             //perform sql updates here 

            } 
            else { 
            $status = 'Upload Fail: Unknown error occurred!'; 
            } 


          } 
          else { 
          $status = 'Upload Fail: Unsupported file format or It is too large to upload!'; 
          } 
        } 
        else { 
         $status = 'Upload Fail: File not uploaded!'; 
        } 
       } 
       } 
      else { 
       $status = 'Bad request!'; 
      } 


      echo json_encode($json); 

?> 

Answer 2

您必须使用自定义的XMLHttpRequest来完成AJAX和jQuery的操作。这里有一个例子：How can I upload files asynchronously?