[JQUERY] 어떻게 jQuery를 함께 파일 입력 크기를 확인하려면?

어떻게 jQuery를 함께 파일 입력 크기를 확인하려면?

해결법

1. ---

   1.당신은 실제로는 HTML5 파일 API 스펙에, 그러나, (예를 들어, 읽기 및 로컬 파일 작성을위한) 파일 시스템에 액세스 할 수없는, 거기에 일부 파일 속성은에 액세스 할 수 있는지, 그리고 파일 크기는 그들 중 하나입니다.

   당신은 실제로는 HTML5 파일 API 스펙에, 그러나, (예를 들어, 읽기 및 로컬 파일 작성을위한) 파일 시스템에 액세스 할 수없는, 거기에 일부 파일 속성은에 액세스 할 수 있는지, 그리고 파일 크기는 그들 중 하나입니다.

   아래의 HTML에 대한

   <input type="file" id="myFile" />
   

   다음을 시도하십시오

   //binds to onchange event of your input field
   $('#myFile').bind('change', function() {
   
     //this.files[0].size gets the size of your file.
     alert(this.files[0].size);
   
   });
   

   는 HTML5 사양의 일부이기 때문에, 그것은 최신 브라우저 (IE에 필요한 V10) 만 일이 내가 당신이 알아야 할 다른 파일에 대한 정보를 여기에 자세한 내용과 링크를 추가합니다 : http://felipe.sabino.me/javascript / 2012 / 01 / 30 / javascipt 검사 - 더 - 파일 사이즈 /

   오래된 브라우저 지원

   그래서 this.files에 액세스 이전 this.files 전화에 대한 오래된 브라우저에 null 값을 반환된다는 점에 유의해야합니다 [0] 예외가 발생하고 당신이 그것을 사용하기 전에 파일 API 지원을 위해 확인해야

2. ---

   2.이 방법을 만들어 당신이 할 수있는 jQuery의 유효성 검사를 사용하려면 :

   이 방법을 만들어 당신이 할 수있는 jQuery의 유효성 검사를 사용하려면 :

   $.validator.addMethod('filesize', function(value, element, param) {
       // param = size (en bytes) 
       // element = element to validate (<input>)
       // value = value of the element (file name)
       return this.optional(element) || (element.files[0].size <= param) 
   });
   

   당신은 그것을 사용합니다 :

   $('#formid').validate({
       rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576  }},
       messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" }
   });
   

3. ---

   3.이 코드 :

   이 코드 :

   $("#yourFileInput")[0].files[0].size;
   

   양식 입력의 파일 사이즈를 돌려줍니다.

   FF 3.6 이상이 코드가 있어야한다 :

   $("#yourFileInput")[0].files[0].fileSize;
   

4. ---

   4.나는 ASP.NET는 FileUpload 제어에 사용도 내 솔루션을 게시하고있다. 아마도 누군가는 유용하게 찾을 수 있습니다.

   나는 ASP.NET는 FileUpload 제어에 사용도 내 솔루션을 게시하고있다. 아마도 누군가는 유용하게 찾을 수 있습니다.

       $(function () {        
       $('<%= fileUploadCV.ClientID %>').change(function () {
   
           //because this is single file upload I use only first index
           var f = this.files[0]
   
           //here I CHECK if the FILE SIZE is bigger than 8 MB (numbers below are in bytes)
           if (f.size > 8388608 || f.fileSize > 8388608)
           {
              //show an alert to the user
              alert("Allowed file size exceeded. (Max. 8 MB)")
   
              //reset file upload control
              this.value = null;
           }
       })
   });
   

5. ---

   5.아래의 사용, 파일의 크기를 확인하고 그것의 더 큰 경우 취소

   아래의 사용, 파일의 크기를 확인하고 그것의 더 큰 경우 취소

       $("input[type='file']").on("change", function () {
        if(this.files[0].size > 2000000) {
          alert("Please upload file less than 2MB. Thanks!!");
          $(this).val('');
        }
       });
   

6. ---

   6.당신은 자바 스크립트를 플래시 나 실버 라이트와 함께 확인하지만 이런 종류의 작업을 수행 할 수 있습니다. 자바 스크립트 샌드 박스는 파일 시스템에 대한 액세스를 허용하지 않습니다. 크기 검사가 업로드 한 후 완료 서버 측 될 필요가있다.

   당신은 자바 스크립트를 플래시 나 실버 라이트와 함께 확인하지만 이런 종류의 작업을 수행 할 수 있습니다. 자바 스크립트 샌드 박스는 파일 시스템에 대한 액세스를 허용하지 않습니다. 크기 검사가 업로드 한 후 완료 서버 측 될 필요가있다.

   당신이 실버 라이트 / 플래시 경로를 이동하려는 경우, 당신은 확인할 수 있습니다 그들이 정상 대조군을 사용하는 일반 파일 업로드 핸들러에 기본적으로 설치되어 있지 않은 경우 그. (가) 실버이있는 경우이 방법 / 플래시는 자신의 경험을 좀 더 부자가 될 것입니다 설치.

7. ---

   7.

   <form id="uploadForm" class="disp-inline" role="form" action="" method="post" enctype="multipart/form-data">
       <input type="file" name="file" id="file">
   </form>
   <button onclick="checkSize();"></button>
   <script>
       function checkSize(){
           var size = $('#uploadForm')["0"].firstChild.files["0"].size;
           console.log(size);
       }
   </script>
   

   난 당신이 표준 아약스 / HTML5의 방법을 통해 제출 양식에 계획하지 않으면이 가장 쉬운 것으로 확인하지만, 물론 그것은 아무것도 작동합니다.

   메모:

   var size = $('#uploadForm')["0"]["0"].files["0"].size;
   

   이 작업에 사용하지만, 난 그냥 위의 코드를 테스트, 더 이상 크롬으로하지 않습니다 그것은 FF와 크롬 (최신) 모두에서 일했다. 제 [ "0"이제 firstChild이다.

8. ---

   8.이것을 시도하십시오 :

   이것을 시도하십시오 :

   var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on
   var sizeLimit= 30;
   
   if (sizeInKB >= sizeLimit) {
       alert("Max file size 30KB");
       return false;
   }
   

from https://stackoverflow.com/questions/1601455/how-to-check-file-input-size-with-jquery by cc-by-sa and MIT license