Jquery文件上传插件：如何在添加时validation文件？

$('#fileupload') .fileupload({ acceptFileTypes: /(\.|\/)(jpg)$/i }) .on('fileuploadadd', function (e, data) { console.log(data.files.valid); //undefined setTimeout(function () { console.log(data.files.valid); //true or false }, 500); }) ; 

的jsfiddle

如何在没有超时的情况下获取属性data.files.valid布尔值？

Answer 1

这是你想要做的：

 $('#fileupload') .fileupload({ acceptFileTypes: /(\.|\/)(jpg)$/i }) .bind('fileuploadadded', function (e, data) { console.log(data.files.valid); }); 

核心jquery.fileupload.js文件正在添加您的文件并触发“fileuploadadd”事件，但这是在validation文件之前 。

文件jquery.fileupload-ui.js在添加文件后进行validation，并在完成后触发另一个“fileuploadadded”事件。

改变事件，你就完成了。

请注意：

这个答案是有效的，并在2013年3月发布时有效。 从那时起，这个上传插件似乎已经发生了变化。 这意味着有一个新问题，你应该发布一个新问题（或搜索以查看是否有人）而不是向下投票！

Answer 2

我需要使用当前版本的插件（5.39.1）进行validation，这对我有用：

确保在jquery.fileupload-process.js 之后和初始化脚本之前按此顺序包含jquery.fileupload-process.js和jquery.fileupload-validate.js 。

在初始化脚本中，添加validation选项并在fileuploadprocessalways回调中检查validation：

 $('.fileinput').fileupload({ // The regular expression for allowed file types, matches // against either file type or file name: acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, // The maximum allowed file size in bytes: maxFileSize: 10000000, // 10 MB // The minimum allowed file size in bytes: minFileSize: undefined, // No minimal file size // The limit of files to be uploaded: maxNumberOfFiles: 10 }).on('fileuploadprocessalways', function (e, data) { var currentFile = data.files[data.index]; if (data.files.error && currentFile.error) { // there was an error, do something about it console.log(currentFile.error); } }); 

所有validation都是可选的，只是不要留下不需要的validation。

Answer 3

这就是我所做的，它适用于我的新版本：我为每种类型的文件及其大小创建了一个validation。

 $("#fileUploadArea").fileupload({ dataType: 'json', url:'${upload}', multiple:true, autoSubmit:false, maxNumberOfFiles: Number('${quantidadeMaximaArquivosUpload}'), dynamicFormData: function() { var data ={ idEntidadeEmpresarial: $('#idEntidadeEmpresarial').val(), idDominioFamilia: $('#idDominioFamilia').val(), idSubgrupo: $('select[id^="subgrupo_').map(function(){return $(this).val();}).get(), descricao: $('#descricao').val(), validade: $('#validade').val() } return data; }, headers: { Accept: "application/json" }, accept: 'application/json', imageMaxWidth: 800, imageMaxHeight: 800, imageCrop: true , stop: function(){ $.unblockUI(); if($('#fechar').is(":checked")){ window.close(); }else{ $('select[id^="subgrupo_').each(function(){ $(this).val(''); $(this).trigger("chosen:updated"); }) $('#validade').val(''); $('#descricao').val(''); $('#sucesso').html(''); $('#sucesso').append('
'); $('#sucesso').show(); } }, error: function(files,status,errMsg) { $('#erro').html(''); $('#erro').append('
'+errMsg+'
'); $('#erro').show(); }, acceptFileTypes : ${listaExtensaoPermitidas} }).on('fileuploadprocessalways', function (e, data) { var currentFile = data.files[data.index]; var tamanho = currentFile.size; var extensao = currentFile.name.substring(currentFile.name.lastIndexOf(".") +1,currentFile.name.length); if(hashExtensao.get(extensao.toUpperCase()) < tamanho){ alert("file type max size "+hashExtensao.get(extensao.toUpperCase()); data.abort(); } }); 

Answer 4

嗯，@ jszbody的答案是完美的答案。

但是，如果有人在这里寻找类似问题的解决方案，用户想要知道文件是否未正确添加，请与我一样。

blueimp jquery-file-upload不会在不成功的添加上抛出错误

Answer 5

这是您想要使用较新版本的插件（9.11.2）：包含此文件：
– jquery.ui.widget.js
– jquery.iframe-transport.js
– jquery.fileupload.js
– jquery.fileupload-process.js
– jquery.fileupload-validate.js

 $('#fileupload') .fileupload({ acceptFileTypes: /(\.|\/)(jpg)$/i }) .on('fileuploadadd', function (e, data) { console.log('validation object not available at this point. Do not do submit here'); }) .on('fileuploadprocessalways', function (e, data) { console.log(data.files.error);//true if error console.log(data.files[0].error);//error message if(!data.files.error) data.submit(); //do submission here });