調整單個文件上傳器成爲多文件上傳器

Question

所以我一直在努力獲得一個拖放文件上傳腳本，它爲一個單一的文件。我現在試着讓它允許多個文件，但是遇到了問題。

// Required for drag and drop file access 
jQuery.event.props.push('dataTransfer'); 

// Set the dropzone 
$("#dropzone-wrapper").on('drop', function(event) { 
// Do something with the file(s) 
var files = event.dataTransfer.files; 

if (files.type.match('image.*')) { 
    // If the file is an image, then run the processFileUpload function 
    processFileUpload(files); 
} else { 
    alert("Not an image!"); 
} 
}); 

// Process the file that was dropped 
function processFileUpload(droppedFile) { 

var uploadFormData = new FormData(); 
uploadFormData.append("image",droppedFile); 

var bar = $('.bar'); 
var percent = $('.percent'); 

$.ajax({ 
    url : "Uploader/upload.php", // use your target 
    type : "POST", 
    beforeSend: function() { 
     $('.progress').show(); 
     var percentVal = 0; 
     bar.width(percentVal) 
     percent.html(percentVal + '%'); 

     window.setInterval(function(){ 
      var x = (100/(droppedFile.size/100000)); 
      var x = Math.round(x); 

      if (x >= 90) { clearInterval(); } else { 
      percentVal = percentVal + x; 
      percent.html(percentVal + '%'); 
      bar.width(percentVal + '%'); } 
     }, 1000); 

    }, 
    complete: function() { 
     clearInterval(); 
     bar.width("100%"); 
     percent.html("100%"); 
    }, 
    data : uploadFormData, 
    chache : false, 
    contentType : false, 
    processData : false, 
    success : function(data) { 

     window.location = data; 

    } 
    }); 
} 

我得到的錯誤是* 無法調用未定義的「匹配」 *它涉及到線路9。現在我的猜測是，它是有一個問題檢查多個文件，因爲正如我所說，檢查一下就可以了。我如何着手檢查上傳的所有文件是否爲圖像？

Answer 1

您必須添加單獨的每個文件，files是文件列表，你也必須改變processFileUpload處理多個文件

var filesToUpload = []; 
for (var i = 0; i < files.length; i++){ 
    if (files[i].type.match('image.*')) { 
     filesToUpload.push(files[i]); 
    } else { 
     alert("Not an image!"); 
    } 
} 
processFileUpload(filesToUpload); 

... 

function processFileUpload(droppedFiles) { 
... 
var uploadFormData = new FormData(); 
for (var i = 0; i < droppedFiles.length; i++){ 
    uploadFormData.append("image[]",droppedFiles[i]); 
} 
...