[英]Upload file to server asynchronously via form and XMLHttpRequest
I need to upload a file by only using vanilla.js, no frameworks are allowed. 我只需要使用vanilla.js上传文件,不允许使用任何框架。
Form: 形成:
<form id="fileUploadForm" action="fileUpload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
</form>
I placed the button outside of the form, because it is at another position in the HTML. 我将按钮放在了表单的外面,因为它在HTML中的另一个位置。
<button id="btnUpload">Upload</button>
This is the upload Script. 这是上传脚本。 I am using
FormData
to get the form data, as described in this answer . 我正在使用
FormData
来获取表单数据,如本答案所述 。
<script>
document.getElementById("btnUpload").addEventListener("click", function() {
fileUpload("fileUploadForm");
});
function fileUpload(pFormId)
{
debugger;
var form = document.getElementById(pFormId);
var formData = new FormData( form ); //returns no data!
var request = getHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
console.log("Response Received");
document.getElementById("debug").innerHTML = request.responseText;
}
};
request.open("POST", "fileUpload.php", true);
// request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.setRequestHeader("Content-type","multipart/form-data");
formData.append("action","test"); //Add additional POST param
request.send(formData);
}
function getHttpRequest()
{
let xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
</script>
I am using the PHP upload script from here . 我正在从这里使用PHP上传脚本。
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
I attached the debugger to my javascript and found out that formData
is empty and does not contain the file. 我将调试器附加到我的javascript上,发现
formData
为空并且不包含该文件。
This is what I get from PHP: 这是我从PHP得到的:
Sorry, file already exists.
抱歉,文件已存在。
Sorry, only JPG, JPEG, PNG & GIF files are allowed.Sorry, your file was not uploaded.
对不起,只允许JPG,JPEG,PNG和GIF文件。对不起,您的文件尚未上传。
Even though the file does NOT already exists AND the file format is jpg. 尽管该文件不已经存在,文件格式为JPG。
Update: 更新:
This is what I get in the developers console network tab: 这是我在开发人员控制台的“网络”标签中看到的:
Request Payload:
------WebKitFormBoundaryKjnjAyPoCQ7MU1x6
Content-Disposition: form-data; name="fileToUpload"; filename="Koala.jpg"
Content-Type: image/jpeg
------WebKitFormBoundaryKjnjAyPoCQ7MU1x6--
I appreciate any help! 感谢您的帮助!
Just drop the content-type
header, that will be set automatically by browser when using FormData
. 只需删除
content-type
标头,该标头将在使用FormData
时由浏览器自动设置。 That way content-type will also contain form boundary used to separate form data (the thing like ------WebKitFormBoundaryKjnjAyPoCQ7MU1x6--
that separated the payload data). 这样,内容类型还将包含用于分隔表单数据的表单边界(例如
------WebKitFormBoundaryKjnjAyPoCQ7MU1x6--
用于分隔有效载荷数据的东西)。
I'd modify the code slightly. 我会稍微修改一下代码。
document.getElementById("btnUpload").addEventListener("click", function() {
fileUpload("fileUploadForm");
});
You're binding the event on click
. click
绑定事件。 I'd modify this and attach a submit
event to the form. 我会对此进行修改,然后在表单上附加一个
submit
事件。
The closure will get the event target as callback: 闭包将把事件目标作为回调:
document.getElementById("fileUploadForm").addEventListener("submit", function(e) { // <- pay attention to parameter
e.preventDefault(); // Prevent the default action so we stay on the same page.
fileUpload(e); // pass the event to your function
});
Now, on to your fileUpload
function. 现在,转到您的
fileUpload
函数。
function fileUpload(e)
{
debugger;
var formData = new FormData( e.target ); // pass the event target to FormData which serializes the data
var request = getHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
console.log("Response Received");
document.getElementById("debug").innerHTML = request.responseText;
}
};
request.open("POST", "fileUpload.php", true);
request.setRequestHeader("Content-type","multipart/form-data");
request.send(formData);
}
Disclaimer: I did not test this at all , so don't copy paste and expect it to work! 免责声明: 我根本没有测试过 ,所以不要复制粘贴并期望它能起作用!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.