javascript - 验证以限制用户表单上传大量文件

Question

您好我正在使用此代码来限制用户上传超过 5mb 的重文件。但这仅适用于提交的第一个文件，不适用于其余的文件。

var n=1;
$(document).ready(function()
{
    $('.add_field').click(function(){

        if(n < 5)
        {
        n=n+1;
        var newid="file"+n;
        var input = $('#file1');
        var clone = input.clone(true);
        //clone.removeAttr ('id');
        clone.attr('title','file'+n);
        clone.attr('id','file'+n);
        clone.val('');
        clone.appendTo('.input_holder');}
    });
    $('.remove_field').click(function(){
                if(n!=1)
                {
                n=n-1;
                if($('.input_holder input:last-child').attr('id') != 'input_clone'){
                $('.input_holder input:last-child').remove();
                }
        }
    });

    $("#file1").change(function () 
    {   
        var iSize = ($("#file1")[0].files[0].size / 1024); 
        if(iSize>5000)
        {
            alert("Too Large FIle");
            example_reset_html('file1d');
        }
    }); 

    $("#file2").change(function () 
    {   
        var iSize = ($("#file2")[0].files[0].size / 1024); 
        if(iSize>5000)
        {
            alert("Too Large FIle");
            example_reset_html('file1d');
        }
    }); 



});

function example_reset_html(id) {
$('#'+id).html($('#'+id).html());

}

我检查了所有浏览器并尝试了黑客攻击，但似乎出了点问题并且无法正常工作。

Answer 1

你能在 $('.input_holder') 上绑定你的事件吗？似乎元素包含所有文件输入，因此您只需将更改事件绑定到其父级。

$(".input_holder").change(function (e) 
    {   
        if(e.target.type==="file"){
          var iSize = (e.target.files[0].size / 1024);
          if(iSize>5000)
          {
              alert("Too Large FIle");
              example_reset_html(e.target.id);
          }
        }
});