javascript - 文件上传前自定义紧凑jquery文件大小检查解决方案

Question

我有一个 html 页面，允许用户上传 csv 文档。它使用jquery文件上传库。 csv 被发送到服务器并执行一些操作并返回结果。这一切都很好。

现在，我被要求在将文件发送到服务器之前检查文件大小。我知道 jquery 文件上传有验证各种内容的选项，但问题是

• 我想避免向已经过于臃肿的页面添加额外的库
• 我不想修改现有的 $('#fileupload').fileupload() 代码

这就是我的想法

1. 在 $('#fileupload').fileupload() 被调用之前我需要另一个首先调用的函数
2. 这个新功能将检查文件大小
3. 如果大小低于大小限制，则会继续文件上传，否则，向用户返回一条消息。

我是一名服务器开发人员，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 引入了文件 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" />

检查here了解更多信息。