我想用HTML, JavaScript和PHP上传一个文件到web服务器。
我的HTML是这样的:
<form method="post" enctype="multipart/form-data" name="uploadForm">
<input type="file" name="uploadFile" onchange="uploadplz();">
<!-- <input type="submit" name="upload_submit" value="Upload"> -->
</form>
提交按钮被注释掉了，因为我只能使用一个按钮来上传和提交文件。我有一个调用JavaScript函数的onchange属性。然后，JavaScript函数使用AJAX调用调用PHP函数。
我的JavaScript/AJAX是这样的:
<script type="text/javascript">
function uploadplz() {
$.ajax({
type: "POST",
url: "file.php",
data: "uploadForm",
success: function(response) {
alert(response);
}
});
}
</script>
PHP的isset是这样的:
if(isset($_POST["uploadForm"])) {
upload_file();
}
PHP函数如下:
function upload_file() {
$dir = "files/";
$target_file = $dir.basename($_FILES["uploadFile"]["name"]);
echo $target_file."</br>";
if(move_uploaded_file($_FILES["uploadFile"]["tmp_name"], $target_file)) {
echo $target_file." uploaded successfully.</br>";
} else {
echo "Error uploading</br>";
}
}
当使用2个按钮，PHP工作良好，即上传文件。我假设我的AJAX是错误的，当试图使用一个按钮。PHP函数返回Error uploading消息和一个空白文件名。
有什么建议吗?
您只上传字符串"uploadForm"，不上传File对象。使用FormData()上传<form>，参见jQuery Ajax文件上传
function uploadplz() {
$.ajax({
type: "POST",
url: "file.php",
data: new FormData(document.querySelector("form")),
processData: false,
contentType: false,
success: function(response) {
alert(response);
}
});
}