我正在尝试构建将在我的网站项目中使用的上传模块。我选择了blueimp文件上传，因为它提供了所有配置选项。
想法是有按钮，将显示带上传模块的模态窗口 我的（几乎）工作原型可以在这里找到：http://jsfiddle.net/Misiu/4Th3u/
我现在想要的是限制用户可以选择的文件数量和文件大小。因为我使用的是非ui版本，所以我无法使用maxNumberOfFiles和maxFileSize选项。
我创建了add回调：
add: function (e, data) {
var uploadErrors = [];
console.log('add event');
$.each(data.originalFiles, function(index,file) {
console.log(file.name);
if (file.size && file.size > 1024 * 1024 * 5) {
uploadErrors.push('File "' + file.name + '" is too large');
}
})
if (uploadErrors.length > 0) {
alert(uploadErrors.join("\n"));
} else {
var tpl = $('<li class="working"><input type="text" value="0" data-width="36" data-height="36"' +' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
tpl.find('p').text(data.files[0].name)
.append('<i>' + formatFileSize(data.files[0].size) + '</i>');
data.context = tpl.appendTo(ul);
tpl.find('input').knob();
tpl.find('span').click(function () {
if (tpl.hasClass('working')) {
jqXHR.abort();
}
tpl.fadeOut(function () {
tpl.remove();
});
});
var jqXHR = data.submit();
}
}
问题是add被多次触发，如果我选择2个文件，我会得到2个事件
以下是选择两个文件后控制台的外观：
add event
file1.gif
file2.gif
add event
file1.gif
file2.gif
我想限制文件数量和文件大小，但由于这个bug，这并不容易。
答案 0 :(得分：2)
我无法回答您的具体问题，但我必须在上传之前克服验证所选文件的问题。您可以在非ui版本中使用maxFileSize属性，您只需要自己向UI显示任何错误。您还需要确保在页面上也引用了进程和验证JS文件。
这是我的解决方案，不幸的是，已经删除了进度，但图像预览仍然存在！尽管如此，你不应该太难以破解模板的东西来满足你的需求。
我的表单如下：
<form id="FileUpload" action="/Expense/UploadReceipt" method="POST" enctype="multipart/form-data">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-md-12">
<input type="file" name="files[]" multiple class="btn btn-default">
<button type="reset" class="btn btn-danger cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel All</span>
</button>
<button type="submit" class="btn btn-success start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
</div>
</div>
<!-- The loading indicator is shown during image processing -->
<div class="fileupload-loading"></div>
<br>
<!-- The table listing the files available for upload/download -->
<table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>
我的文件上传初始化如下所示：
$('#FileUpload').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: uploadUrl + data,
dataType: 'json',
headers: {
Accept: "application/json"
},
accept: 'application/json',
maxFileSize: 5000000, //5mb
sequentialUploads: true,
resizeMaxWidth: 1920,
resizeMaxHeight: 1200,
acceptFileTypes: /(.|\/)(gif|jpe?g|png|pdf)$/i,
uploadTemplateId: null,
downloadTemplateId: null,
uploadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-upload fade">' +
'<td class="preview"><span class="fade"></span></td>' +
'<td class="name"><strong class="error text-danger"></strong></td>' +
'<td class="size"></td>' +
(file.error ? '<td class="error" colspan="1"></td>' :
'<td class="actions-col">' +
'<button class="btn btn-danger cancel"><i class="glyphicon glyphicon-ban-circle"></i> <span>Cancel</span></button> ' +
'<button class="btn btn-success start"><i class="glyphicon glyphicon-upload"></i> <span>Start</span></button>' +
' </td>') + '</tr>');
row.find('.name').text(file.name);
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
row.find('.error').text(
locale.fileupload.errors[file.error] || file.error
);
}
rows = rows.add(row);
});
return rows;
},
downloadTemplate: function (o) {
var rows = $();
$.each(o.files, function (index, file) {
var row = $('<tr class="template-download fade">' +
(file.error ? '<td></td><td class="name"></td>' +
'<td class="size"></td><td class="error" colspan="2"></td>' :
'<td class="preview"></td>' +
'<td class="name"><a></a></td>' +
'<td class="size"></td><td colspan="2"></td>'
));
row.find('.size').text(o.formatFileSize(file.size));
if (file.error) {
//row.find('.name').text(file.name);
//row.find('.error').text(
// locale.fileupload.errors[file.error] || file.error
//);
} else {
row.find('.name a').text(file.name);
var extension = file.name.substring(file.name.length - 3, file.name.length);
if (extension == "pdf") {
row.find('.name a').attr('target', '_blank');
} else {
row.find('.name a').addClass("fancyImageLink");
}
if (file.thumbnail_url) {
row.find('.preview').append('<a><img></a>')
.find('img').prop('src', file.thumbnail_url);
row.find('a').prop('rel', 'gallery');
}
row.find('a').prop('href', file.url);
row.find('.delete')
.attr('data-type', file.delete_type)
.attr('data-url', file.delete_url);
}
rows = rows.add(row);
});
return rows;
}
});
错误处理在这里完成：
$('#FileUpload').bind('fileuploadprocessalways', function (e, data) {
var currentFile = data.files[data.index];
if (data.files.error && currentFile.error) {
$('.files tr').eq(data.index).find(".start").prop('disabled', true);
if (currentFile.error == "File is too large") {
$('.files tr').eq(data.index).find(".size").addClass('field-validation-error');
} else {
$('.files tr').eq(data.index).find(".name").addClass('field-validation-error');
}
$("#ReceiptUploadAlert p").text(currentFile.name + ": " + currentFile.error);
$("#ReceiptUploadAlert").show();
return;
}
});
希望这会以某种方式帮助你。
答案 1 :(得分：0)
在
var jqXHR = data.submit();
添加return false;，这会阻止上传提交，直到您点击开始上传