我正在制作一张上传照片的表单，而且我有多个没有。在单个表单下具有不同字段名称的输入类型“文件”字段。
另外，我正在使用ajax来发送这些文件。我是编码PHP的新手，我在搜索解决方案的过程中花费了大约6个小时，并在其中进行了大量修改，但无法解决。
我面临的问题是只有一个字段的文件传递给PHP而其他字段都是空的。文件移动成功后，只获得一个字段的输出。用'print_r'检查后，我发现那些数组是空的。
我的图片文件不到250 KB和JPG。那么没有任何文件大小和类型问题。
HTML代码（AJAX请求后来自PHP的回应）：
<form action=\"upload.php\" method=\"POST\" enctype=\"multipart/form-data\" class=\"upload-inputs\">
<div class=\"upload-wrap\">
<input placeholder=\"Choose a file..\" class=\"file-name\" type=\"text\">
<input type=\"file\" name=\"file1\" id=\"file\" class=\"inputfile\">
<label for=\"file\">Browse</label>
</div>
<div class=\"upload-wrap\">
<input placeholder=\"Choose a file..\" class=\"file-name\" type=\"text\">
<input type=\"file\" name=\"file2\" id=\"file\" class=\"inputfile\">
<label for=\"file\">Browse</label>
</div>
<div class=\"upload-wrap\">
<input placeholder=\"Choose a file..\" class=\"file-name\" type=\"text\">
<input type=\"file\" name=\"file3\" id=\"file\" class=\"inputfile\">
<label for=\"file\">Browse</label>
</div>
<button class=\"manage-btn upload-btn\" type=\"submit\">Upload</button>
</form>
<div class=\"upload-alert\"></div>
JQuery＆amp; AJAX：
$(document).on('submit','.upload-inputs', function(e) {
e.preventDefault();
$.ajax({
url : "upload.php",
method: "POST",
data : new FormData(this),
processData: false,
contentType: false,
success:function(mesg)
{
$(".upload-alert").html(mesg);
}
});
});
未使用多个文件选择，因为在检入移动浏览器（Chrome）后，我发现它不允许在手机中选择多个文件。所以使用不同的单个输入字段。
'upload.php'代码：
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
// Having this same code for 'file2' & file3 below (Just changing the variable names to file2 & file3)
if(!empty($_FILES['file1']))
{
$file1 = $_FILES['file1'];
$file1_name = $file1['name'];
$file1_tmp = $file1['tmp_name'];
$file1_error = $file1['error'];
$file1_size = $file1['size'];
$file1_size = $file1_size / 1024;
$file1_size = number_format($file1_size, 0);
$file1_ext = explode('.', $file1_name);
$file1_ext = strtolower(end($file1_ext));
$allowed = array('jpg');
if (in_array($file1_ext, $allowed))
{
if($file1_error === 0)
{
if($file1_size <= 2048)
{
$file1_name_new = uniqid(rand()) . ".$file1_ext";
$file1_destination = 'profile_image/'.$file1_name_new;
// Output if successfully moved.
if (move_uploaded_file($file1_tmp, $file1_destination))
{
echo " <div class=\"files-bar1\">
<button class=\"manage-btn delete-image\">Delete</button>
<img class=\"image-thumb\" src=\"profile_image/$file1_name_new\">
<label class=\"image-name\">$file1_name_new</label><br>
<p class=\"image-size\">$file1_size KB</p><br>
<p class=\"percentage\">_% Completed</p><br/>
<progress class=\"upload-progress\" min=\"0\" max=\"100\"></progress>
<label class=\"stop-uploading\">✖</label>
</div>";
}
else
{
echo "Sorry, something went wrong. Please try again later.";
}
}
else
{
echo "Image Size Must Be Under 2 MB.";
}
}
else
{
echo "Caught Error.";
}
}
else
{
echo "Only JPG/JPEG format is allowed.";
}
}
else
{
echo "file1 Undefined.";
}
}
答案 0 :(得分：0)
首先，您需要为表单设置正确的标记。
multiple而不是创建更多输入所以你的标记应该是
<form action="upload.php" method="POST" enctype="multipart/form-data" class="upload-inputs">
<div class="upload-wrap">
<input placeholder="Choose a file.." class="file-name" type="text">
<input type="file" name="file" id="file" class="inputfile" multiple max="3">
<label for="file">Browse</label>
</div>
<input name="submit" id="submit" value="Upload" type="submit">
</form>
对于脚本方面 在使用ajax之前将文件数据添加到您的 所以脚本应该是
$(document).ready(function () {
$("#submit").click(function (e) {
e.preventDefault();
var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function (i, file) {
data.append('file' + i, file);
});
$.ajax({
url: 'upload.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function (data) {
console.log(data); // To see output in console
}
});
});
});
如果您想将文件上传限制为仅3，那么您也可以设置限制。
$(document).ready(function () {
$("#submit").click(function (e) {
e.preventDefault();
var $fileUpload = $("input[type='file']");
if (parseInt($fileUpload.get(0).files.length) > 3) {
alert("You can only upload a maximum of 3 files");
return false;
} else {
var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function (i, file) {
data.append('file' + i, file);
});
console.log(data);
$.ajax({
url: 'upload.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function (data) {
console.log(data);
}
});
}
});
});
在upload.php中，您可以从file0, file1, file2...收到此类内容。
Array
(
[file0] => Array
(
[name] => step1.jpg
[type] => image/jpeg
[tmp_name] => D:\wamp\tmp\phpE8A7.tmp
[error] => 0
[size] => 56187
)
[file1] => Array
(
[name] => step2.jpg
[type] => image/jpeg
[tmp_name] => D:\wamp\tmp\phpE8A8.tmp
[error] => 0
[size] => 56910
)
[file2] => Array
(
[name] => step3.jpg
[type] => image/jpeg
[tmp_name] => D:\wamp\tmp\phpE8A9.tmp
[error] => 0
[size] => 57051
)
[file3] => Array
(
[name] => taxi_service-1.png
[type] => image/png
[tmp_name] => D:\wamp\tmp\phpE8BA.tmp
[error] => 0
[size] => 7741
)
)
如果有任何疑问，请在评论中提问。
答案 1 :(得分：0)
此问题已解决。由于在＆＃39;标签＆＃39;中使用了相同的ID，因此只有一个文件被php上传。和＆＃39;输入＆＃39;标签。 Ajax Code中不需要进行任何更改。
只需标记每个＆＃39;标签＆＃39;和＆＃39;输入＆＃39;标签需要更改。
正确格式：
<form action=\"upload.php\" method=\"POST\" enctype=\"multipart/form-data\" class=\"upload-inputs\">
<div class=\"upload-wrap\">
<input placeholder=\"Choose a file..\" class=\"file-name\" type=\"text\">
<input type=\"file\" name=\"file1\" id=\"file1\" class=\"inputfile\">
<label for=\"file1\">Browse</label><br>
<input placeholder=\"Choose a file..\" class=\"file-name\" type=\"text\">
<input type=\"file\" name=\"file2\" id=\"file2\" class=\"inputfile\">
<label for=\"file2\">Browse</label><br>
<input placeholder=\"Choose a file..\" class=\"file-name\" type=\"text\">
<input type=\"file\" name=\"file3\" id=\"file3\" class=\"inputfile\">
<label for=\"file3\">Browse</label><br>
</div>
</form>