javascript - 客户端的 jQuery 文件扩展名验证

Question

您好，我有这个 jQuery 代码，用于将文件从客户端浏览器直接上传到 Cloudinary，如果文件扩展名不是 jpg/jpeg 和 png，我想在客户端进行快速检查并返回错误。

默认情况下，Cloudinary 接受几乎所有文件格式，因此我已经限制了 Cloudinary(服务器端)的扩展名，因此文件上传后不会立即保存。选择或删除文件后，上传过程就会开始。

问题是文件首先上传(显示正在上传...文本)，然后被 cloudinary 拒绝。我希望在单击不允许的文件扩展名或将其拖放到浏览器时立即弹出错误消息，并阻止上传过程的开始。

代码:

$(function() {
    $('.cloudinary-fileupload')
    .fileupload({ 
      dropZone: '#direct_upload',
      start: function () {
        $('.status_value').text('Starting logo upload...');
      },
      progress: function (e, data) {
        $('.status_value').text('Uploading...');
        var com = Math.round((data.loaded * 100.0) / data.total)
        $("#direct_upload .progress .progress-bar").attr("style","width:"+com+"%")
      },
    })
    .on('cloudinarydone', function (e, data) {
        $('.status_value').text('Uploaded!');
        $("#direct_upload .progress").attr("style","display:none");
        $("#direct_upload .progress .progress-bar").attr("style","width: 0%")

        var info = $('<div class="uploaded_info"/>');

        $(info).append($('<div class="data"/>').append(prettydump(data.result.path)));

          })
        ));
        $('.uploaded_info_holder').append(info);
    });

我尝试使用此代码，但没有成功，因为每次刷新页面时它都会显示警报消息:

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
alert('invalid extension!');
}

任何帮助将不胜感激!

Answer 1

您需要acceptFileTypes选项:

acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i

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

绑定(bind)事件以显示警报(jquery.fileupload-validate.js 是必需的):

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