在文件上傳之前自定義緊湊型jQuery文件大小檢查解決方案

Question

我有一個html頁面，允許用戶上載csv文檔。 它使用jquery文件上傳庫。 csv發送到服務器並執行一些操作並返回結果。 這一切都很好。

現在，要求我在將文件發送到服務器之前檢查文件大小。 我知道jquery文件上傳具有驗證各種內容的選項，但是問題是

• 我想避免向已經過大的頁面添加其他庫
• 我寧願不修改現有的$（'＃fileupload'）。fileupload（）代碼

這就是我的想法

1. 在調用$（'＃fileupload'）。fileupload（）之前，我需要先調用另一個函數
2. 此新功能將檢查文件大小
3. 如果大小低於大小限制，它將繼續進行fileupload，否則，向用戶返回一條消息。

我是服務器開發人員，jQuery不是我的強項。 我的想法行得通嗎？ 所以我的問題是，如何在fileupload（）之前調用一個函數，以及可以使用什么代碼檢查大小？ 該解決方案僅需要在現代瀏覽器中工作。 如果有人使用舊的瀏覽器，我仍然會在服務器端捕獲它。 任何指導或想法如何做到這一點將不勝感激。

HTML代碼

 /*
  * jQuery File Upload Plugin 5.42.3
  * https://github.com/blueimp/jQuery-File-Upload
  */
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>     
 <script type="text/javascript" src="js/jquery.ui.widget.js"></script>   
 <script type="text/javascript" src="js/upload.js"></script>
 <script type="text/javascript" src="js/jquery.fileupload.js"></script>
/** other unrelated stuff here **/

 <span class="button fileinput-button"> 
     <span>CSV</span>
     <input id="fileupload" type="file" name="file" multiple/>
 </span>    

jQuery代碼

   $('#fileupload').fileupload({
       url: url,
       dataType: 'json',
       formData: {lang: $('#language_id').val()},        
       done: function (e, data) {
            if(data.result.reportData == null) {
                showPreviewError(data.result.errorMsg);
            } else {
                report.reportGroups=data.result.reportData;
                initializeUI();
                showPreviewSuccess();
            }           
       }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');

Answer 1

HTML5引入了File API。 在某些舊版瀏覽器中不支持此功能，但是您可以像這樣檢查文件的大小。

 $(function() { $("#fileUpload").on("change", function() { var input = this; if (input.files && input.files[0]) { // check the File API is supported alert("File size: " + input.files[0].size + "KB"); } else { alert("File API not supported"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="fileUpload" type="file" /> 

在這里查看更多信息。