[英]jQuery-File-Upload used for UI only?
I would like to upload multiple files. 我想上传多个文件。 The use case is: users on my website can upload multiple photographs.
用例是:我网站上的用户可以上传多张照片。
Right now I am just using 现在我正在使用
<input type="file" name="myfiles" multiple="multiple">
This works well, but I want more. 这很好,但是我想要更多。 I'd like a nice interface showing the user what is uploaded AND for it to be more clear about which files are being uploaded.
我想要一个很好的界面,向用户显示上传的内容,并让用户更清楚地了解要上传的文件。
https://github.com/blueimp/jQuery-File-Upload
So this blueimp jquery file upload script has beautiful UI and is just what I'm looking for. 因此,这个blueimp jquery文件上传脚本具有漂亮的UI,这正是我想要的。 However there are a few issues:
但是,存在一些问题:
1) I would like to submit the form to a php file which will DECIDE if the files get uploaded or not. 1)我想将表格提交到一个php文件,该文件将决定文件是否上传。
2) My form has many (many..) other fields. 2)我的表单还有很多(很多..)其他字段。 I would like this to submit via plain old post submit button along with the rest of my form.
我希望通过普通的旧帖子提交按钮以及我的表格的其余部分来提交。 Is this possible?
这可能吗?
If not, can someone recommend a better option? 如果没有,有人可以推荐一个更好的选择吗?
Thanks! 谢谢!
All of the above is possible with the blueimp file upload plugin. 使用blueimp文件上传插件可以完成以上所有操作。
1) Decide if files get uploaded or not 1)确定文件是否上传
Use the add:
option in the plugin to make a separate ajax call to the server with the filenames added, and use the response to filter the list of files to be uploaded. 使用插件中的
add:
选项可对add:
了文件名的服务器进行单独的ajax调用,并使用响应过滤要上传的文件列表。
2) Add other data from the form to the upload 2)将表单中的其他数据添加到上传中
Use the formData:
option in the plugin to add the other fields in a form to be passed to the server upon submit. 使用插件中的
formData:
选项在表单中添加其他字段,以便在提交时将其传递给服务器。
So something like the following: 因此,如下所示:
$('#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);
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.