Question

我有以下html代码用于上传文件

<div class="form-group">
    <label class="col-sm-2 control-label" for="inputPassword3">Attach Files: </label>
    <div class="col-sm-10">
        <div id="filediv">
            <input name="file[]" type="file" id="file" />
        </div>
        <input type="button" id="add_more" class="upload" value="Add More 
    Files" />
    </div>
</div>

和js

$('#add_more').click(function () {
    $(this).before($("<div/>", {
        id: 'filediv'
    }).fadeIn('slow').append($("<input/>", {
        name: 'file[]',
        type: 'file',
        id: 'file'
    }), $("<br/>")));
});

现在我想验证在客户端上传的最大3 MB的每个文件大小。

Answer 1

一个好的做法是在这里提出问题之前进行搜索，因为有很多很棒的答案。 StackOverflow是一个很好的指导库。

看看这个问题，答案非常好：

JavaScript file upload size validation

您可以调整代码以进行此验证。

简单示例：

https://jsfiddle.net/klassmann/3puwba2v/2/

HTML：

<div id="myFiles">
  <input type="file">
</div>
<button id="btnAdd">Add</button>

使用Javascript：

function fileValidation(e){
    console.log();
  var filelist = $(this).get(0).files;
  var firstfile = filelist[0];

  var filesize = (firstfile.size / 1024) / 1024;

  if (filesize > 3.0) {
    alert('File has more than 3MB');
  } else {
    alert('File is valid.');
  }

}

$("input[type=file]").on('change',fileValidation);

$("#btnAdd").on('click', function(){
    var $newFile = $("<input type='file'>");
  $newFile.on('change', fileValidation);
    $("#myFiles").append($newFile);
});

干杯。

使用javascript添加更多按钮功能，验证上传文件大小

1 个答案:

简单示例：