[英]plain (no library) AJAX file upload
我正在快速嘗試輕量級文件上傳功能。
關於使用jQuery將文件上傳到服務器,SO上有很多答案, 我想避免這種情況。
我正在尋找一種使用普通Javascript(無JS庫)選擇文件時將文件上傳到服務器進行驗證的方法
關鍵問題是:
1.為什么AJAX調用不起作用?
2.按下“上傳”按鈕后,我想在服務器端確認文件名相同,如果相同,則不執行任何操作(如果不同),停止當前服務器處理,然后重新開始-是否可以用PHP做到這一點?
源文件的當前狀態如下:html:
<!DOCTYPE html>
<html lang="en">
<body>
<form id="upload_form" action="processPage.php" method="post">
<input type="file" accept=".csv" id="input_file">
<output id="file_upload"></output>
<label id="status_message"></label>
<br>
<input type="button" id="upload_to_server" value="upload" onclick="uploadFile" >
</form>
<script>
// Send file to server for validation
function handleFileSelect(e)
{
// file that was uploaded
file = e.target.files[0];
// create XMLHttpRequest object
if (window.XMLHttpRequest)
{
request = new XMLHttpRequest();
}
else
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("POST", "processPage.php", true);
request.setRequestHeader("X_FILENAME", file.name);
// Check status message
request.onreadystatechange = function() {
if (request.readyState == 4) {
var message;
switch (request.status) {
case 200:
message = "File validated successfully.";
break;
case 406:
message = "Error: No file selected.";
break;
default:
message = "File validation failure, check file contents.";
break;
}
var container = document.getElementById('status_message');
container.innerHTML = message;
}
else {
alert( "Unexpected error: " + this.statusText + ".\nPlease try again");
}
};
request.send(file);
}
// Process file on server - send it again to server if file name changed
function uploadFile()
{
}
var output = document.getElementById('file_upload');
if (output.addEventListener) {
output.addEventListener('change', handleFileSelect, false);
} else {
output.attachEvent('change', handleFileSelect);
}
</script>
</body>
</html>
php文件:
<?php
if ($_SERVER['REQUEST_METHOD'] != 'POST' || !isset($_SERVER['HTTP_X_FILENAME'])) {
$response_code = 406;
}
else {
// FIXME - how to distinguish between the POST from AJAX 'validate file' & 'upload file' call
$response_code = 200;
}
header('X-PHP-Response-Code: '.$response_code, true, $response_code);
?>
使用XMLHttpRequest級別2中的FormData對象。
var formData = new FormData();
var fileInput = document.getElementById('input_file');
var file = fileInput.files[0];
formData.append("thefile", file);
request.send(formData);
這樣,您可以從PHP中訪問文件
$_FILES['thefile'];
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.