这里我有两个表单字段（文件上传），第一个用户选择徽标并选择一个横幅图像意味着值将进入下一页（home.php）。假设用户选择一个徽标并选择多个横幅图像意味着我可以没有得到下一页的价值（home.php）。你能做到吗？
<script>
var i=0;
$(document).on("click",".add_banner",function() {
i++;
var htmlText = '';
htmlText += '<div class="form-group"><label class="col-md-3 control-label">Project Banners</label><div class="col-md-6"><div class="fileupload fileupload-new" data-provides="fileupload"><div class="input-append"><div class="uneditable-input"><i class="fa fa-file fileupload-exists"></i><span class="fileupload-preview"></span></div><span class="btn btn-default btn-file"><span class="fileupload-exists">Change</span><span class="fileupload-new">Select file</span>';
htmlText +='<input type="file" name="banners[]" id="banners' + i +'">';
htmlText += '</span><span style="margin-left:10px"><button type="button" class="btn btn-default add_banner" id="add_banner">Add</button></span><a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a></div></div></div></div>';
$('#add_banner_append').append(htmlText);
});
</script>
<script>
$(document).ready(function(){
$('#btn-submit').click(function(){
if($('#empForm').valid()){
var formData = new FormData();
var formData = new FormData($('#empForm')[0]);
formData.append('logo', $('input[type=file]')[0].files[0]);
formData.append('banners', $('input[type=file]')[1].files[1]);
$.ajax({
type:'POST',
url :"php/home.php",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data) {
console.log(data);
if(data == "Success"){
$("#alert_success").show();
$("#alert_success").fadeOut(3000);
setTimeout(function () {
window.location.href = "dashboard.php";
}, 2000); //will call the function after 2 secs.
}
},
error:function(exception){
alert('Exeption:'+exception);
}
});
return false;
}
});
});
// Shorthand for $( document ).ready()
</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form class="form-horizontal form-bordered" method="POST" id="empForm">
<div class="form-group">
<label class="col-md-3 control-label">Project Logo</label>
<div class="col-md-6">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<i class="fa fa-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file">
<span class="fileupload-exists">Change</span>
<span class="fileupload-new">Select file</span>
<input type="file" id="logo" name="logo" required="" data-msg-required="File" value="" aria-required="true">
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Project Banners</label>
<div class="col-md-6">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<i class="fa fa-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file">
<span class="fileupload-exists">Change</span>
<span class="fileupload-new">Select file</span>
<input type="file" id="banners" name="banners[]" required="" data-msg-required="File" value="" aria-required="true">
</span><span style="margin-left:10px">
<button type="button" class="btn btn-default add_banner" id="add_banner">Add</button></span>
</div>
</div>
</div>
</div>
<div id="add_banner_append"></div>
<div class="form-group">
<div class="col-md-3">
</div>
<div class="col-md-6">
<input type="button" class="btn btn-primary btn-block" id="btn-submit" name="submit" value="SUBMIT">
</div>
</div>
</form
$postedBanners = array();
/* foreach ($_FILES['banners']['name'] as $key => $value) {
$postedBanners[$key] = array(
'name' => $_FILES['banners']['name'][$key],
'type' => $_FILES['banners']['type'][$key],
'tmp_name' => $_FILES['banners']['tmp_name'][$key],
'error' => $_FILES['banners']['error'][$key],
);
} */
$uploads_dir = '/banners';
foreach ($_FILES["banners"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$tmp_name = $_FILES["banners"]["tmp_name"][$key];
// basename() may prevent filesystem traversal attacks;
// further validation/sanitation of the filename may be appropriate
$name = $_FILES["banners"]["name"][$key];
move_uploaded_file($tmp_name, "$uploads_dir/$name");
}
}
答案 0 :(得分：0)
您在html表单和ajax调用中都缺少enctype。您应该在表单中添加enctype，如<form class="form-horizontal form-bordered" method="post" id="empForm" enctype="multipart/form-data">。
Aslo在ajax调用中添加enctype -
$('#btn-submit').click(function(){
if($('#empForm').valid()){
var formData = new FormData();
var formData = new FormData($('#empForm')[0]);
formData.append('logo', $('input[type=file]')[0].files[0]);
formData.append('banners', $('input[type=file]')[1].files[1]);
$.ajax({
type:'POST',
url :"test.php",
enctype: 'multipart/form-data',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data) {
console.log(data);
if(data == "Success"){
$("#alert_success").show();
$("#alert_success").fadeOut(3000);
setTimeout(function () {
window.location.href = "dashboard.php";
}, 2000); //will call the function after 2 secs.
}
},
error:function(exception){
alert('Exeption:'+exception);
}
});
return false;
}
});
我添加了enctype：＆＃39; multipart / form-data＆＃39;在ajax呼唤。
在服务器端，您需要获取所有多个添加的横幅图像，如下所示 -
if(!empty($_FILES['banners']['name'])){
$postedBanners = array();
foreach ($_FILES['banners']['name'] as $key => $value) {
$postedBanners[$key] = array(
'name' => $_FILES['banners']['name'][$key],
'type' => $_FILES['banners']['type'][$key],
'tmp_name' => $_FILES['banners']['tmp_name'][$key],
'error' => $_FILES['banners']['error'][$key],
);
}
echo '<pre>';
print_r($postedBanners);
}
我将返回如下输出 -
Array
(
[0] => Array
(
[name] => preview.png
[type] => image/png
[tmp_name] => /private/var/tmp/php9Fyir9
[error] => 0
)
)
用于上传文件夹中的横幅图片。
$uploads_dir = '/uploads';
foreach ($_FILES["banners"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$tmp_name = $_FILES["banners"]["tmp_name"][$key];
// basename() may prevent filesystem traversal attacks;
// further validation/sanitation of the filename may be appropriate
$name = basename($_FILES["banners"]["name"][$key]);
move_uploaded_file($tmp_name, "$uploads_dir/$name");
}
}