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

绑定事件以显示警报（需要jquery.fileupload-validate.js）：

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

客户端的jQuery文件扩展验证

1 个答案: