Validate множественного размера изображения перед загрузкой

Question

У меня есть код, чтобы загрузить несколько изображений, если размер изображения не является действительным не показывать OnLoad, но по нажатию кнопка его загрузку на сервер отправить я хочу, чтобы изображение не загружать на подачу здесь mycode

<div class="box-body"> 
      <form action='myaction' method="post" name="form_dirc" enctype="multipart/form-data"> 
       <p id="img_valid"></p> 
       <input type="file" id="files" class="" name="files[]" multiple="multiple" /><br> 
       <button type="submit" class=" btn btn-success" style="margin-left:14px;"><b>Upload<b></button> 
      </form> 
      </div> 

и здесь JQuery код

$("#files").on("change", function (e) { 
     var files = e.target.files, 
     filesLength = files.length; 
     for (var i = 0; i < filesLength; i++) { 
      $('#img_valid').css('display', 'none'); 
      var f = files[i] 
      var fileReader = new FileReader(); 
      fileReader.onload = (function (e) { 
       var file = e.target; 
        var img = new Image(); 
        img.src = e.target.result; 
        var res = null; 
        img.onload = function() {       
        if(this.width > 500 && this.height > 500){ 
            $("<img></img>", { 
           class: "imageThumbShow", 
           src: e.target.result, 
           title: file.name 
          }).insertAfter("#files"); 
        } 
        else{    
         $('#img_valid').css('display', 'block'); 
         $('#img_valid').html("Image height width must be min 400px.") 
         return false; 
        } 
        } 
      }); 
      fileReader.readAsDataURL(f); 
     } 
    }); 

я хочу, чтобы удалить изображение из файлов [] массив, который не является допустимым размером затем загрузить другое изображение только

Answer 1

Вы можете используйте DropzoneJS для загрузки файла (изображений), у DropzoneJS есть много вариантов. одним из этих вариантов является «maxFilesize», который позволяет вам ограничить размер изображений.

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>