Javascript Ajax多文件上传不起作用
我使用此代码通过ajax传递所有文件输入。html代码中有三个输入文件,但只有第一个文件输入可以由ajax发送。如何修复此代码?我的错在哪里Javascript Ajax多文件上传不起作用,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我使用此代码通过ajax传递所有文件输入。html代码中有三个输入文件,但只有第一个文件输入可以由ajax发送。如何修复此代码?我的错在哪里 $("#add_order").click(function () { //*****get data input var formData = new FormData(); formData.append( 'action', 'add_order'); $.each($("input[type=file]
$("#add_order").click(function () {
//*****get data input
var formData = new FormData();
formData.append( 'action', 'add_order');
$.each($("input[type=file]"), function(i, obj) {
$.each(obj.files,function(j,file){
alert(file.name);
formData.append('orderpic[]', file);
});
});
//ajax start and ajax complatet
ajax_loading();
$.ajax({
url: "includes/ajax/ajax.php",
data: formData,
processData: false,
contentType: false,
type: 'POST',
dataType:'json',
success: function(response){
//load json data from server and output message
if(response.type == 'error'){ //load json data from server and output message
output = '<div class="alert alert-danger" style="margin-top:12px;">'+response.text+'</div>';
}else{
output = '<div class="alert alert-success" style="margin-top:12px;">'+response.text+'</div>';
resetAllValues();
setTimeout(function() {
$('#new-order').modal('hide');
}, 1500);
}
$("#results").hide().html(output).fadeIn('slow').delay(800).fadeOut();
});
});
$(“#添加订单”)。单击(函数(){
//*****获取数据输入
var formData=new formData();
append('action','add_order');
$。每个($(“输入[type=file]”),函数(i,obj){
$.each(对象文件,函数(j,文件){
警报(文件名);
append('orderpic[],文件);
});
});
//ajaxstart和ajaxcomplett
ajax_加载();
$.ajax({
url:“includes/ajax/ajax.php”,
数据:formData,
processData:false,
contentType:false,
键入:“POST”,
数据类型:'json',
成功:功能(响应){
//从服务器加载json数据并输出消息
if(response.type=='error'){//从服务器加载json数据并输出消息
输出=''+响应。文本+'';
}否则{
输出=''+响应。文本+'';
重置所有值();
setTimeout(函数(){
$(“#新订单”).modal('hide');
}, 1500);
}
$(“#结果”).hide().html(输出).fadeIn('slow').delay(800).fadeOut();
});
});
HTML代码:
<input type="file" name="orderpic[]" id="orderpic" class="form-control">
<input type="file" name="orderpic[]" id="orderpic" class="form-control">
<input type="file" name="orderpic[]" id="orderpic" class="form-control">
PHP代码:
//file settings
$files = array();
for($i=0; $i<count($_FILES['orderpic']['name']); $i++) {
//Get the temp file path
$tmpFilePath = $_FILES['orderpic']['tmp_name'][$i];
//Make sure we have a filepath
if ($tmpFilePath != "") {
//Setup our new file path
$time = time();
$ext = pathinfo($_FILES['orderpic']['name'][$i], PATHINFO_EXTENSION);
$FilePath = $uploaddir . $time .'.'. $ext;
//Upload the file into the temp dir
if (move_uploaded_file($tmpFilePath, $FilePath)) {
$resizeObj = new resize($FilePath);
$resizeObj -> resizeImage(200, 350, 'portrait');
$newFilePath = $uploaddir. "200_350_" .$time.'.'.$ext;
$resizeObj -> saveImage($newFilePath, 100);
unlink($FilePath);
$files[] = "200_350_" .$time.'.'.$ext;
}
}
}
//文件设置
$files=array();
对于($i=0;$i调整图像大小(200350,‘肖像’);
$newFilePath=$uploaddir.“200_350_u”。$time.。$ext;
$resizeObj->saveImage($newFilePath,100);
取消链接($FilePath);
$files[]=“200_350_.$time..”.$ext;
}
}
}
输入控件的“id”不能相同。请将其更改为如下html所示的格式,它应该可以工作
<input type="file" name="orderpic[]" id="orderpic1" class="form-control">
<input type="file" name="orderpic[]" id="orderpic2" class="form-control">
<input type="file" name="orderpic[]" id="orderpic3" class="form-control">
可能是因为没有使用is
基本名称($\u文件['orderpic']['name'][$i])
在$FilePath
和$newFilePath
中
试试这个:
for($i=0; $i<count($_FILES['orderpic']['name']); $i++) {
//Get the temp file path
$tmpFilePath = $_FILES['orderpic']['tmp_name'][$i];
//Make sure we have a filepath
if ($tmpFilePath != "") {
//Setup our new file path
$time = time();
$ext = pathinfo($_FILES['orderpic']['name'][$i], PATHINFO_EXTENSION);
//$FilePath = $uploaddir . $time .'.'. $ext;
$FilePath = $uploaddir . $time. basename($_FILES['orderpic']['name'][$i]);
//Upload the file into the temp dir
if(move_uploaded_file($tmpFilePath, $FilePath)){
$resizeObj = new resize($FilePath);
$resizeObj -> resizeImage(200, 350, 'portrait');
$newFilePath = $uploaddir ."200_350". $time. basename($_FILES['orderpic']['name'][$i]);
$resizeObj -> saveImage($newFilePath, 100);
unlink($FilePath);
$files[] = "200_350". $time. basename($_FILES['orderpic']['name'][$i]);
}
}
}
用于($i=0;$i调整图像大小(200350,'肖像');
$newFilePath=$uploaddir。“200_350”。$time.basename($_FILES['orderpic']['name'][$i]);
$resizeObj->saveImage($newFilePath,100);
取消链接($FilePath);
$files[]=“200_350”。$time.basename($_files['orderpic']['name'][$i]);
}
}
}
你所说的“不工作”是什么意思?有错误吗?你检查过了吗?你的php代码是什么样子的?你检查过开发者工具(通常是F12)的“网络”选项卡并检查请求,看看它实际上是发送所有文件还是只发送一个文件吗?@PatrickEvans我在问题中添加了php代码。@JayBlanchard我检查了console.log()在chrom中,我没有收到错误。另一种方法是检查错误?虽然元素确实需要唯一的id,但由于OP没有使用id来获取元素,这并没有回答问题。这不是一个相关的答案!