Question

我有一个多文件上传输入。我正在尝试验证每个文件的大小。它的工作方式有点但取决于文件的选择顺序。我讨厌javascript＆amp;我很沮丧，请帮忙。

$('input[type="file"]').change(function(){
    var imageSizeArr = 0;
    var imageSize = document.getElementById('blah');
    var imageCount = imageSize.files.length;
    for (var i = 0; i < imageSize.files.length; i++)
    {
         var imageSize = imageSize.files[i].size;
         if (imageSize > 5000000) {
             $('#test').text('3');
             var imageSizeArr = 1;
         }
         if (imageSizeArr == 1)
         {
             $('.element').text('files too big');
         }
         else if (imageSizeArr == 0)
         {
             $('.element').text('files not too big');
         }
     }
 });

Answer 1

您正在定义对输入字段的引用：

var imageSize = document.getElementById('blah');

稍后在for循环中再次重新定义它，因为：

for (var i = 0; i < imageSize.files.length; i++) {
    var imageSize = imageSize.files[i].size;

请记住，javascript中没有块范围，因此循环中的var imageSize会影响以前定义的值。

这是你的问题。在循环中为大小选择不同的名称，它将起作用。

Answer 2

尝试以下示例;

<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#upload").bind("click", function () {
            if (typeof ($("#fileUpload")[0].files) != "undefined") {
                var size = parseFloat($("#fileUpload")[0].files[0].size / 1024).toFixed(2);
                alert(size + " KB.");
            } else {
                alert("This browser does not support HTML5.");
            }
        });
    });
</script>

Answer 3

所有学分归@dfsq所有，但作为一个js初学者，我花了一些时间弄清楚他对“为 size 选择不同的名称”的含义的含糊描述，因此对于所有困惑的人这是工作代码：

html：

<input type=file name=img[] id=files accept=".jpg, .JPG, .jpeg, .JPEG" multiple=multiple>

js：

$('input#files').change(function(){
  var imageSizeArr = 0;
  var imageArr = document.getElementById('files');
  var imageCount = imageArr.files.length;
  var imageToBig = false;
  for (var i = 0; i < imageArr.files.length; i++){
     var imageSize = imageArr.files[i].size;
     var imageName = imageArr.files[i].name;
     if (imageSize > 5000000){
         var imageSizeArr = 1;
     }
     if (imageSizeArr == 1){
         console.log(imageName+': file too big\n');
         imageToBig = true;
     }
     else if (imageSizeArr == 0){
         console.log(imageName+': file ok\n');
     }
  }
  if(imageToBig){
    //give an alert that at least one image is to big
    window.alert("At least one of your images is too large to process, see the console for exact file details.");
    }
});

使用jquery进行多次上载时的文件大小验证

3 个答案: