如何使用 PHP、jQuery 和 AJAX 上传多个文件
Posted
技术标签:
【中文标题】如何使用 PHP、jQuery 和 AJAX 上传多个文件【英文标题】：How to upload multiple files using PHP, jQuery and AJAX 【发布时间】：2013-10-18 05:05:12 【问题描述】：我设计了一个简单的表单，允许用户将文件上传到服务器。最初，表单包含一个“浏览”按钮。如果用户想要上传多个文件，他需要点击“添加更多文件”按钮，该按钮会在表单中添加另一个“浏览”按钮。提交表单时，文件上传过程在“upload.php”文件中处理。它非常适合上传多个文件。现在我需要使用 jQuery 的 '.submit()' 提交表单并向 'upload.php' 文件发送一个 ajax ['.ajax()'] 请求来处理文件上传。
这是我的 html 表单：
<form enctype="multipart/form-data" action="upload.php" method="post">
<input name="file[]" type="file" />
<button class="add_more">Add More Files</button>
<input type="button" id="upload" value="Upload File" />
</form>
这里是 javascript：
$(document).ready(function()
$('.add_more').click(function(e)
e.preventDefault();
$(this).before("<input name='file[]' type='file' />");
);
);
这是处理文件上传的代码：
for($i=0; $i<count($_FILES['file']['name']); $i++)
$target_path = "uploads/";
$ext = explode('.', basename( $_FILES['file']['name'][$i]));
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1];
if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path))
echo "The file has been uploaded successfully <br />";
else
echo "There was an error uploading the file, please try again! <br />";
任何关于我应该如何编写我的 '.submit()' 函数的建议都会很有帮助。
【问题讨论】：
我认为你应该使用这些过程之一，要么你可以提交，要么你可以通过 ajax 上传。你想要什么不清楚 ***.com/questions/166221/… 类似问题和可能的解决方案。 无论是提交还是上传，任何事情都对我有用。但文件上传是首要任务。 【参考方案1】：最后我通过以下代码找到了解决方案：
$('body').on('click', '#upload', function(e)
e.preventDefault();
var formData = new FormData($(this).parents('form')[0]);
$.ajax(
url: 'upload.php',
type: 'POST',
xhr: function()
var myXhr = $.ajaxSettings.xhr();
return myXhr;
,
success: function (data)
alert("Data Uploaded: "+data);
,
data: formData,
cache: false,
contentType: false,
processData: false
);
return false;
);
【讨论】：
你为什么不接受 Kalai 的回答，因为它几乎涵盖了你需要的一切 Kalai 的回答产生了多个错误。这就是我不接受的原因。但当他试图提供帮助时，我很高兴也很感激他。 不错且简单的解决方案，尽管在您上面发布的代码中您错过了一个 ;最后.. 如何在 php 中获取浏览过的文件（formData）？ @V.P 可以使用超全局变量 $_FILES 访问 PHP 中提交的文件相关数据。【参考方案2】：HTML
<form enctype="multipart/form-data" action="upload.php" method="post">
<input name="file[]" type="file" />
<button class="add_more">Add More Files</button>
<input type="button" value="Upload File" id="upload"/>
</form>
Javascript
$(document).ready(function()
$('.add_more').click(function(e)
e.preventDefault();
$(this).before("<input name='file[]' type='file'/>");
);
);
用于ajax上传
$('#upload').click(function()
var filedata = document.getElementsByName("file"),
formdata = false;
if (window.FormData)
formdata = new FormData();
var i = 0, len = filedata.files.length, img, reader, file;
for (; i < len; i++)
file = filedata.files[i];
if (window.FileReader)
reader = new FileReader();
reader.onloadend = function(e)
showUploadedItem(e.target.result, file.fileName);
;
reader.readAsDataURL(file);
if (formdata)
formdata.append("file", file);
if (formdata)
$.ajax(
url: "/path to upload/",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function(res)
,
error: function(res)
);
);
PHP
for($i=0; $i<count($_FILES['file']['name']); $i++)
$target_path = "uploads/";
$ext = explode('.', basename( $_FILES['file']['name'][$i]));
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1];
if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path))
echo "The file has been uploaded successfully <br />";
else
echo "There was an error uploading the file, please try again! <br />";
/**
Edit: $target_path variable need to be reinitialized and should
be inside for loop to avoid appending previous file name to new one.
*/
请使用上面的脚本进行 ajax 上传。它会工作
【讨论】：
它显示“TypeError: document.getElementByName is not a function” for var filedata = document.getElementByName("file") 仍然显示“TypeError: filedata.files is undefined” for "var i = 0, len = filedata.files.length, img, reader, file;" @Kalai：它显示此错误“未定义 showUploadedItem”。我应该怎么做才能解决它？ 它仍在重新加载我的页面 @kalai 它显示错误“filedata.files is undefined” for var "filedata = document.getElementsByName("file");"【参考方案3】：我的解决方案
假设表单 id = "my_form_id" 它从 HTML 中检测表单 method 和表单 actionjQuery 代码
$('#my_form_id').on('submit', function(e)
e.preventDefault();
var formData = new FormData($(this)[0]);
var msg_error = 'An error has occured. Please try again later.';
var msg_timeout = 'The server is not responding';
var message = '';
var form = $('#my_form_id');
$.ajax(
data: formData,
async: false,
cache: false,
processData: false,
contentType: false,
url: form.attr('action'),
type: form.attr('method'),
error: function(xhr, status, error)
if (status==="timeout")
alert(msg_timeout);
else
alert(msg_error);
,
success: function(response)
alert(response);
,
timeout: 7000
);
);
【讨论】：
【参考方案4】：使用此源代码，您可以像 google 一样上传多个文件 一个通过ajax。还可以看到上传进度
HTML
<input type="file" id="multiupload" name="uploadFiledd[]" multiple >
<button type="button" id="upcvr" class="btn btn-primary">Start Upload</button>
<div id="uploadsts"></div>
Javascript
<script>
function uploadajax(ttl,cl)
var fileList = $('#multiupload').prop("files");
$('#prog'+cl).removeClass('loading-prep').addClass('upload-image');
var form_data = "";
form_data = new FormData();
form_data.append("upload_image", fileList[cl]);
var request = $.ajax(
url: "upload.php",
cache: false,
contentType: false,
processData: false,
async: true,
data: form_data,
type: 'POST',
xhr: function()
var xhr = $.ajaxSettings.xhr();
if(xhr.upload)
xhr.upload.addEventListener('progress', function(event)
var percent = 0;
if (event.lengthComputable)
percent = Math.ceil(event.loaded / event.total * 100);
$('#prog'+cl).text(percent+'%')
, false);
return xhr;
,
success: function (res, status)
if (status == 'success')
percent = 0;
$('#prog' + cl).text('');
$('#prog' + cl).text('--Success: ');
if (cl < ttl)
uploadajax(ttl, cl + 1);
else
alert('Done');
,
fail: function (res)
alert('Failed');
)
$('#upcvr').click(function()
var fileList = $('#multiupload').prop("files");
$('#uploadsts').html('');
var i;
for ( i = 0; i < fileList.length; i++)
$('#uploadsts').append('<p class="upload-page">'+fileList[i].name+'<span class="loading-prep" id="prog'+i+'"></span></p>');
if(i == fileList.length-1)
uploadajax(fileList.length-1,0);
);
</script>
PHP
upload.php
move_uploaded_file($_FILES["upload_image"]["tmp_name"],$_FILES["upload_image"]["name"]);
【讨论】：
您可以像谷歌上传一样使用jquery ajax 和php 上传图片/文件。该文件将一个接一个地上传。并非全部在一个请求中...... 我试了之后什么也没做，是不是javascript有错误？以上是关于如何使用 PHP、jQuery 和 AJAX 上传多个文件的主要内容，如果未能解决你的问题，请参考以下文章