blueimp文件上传插件中的maxFileSize和acceptFileTypes不起作用。为什么？ [英] maxFileSize and acceptFileTypes in blueimp file upload plugin do not work. Why?
问题描述
我没有上传的问题，但是选项 maxFileSize 和 acceptFileTypes 不起作用。
这是我的代码：
$（document）.ready（function（）{$ b $'use strict';
$（'＃fileupload '）.fileupload（{
dataType：'json'，
autoUpload：false，
acceptFileTypes：/(\.|\//)(gif|jpe?g|png)$ / i，
maxFileSize：5000000，
done：function（e，data）{
$ .each（data.result.files，function（index，file）{
$ （'< p style =color：green;>'+ file.name +'< i class =elusive-okstyle =padding-left：10px;/> （'＃div_files'）;
}）;
}，
失败：函数（e，data）{
$ .each（data.messages，function（index，error）{
$（'< p style =color：red;>上传文件错误：'+ error +'< i class = （'＃div_files'）; / /< / p>< / p>
}）;
}，
progressall：function（e，data）{
var progress = parseInt（data.loaded / data.total * 100，10）;
$（'＃progress .bar'）。css（'width'，progress +'％'）;
}
}）;
}）;
同样的问题，blueimp的人说 maxFileSize和acceptFileTypes只支持UI版本并提供了一个（破坏）链接来包含_validate和_hasError方法。
因此，如果不知道如何合并这些方法而不搞乱脚本，我写了这个小函数。它似乎为我工作。
只要添加这个
add ：function（e，data）{
var uploadErrors = [];
var acceptFileTypes = / ^ image \ /（gif | jpe？g | png）$ / i;
if（data.originalFiles [0] ['type']。length&&！acceptFileTypes.test（data.originalFiles [0] ['type']））{
uploadErrors.push（ '不是接受的文件类型'）; （data.originalFiles [0] ['size'] .length&& data.originalFiles [0] ['size']> 5000000）{
uploadErrors。
if推（'文件尺寸太大'）;
if（uploadErrors.length> 0）{
alert（uploadErrors.join（\\\
））;
} else {
data.submit（）;
}，
在.fileupload选项开始处显示在这里你的代码
$（document）.ready（function（）{$ b $'use strict';
$ b $（'＃fileupload'）。fileupload（{
add：function（e，data）{
var uploadErrors = [];
var acceptFileTypes = / ^ image （data.originalFiles [0] ['type']。长度&&！acceptFileTypes.test（data.originalFiles [0] ['type']））{
uploadErrors.push（'Not a accepted file type'）;
}
if（data.originalFiles [0] ['size']。length& amp ;& data.originalFiles [0] ['size']> 5000000）{
uploadErrors.push（'Filesize is too big'）;
}
if（uploadErrors.length> ; 0）{
alert（uploadErrors.join（\\\
））;
} else {
data.submit（）;
$ dataType：'json'，
autoUpload：false，
// acceptFileTypes：/(\.|\ /（gif | jpe？g | png）$ / i，
// maxFileSize：5000000，
完成：function（e，data）{
$ .each（data.result.files，function（index ，file）{
$（'< p style =color：green;>'+ file.name +'< i class =elusive-okstyle =padding-left：10px; /> - 类型：'+ file.type +' - 大小：'+ file.size +'byte< / p>'）
.appendTo（'＃div_files'）;
}） ;
}，
fail：function（e，data）{
$ .each（data.messages，function（index，error）{
$（'< p style = color：red;>上传文件错误：'+ error +'< i class =elusive-removestyle =padding-left：10px;/>< / p>）
.appendTo（'＃div_files'）;
}）;
}，
progressall：function（e，data）{
var progress = parseInt（data.loaded / data.total * 100，10）;
$（'＃progress .bar'）。css（'width'，progress +'％'）;
}
}）;
}）;
你会注意到我在里面添加了一个文件大小的函数，因为那也只能在UI版本。
$ b
更新以获得@lopsided建议的问题：已添加 data.originalFiles [0] ['type']。length code>和 data.originalFiles [0] ['size']。length 查询以确保它们存在并且在测试错误之前不是空的。如果它们不存在，则不会显示错误，而只会依赖于服务器端的错误测试。
I'm using Blueimp jQuery file upload plugin for upload files.
I had no problem in uploading but the option maxFileSize and acceptFileTypes do not work.
This is my code:
$(document).ready(function () {
'use strict';
$('#fileupload').fileupload({
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000,
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p style="color: green;">' + file.name + '<i class="elusive-ok" style="padding-left:10px;"/> - Type: ' + file.type + ' - Size: ' + file.size + ' byte</p>')
.appendTo('#div_files');
});
},
fail: function (e, data) {
$.each(data.messages, function (index, error) {
$('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>')
.appendTo('#div_files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%');
}
});
});
Had the same problem, and the blueimp guy says "maxFileSize and acceptFileTypes are only supported by the UI version" and has provided a (broken) link to incorporate the _validate and _hasError methods.
So without knowing how to incorporate those methods without messing up the script I wrote this little function. It seems to work for me.
Just add this
add: function(e, data) {
var uploadErrors = [];
var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
uploadErrors.push('Not an accepted file type');
}
if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
uploadErrors.push('Filesize is too big');
}
if(uploadErrors.length > 0) {
alert(uploadErrors.join("\n"));
} else {
data.submit();
}
},
at the start of the .fileupload options as shown in your code here
$(document).ready(function () {
'use strict';
$('#fileupload').fileupload({
add: function(e, data) {
var uploadErrors = [];
var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
uploadErrors.push('Not an accepted file type');
}
if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
uploadErrors.push('Filesize is too big');
}
if(uploadErrors.length > 0) {
alert(uploadErrors.join("\n"));
} else {
data.submit();
}
},
dataType: 'json',
autoUpload: false,
// acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
// maxFileSize: 5000000,
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p style="color: green;">' + file.name + '<i class="elusive-ok" style="padding-left:10px;"/> - Type: ' + file.type + ' - Size: ' + file.size + ' byte</p>')
.appendTo('#div_files');
});
},
fail: function (e, data) {
$.each(data.messages, function (index, error) {
$('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>')
.appendTo('#div_files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%');
}
});
});
You'll notice I added a filesize function in there as well because that will also only work in the UI version.
Updated to get past issue suggested by @lopsided: Added data.originalFiles[0]['type'].length and data.originalFiles[0]['size'].length in the queries to make sure they exist and are not empty first before testing for errors. If they don't exist, no error will be shown and it will only rely on your server side error testing.
这篇关于blueimp文件上传插件中的maxFileSize和acceptFileTypes不起作用。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
