使單個文件上傳器變為多文件上傳器

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;

    }
   });
}

我得到的錯誤是* 無法調用未定義的方法'match'*與第9行有關。現在，我的猜測是檢查多個文件時出現問題，因為正如我所說，只檢查一個就可以了。 如何檢查上傳的所有文件是否都是圖像？

Answer 1

您必須分別添加每個文件， files是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]);
}
...