在我的表单中有多个文件上传,使用FormData
只上传了一个文件,但我选择了多个要上传的文件,以下是代码
HTML
<form name="uploadImages" method="post" enctype="multipart/form-data">
<input type="file" name="photo[]" value="">
<input type="file" name="photo[]" value="">
<input type="file" name="photo[]" value="">
</form>
JS
var ajaxData = new FormData();
ajaxData.append( 'action','uploadImages');
jQuery.each($("input[name^='photo']")[0].files, function(i, file) {
ajaxData.append('photo['+i+']', file);
});
$.ajax({
url: URL,
data: ajaxData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
dataType:'json',
success: function(data) {
if (data.status == 'success') {
location.reload();
}
}
});
我在服务器上使用PHP
,使用HTML attribute name
i,e photo
我只能保存文件,动态文件名对我不起作用。< / p>
答案 0 :(得分:19)
你在javascript中有一个错误:你只在一个输入中迭代文件,请看看这个
var ajaxData = new FormData();
ajaxData.append( 'action','uploadImages');
$.each($("input[type=file]"), function(i, obj) {
$.each(obj.files,function(j, file){
ajaxData.append('photo['+j+']', file);
})
});
示例jsfiddle
答案 1 :(得分:2)
在前端
<form name="uploadImages" method="post" enctype="multipart/form-data">
<input type="file" name="photo[]" value=""/>
<input type="file" name="photo[]" value=""/>
<input type="file" name="photo[]" value=""/>
<button id="btn">btn</button>
</form>
<script>
$(function(){
var ajaxData = new FormData();
ajaxData.append( 'action','uploadImages');
$.each($("input[type=file]"), function(i, obj) {
$.each(obj.files,function(j, file){
ajaxData.append('photo['+j+']', file);
$('#btn').on('click',function(){
$.ajax({
url:'https://stores-govan.c9users.io/test',
type:"POST",
data:ajaxData,
processData:false,
contentType:false,
success:function(){
},
crossDomain:true
})
})
})
});
})
</script>
在后端(nodejs)添加(使用multer)
var multer=require('multer')
app.post('/test',upload.array('photo[]',6),function(req ,res,next){
var images=[]
if(req.files){
for(var i=0;i<req.files.length;i++){
images[i]=req.files[i].filename }
}
console.log(images)
})
答案 2 :(得分:1)
xquery version "1.0-ml";
import module namespace admin = "http://marklogic.com/xdmp/admin" at "/MarkLogic/admin.xqy";
declare namespace db = "http://marklogic.com/xdmp/database";
let $config := admin:get-configuration()
let $database-id := xdmp:database()
let $existing-index := admin:database-get-range-element-indexes($config, $database-id)[
db:namespace-uri = "http://www.dummy.com/namespaces/dummy"
and db:localname = "dummyValue"
]
let $config := admin:database-delete-range-element-index($config, $database-id, $existing-index)
let $config := admin:database-add-range-element-index($config, $database-id, admin:database-range-element-index(
"gYear",
"http://www.dummy.com/namespaces/dummy",
"dummyValue",
(),
fn:false(),
"reject"
))
return
admin:save-configuration($config)
上一个答案有一个小错误,修复了下一个代码,并且可以通过ajax发送多个文件:
<input type="file" name="Attachment[]" class="form-control TheFiles" />
可选择只为你可以看到我的ajax配置
var formData = new FormData();
$.each($(".TheFiles"), function (i, obj) {
$.each(obj.files, function (j, file) {
formData.append('Attachment[' + i + ']', file); // is the var i against the var j, because the i is incremental the j is ever 0
});
});
formData.append('Destination', Destination); //add more variables that you need
formData.append('ReplyTo', ReplyTo);//add more variables that you need
formData.append('Body', Body);//add more variables that you need
答案 3 :(得分:0)
这些答案无效。
var ajaxData = new FormData();
ajaxData.append( 'action','uploadImages');
$.each($("input[type=file]"), function(i, obj) {
$.each(obj.files,function(j,file){
ajaxData.append('photo['+j+']', file);//i had to change "i" by "j"
})
});
答案 4 :(得分:0)
这很好:
var data = new FormData();
for( var i = 0, len = document.getElementById('attachment').files.length; i < len; i++ ){
data.append( "files" + i, document.getElementById('attachment').files[i] );
}