JS文件大小测试在多个文件上传时失败但在单个文件上传时没有

Question

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

<input type="file" name="file[]" id="image-upload" class="file-input" accept="image/*" multiple>

<div id="img-wrapper"></div>
<hr>
<div id="invalid-images"></div>

<style type="text/css">
    .invalid-img-thumbnail{
        width: 100px;
        height:100px;
        border: 2px solid red;
    }
    .thumbnail{
        width: 100px;
        height:100px;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script type="text/javascript">
var valid_extensions = ["jpg", "jpeg", "png", "gif"];
$("#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, 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 || file.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'+file.size);                
            }
        }).bind(reader, file.name);
        reader.readAsDataURL(file);
    }
});
</script>

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文件大小测试在多个文件上传时失败但在单个文件上传时没有

JS file size test fails on multiple file upload but not on single file upload

html

javascript

upload