Question

我正在尝试上传图片，然后根据类型和尺寸显示哪些文件无效。当我上传大小为5mb的单个文件时，它工作正常。但是当我选择包含这5mb图片的多个文件时我的测试失败了，没有检测到它的大小超过2.你看到的问题是什么？

ContextCompat

Answer 1

您需要将file.size添加到功能绑定中。否则，当您在回调函数中使用file.size时，它会引用循环中的最后一个文件。

$("#image-upload").change(function() {
    var files = $(this)[0].files;

    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var reader = new FileReader();

        reader.onload = (function(name, size, event) {
            var img = event.target.result; //image preview
            var extension = name.split('.')[name.split('.').length - 1].toLowerCase();  //get file extension

            if(valid_extensions.indexOf(extension)===-1 || size > (2000 * 1024)){ //if extension is valid image extension type and size is less that 2mb
                 $('#invalid-images').append(
                    "<img class='invalid-img-thumbnail' src='" + img + "'" + "title='" + name + "'/>");

            }else{
                $('#img-wrapper').append(
                    "<img class='thumbnail' src='" + img + "'" + "title='" + name + "'/>");
                console.log('\n'+size);                
            }
        }).bind(reader, file.name, file.size);
        reader.readAsDataURL(file);
    }
});

DEMO

JS文件大小测试在多个文件上载时失败，但在单个文件上载时失败

1 个答案: