[英]jQuery multiple file upload from scratch
我正在尝试使用新的HTML5 Multiple属性在jQuery中实现多图片上传器 。
我的代码如下:
<form action="file-upload.php" method="post" enctype="multipart/form-data">
<input name="userfiles" type="file" multiple="multiple">
</form>
我正在使用的JS代码来自SO的讨论,内容如下:
$('input[name=userfiles]').change(function() {
var names = [];
for (var i = 0; i < $(this).get(0).files.length; ++i) {
names.push($(this).get(0).files[i].name);
console.log(names[i]);
}
});
这样我可以在控制台上打印我选择的文件名,但是如果我需要获取这些文件的确切val()怎么办? 我尝试用.val()替换.name ,但是出现错误。
我想如果我希望能够使用$ .ajax与每个文件一起使用,则每个文件都需要一个falsepath 。 如果这是正确的,我如何在发送get请求的PHP文件中循环它们以上传它们?
您可以使用HTML5 FormData API。 https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
var form = new FormData();
for (var i = 0; i < $(this).get(0).files.length; ++i) {
form.append('userfiles[]', $(this).get(0).files[i]);
}
// send form data with ajax
$.ajax({
url: 'url',
type: "POST",
data: form
});
或者,如果您不能使用FormData,则可以采用一种本地发送的方式: https : //developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files
您无需操纵文件路径,在ajax调用中,只需使用File并将其放入新的FormData中
像这样:
$.ajax({
'type':'POST',
'data': (new FormData()).append('file', $(this).get(0).files[i])
如果您使用jquery-file-upload插件,则可以使用此插件
<input class="fileupload" type="file" name="file">
和
$('.fileupload').each(function () {
$(this).fileupload({
//your code goes here
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.