使用jQuery多次上传的文件大小验证

Question

I have a multiple file upload input. I'm trying to validate the size for each file. It works kind of but depends on which order the files are selected. I hate javascript & I suck at it, please help.

http://jsfiddle.net/2u9kq7fe/1/

$('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

You are defining a reference to input field:

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

and later in the for loop you redefine it again, because:

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

Remember that there is no block-scope in javascript, so var imageSize in the loop affects previously defined value.

This is your problem. Pick different name for size in the loop and it will work.

Answer 2

try like below example;

<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

All credits go to @dfsq but as a js beginner it took me some time to figure out the vague description of what he meant with "Pick different name for size " so for all the confused ones here is the working code:

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.");
    }
});