我想上传多个文件。用例是:用户在我的网站上可以上传多张照片。
现在我只使用
<input type="file" name="myfiles" multiple="multiple">
这个很好，但我想要更多。我想要一个很好的界面，向用户显示上传的内容，并使其更清楚哪些文件正在上传。
https://github.com/blueimp/jQuery-File-Upload
所以这个blueimp jquery文件上传脚本有漂亮的UI，正是我所寻找的。但是有几个问题:
1)我想提交的形式，以php文件将决定是否文件被上传或不。
2)我的表单有许多(许多)其他字段。我想这是通过普通的旧帖子提交按钮连同我的表单的其余部分一起提交。这可能吗?
如果没有，有人能推荐一个更好的选择吗?
谢谢!
使用blueimp文件上传插件可以实现上述所有功能。
1)决定是否上传文件
使用插件中的add:选项对服务器进行单独的ajax调用，并添加文件名，并使用响应来过滤要上传的文件列表。
使用formData:选项在插件中添加表单中的其他字段，以便在提交时传递给服务器。
就像这样:
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: false,
acceptFileTypes: /('.|'/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000, // 5 MB
loadImageMaxFileSize: 15000000, // 15MB
formData: $("#myForm").serializeArray()
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo('#files');
$.ajax(
url: "/checkfiles",
data: { files: data.files },
success: function(result) {
// assume server passes back list of accepted files
$.each(result.files, function (index, file) {
var node = $('<p/>')
.append($('<span/>').text(file.name));
if (!index) {
node
.append('<br>')
.append(uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});
}
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node
.prepend('<br>')
.prepend(file.preview);
}
if (file.error) {
node
.append('<br>')
.append(file.error);
}
if (index + 1 === data.files.length) {
data.context.find('button')
.text('Upload')
.prop('disabled', !!data.files.error);
}
}).on('fileuploaddone', function (e, data) {
$.each(data.result.files, function (index, file) {
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
$(data.context.children()[index])
.wrap(link);
});
}).on('fileuploadfail', function (e, data) {
$.each(data.result.files, function (index, file) {
var error = $('<span/>').text(file.error);
$(data.context.children()[index])
.append('<br>')
.append(error);
});
});
});