Question

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

现在我被要求在将文件发送到服务器之前检查文件大小。我知道jquery文件上传有选项来验证所有类型的东西，但问题是

我想避免在已经过度膨胀的网页上添加额外的库
我宁愿不修改现有的$（'＃fileupload'）。fileupload（）代码

所以这就是我的想法

在$（'＃fileupload'）之前.fileupload（）被调用，我需要另一个首先调用的函数
此新功能将检查文件大小
如果size大小不足，则会继续使用fileupload，否则会向用户返回一条消息。

我是服务器开发人员，jquery不是我的强项。我的想法会奏效吗？所以我的问题是，如何在fileupload（）之前调用函数以及我可以使用哪些代码来检查大小？该解决方案只需要在现代浏览器中工作。如果有人使用旧浏览器，我仍然会在服务器端捕获它。如何做任何指导或想法将非常感激。

HTML CODE

 /*
  * 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。某些较旧的浏览器不支持它，但您可以检查文件的大小。

＆＃13;

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

＆＃13;

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

＆＃13;

查看here了解详情。

在fileupload之前自定义紧凑的jquery文件大小检查解决方案

1 个答案: