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]);
}
...

调整单个文件上传器成为多文件上传器

1 个答案: