blueImp / jquery文件上传 - 如果不接受文件类型，如何收到错误消息？

9 回答

• 0

  使用 processfail 回调

  $('#fileupload').fileupload({
      maxFileSize: 5000000,
      done: function (e, data) {
          $.each(data.result.logo, function (index, file) {
              $('<p/>').text(file.name).appendTo('#fileupload-files');
          });
      },
      processfail: function (e, data) {
          alert(data.files[data.index].name + "\n" + data.files[data.index].error);
      }
  });
  

  回复于 2024-05-03T21:17:36+08:00
• 0

  为此你可以使用文件添加的回调来验证文件，像这样，使用“return false”来避免添加该文件;

  $('#yourfileuploader').fileupload({
                      add: function (e, data) {
                          var fileType = data.files[0].name.split('.').pop(), allowdtypes = 'jpeg,jpg,png,gif';
                          if (allowdtypes.indexOf(fileType) < 0) {
                              alert('Invalid file type, aborted');
                              return false;
                          }
  
                      }
                  });
  

  或者您可以像这样注册fileuploadadded回调，

  $('#yourfileuploader').fileupload().bind('fileuploadadded', function (e, data) {
                      var fileType = data.files[0].name.split('.').pop(), allowdtypes = 'jpeg,jpg,png,gif';
                      if (allowdtypes.indexOf(fileType) < 0) {
                          alert('Invalid file type, aborted');
                          return false;
                      }
                  });
  

  您也可以使用;访问fileupload acceptFileTypes选项; e.originalEvent.data.fileupload.options.acceptFileTypes

  您可以在这里找到更多信息;

  https://github.com/blueimp/jQuery-File-Upload/wiki/Options

  回复于 2024-05-03T21:17:36+08:00
• 8

  我知道这是一个旧线程，但如果有人仍在寻找如何获取错误消息，这是一种方法：

  $('#fileupload').bind('fileuploadprocessfail', function (e, data) {
      alert(data.files[data.index].error);
  });
  

  回复于 2024-05-03T21:17:36+08:00
• 4

  正如user2999209所提到的，正确的方法是使用 fileuploadprocessfail 回调 .

  要完成答案，如果您希望翻译错误消息，则应传递以下（未记录的）选项：

  $('#my-uploader').fileupload({
      // ... some options ...
      messages : {
        maxNumberOfFiles: 'AAA Maximum number of files exceeded',
        acceptFileTypes: 'AAA File type not allowed',
        maxFileSize: 'AAA File is too large',
        minFileSize: 'AAA File is too small'
        uploadedBytes : 'AAA Uploaded bytes exceed file size'
      },
      // ... some other options ...
    })
    .on("fileuploadprocessfail", function(e, data) {
      var file = data.files[data.index];
      alert(file.error);
    });
  

  尝试上载文件类型错误的文件将导致显示消息“不允许AAA文件类型” .

  回复于 2024-05-03T21:17:36+08:00
• 1

  如果您使用的是PHP服务器，我有一个更简单的解决方案 . 如果你不是，我相信这对你也有帮助 .

  您不需要在前端使用acceptFileTypes参数 . 只需使用以下参数初始化PHP UploadHandler类：

  array(
      'accept_file_types' => '/\.(gif|jpe?g|png)$/i',
      'upload_url' => 'uploads/', // both of upload_url, upload_dir equals to the upload destination
      'upload_dir' => 'uploads/',
      'max_file_size' => 1024*1024*2 // in byte
  )
  

  当您传递不需要的文件类型或文件大小时，ajax返回将是类似的

  {name: "Dream Come True.mp3", size: 14949044, type: "audio/mp3", error: "File type not allowed"}
  

  要么

  {name: "feng (3).jpg", size: 634031, type: "image/jpeg", error: "File is too big"}
  

  回复于 2024-05-03T21:17:36+08:00
• 34

  The order you load scripts is important 以使用默认验证过程显示错误消息，

  This order works for me :

  • tmpl.min.js

  • jquery.ui.widget.js

  • jquery.iframe-transport.js

  • jquery.fileupload.js

  • jquery.fileupload-ui.js

  • jquery.fileupload-process.js

  • jquery.fileupload-validate.js

  回复于 2024-05-03T21:17:36+08:00
• 5

  最好验证文件类型（它的格式类似于“image / jpeg”）而不是扩展 . 在这种情况下，您可以避免出现区分大小写和类似意外问题的潜在问题

  $('#yourfileuploader').fileupload().bind('fileuploadadded', function (e, data) {
                      var fileType = data.files[0].type;
                      if (type.indexOf('image') < 0) {
                          alert('Invalid file type, aborted');
                          return false;
                      }
                  });
  

  回复于 2024-05-03T21:17:36+08:00
• 2

  如果您不熟悉javascript错误处理的工作方式，最好阅读以下主题：try/catch (MDN)

  但是，错误实际上是fileupload原型中的一个方法，所以理论上这个函数将在错误发生时执行 .

  只需将添加到方法中的errorHandler即可 .

  ...
  error: function (e, data) {
          var a = 1; // <--in your example, this does nothing.
          alert(e); // <--or whatever you wish to do with the error
          return a; // <--did you want to return true?
      }
  ...
  

  如果此警报从未发生，则不会引发错误 . 以下代码通常是如何捕获它们的 . （它不会这样做吗？）

  try {
  
    ...any code you want to exception handle with...
  
    }
    catch (e) {      
      alert(e);
    }
  

  回复于 2024-05-03T21:17:36+08:00
• 15

  我在这些回答中找到的任何内容都没有为我工作，奇怪的是，为该插件编写演示的开发人员使用了与文档中描述的不同的风格 . 无论如何，这是不重要的 .

  我复制了他们用来使UI版本工作的代码，这最终为我做了诀窍 . 他们使用.on方法和'processalways'来检查错误，而不是使用'error'或'fail'方法 .

  view-source：http://blueimp.github.io/jQuery-File-Upload/basic-plus.html

  这是源代码 .

  干杯

  回复于 2024-05-03T21:17:36+08:00