0

所以我今天一直在努力让拖放文件上传脚本工作，它适用于单个文件。我现在来尝试让它允许多个文件，但遇到了一个问题。

// 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;

    }
   });
}

我得到的错误是 * Cannot call method 'match' of undefined *这与第 9 行有关。现在我的猜测是它在检查多个文件时遇到问题，因为正如我所说，只检查一个就可以了。我该如何检查所有上传的文件是否都是图像？

4

1 回答 1

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]);
}
...
于 2013-02-12T21:19:36.390 回答