如何在Jquery/Ajax脚本中使用$_FILES来保持在以前的HTML页面上并将文件上传到文件夹中

Question

我有一个php脚本上传文件到文件夹:

$photo = $_FILES["photo"]['name'];
$background = $_FILES["background"]['name'];

move_uploaded_file($_FILES["photo"]['tmp_name'],"C:/MAMP/htdocs/Projet-Your-Market/uploads/".$photo);
move_uploaded_file($_FILES["background"]['tmp_name'],"C:/MAMP/htdocs/Projet-Your-Market/uploads/".$background);

这个工作得很好，不要介意我没有测试文件是否存在或其他测试，这只是为了看看上传文件是如何工作的。

我也做了一个脚本使用Ajax来避免php文件被加载，然后重定向到我的主页。

$(function(){
$('#form').submit(function(e){
e.preventDefault();
var myData = $(this).serialize()
$.ajax({
url: '/Projet-Your-Market/PHP/createSellerAccount.php',
type: 'POST', // GET or POST
data: myData,
success: function() { // data is the response from your php script
// This function is called if your AJAX query was successful
window.location.href = '/Projet-Your-Market/HTML/homePage.html';
},
error: function() {
// This callback is called if your AJAX query has failed
alert("Error!");
}
});
});
});

这两个代码似乎可以独立工作，但当我将它们组合在一起时，我需要上传的文件没有上传。

这是我的html代码

<div class="title">Create a seller account</div>
<form  method="POST" id="form" enctype="multipart/form-data">
<div>Username : <input type="text" name="username"></div>
<div>Password : <input type="password" name="password"></div>
<div>First name : <input type="text" name="fName"></div>
<div>Last name : <input type="text" name="lName"></div>
<div>Email : <input type="text" name="email"></div>
<div>Photo : <input type="file" name="photo"></div>
<div>Background : <input type="file" name="background"></div>
<button id="submitButton" type="submit">Create</button>
</form>

Answer 1

用FormData()代替serialize()

var formData = new FormData(this);

查看更多详细信息-使用Ajax在一个表单中上传数据和文件?