Ajax 简明教程
AJAX - File Uploading
AJAX 提供了一种创建可将文件上传到服务器的 HTTP 请求的灵活方法。我们可以使用 FormData 对象在请求中发送单个或多个文件。让我们借助以下示例来讨论此概念 −
Example − Uploading a Single File
在以下示例中，我们将使用 XMLHttpRequest 上传单个文件。因此，首先我们创建一个简单的表单，其中包含一个文件上传按钮和一个提交按钮。现在，我们在 JavaScript 中编写代码，在其中我们获取表单元素并在单击上传文件按钮时创建触发器的事件。在此事件中，我们将上传的文件添加到 FormData 对象中，然后创建一个 XMLHttpRequest 对象，该对象将使用 FormData 对象将文件发送到服务器，并处理服务器返回的响应。
<!DOCTYPE html>
<html>
<body>
<!-- Creating a form to upload a file-->
<form id = "myForm">
<input type="file" id="file"><br><br>
<button type="submit">Upload File</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(x){
// Prevent from page refreshing
x.preventDefault();
// Select the file from the system
// Here we are going to upload one file at a time
const myFile = document.getElementById('file').files[0];
// Create a FormData to store the file
const myData = new FormData();
// Add file in the FormData
myData.append("newFiles", myFile);
// Creating XMLHttpRequest object
var myhttp = new XMLHttpRequest();
// Callback function to handle the response
myhttp.onreadystatechange = function(){
if (myhttp.readyState == 4 && myhttp.status == 200) {
console.log("File uploaded Successfully")
}
};
// Open the connection with the web server
myhttp.open("POST", "https://httpbin.org/post", true);
// Setting headers
myhttp.setRequestHeader("Content-Type", "multipart/form-data");
// Sending file to the server
myhttp.send(myData);
})
</script>
</body>
</html>
Example − Uploading Multiple Files
在以下示例中，我们将使用 XMLHttpRequest 上传多个文件。这里我们在 DOM 中从具有文件类型属性的系统中选择两个文件。然后我们将输入文件添加到一个数组中。然后我们创建一个 FormData 对象并将输入文件附加到该对象。然后我们创建一个 XMLHttpRequest 对象，该对象将使用 FormData 对象将文件发送到服务器，并处理服务器返回的响应。
<!DOCTYPE html>
<html>
<body>
<!-- Creating a form to upload multiple files-->
<h2> Uploading Multiple files</h2>
<input type="file">
<input type="file">
<button>Submit</button>
<script>
const myButton = document.querySelector('button');
myButton.addEventListener('click', () => {
// Get all the input files in DOM with attribute type "file":
const inputFiles = document.querySelectorAll('input[type="file"]');
// Add input files in the array
const myfiles = [];
inputFiles.forEach((inputFiles) => myfiles.push(inputFiles.files[0]));
// Creating a FormData
const myformdata = new FormData();
// Append files in the FormData object
for (const [index, file] of myfiles.entries()){
// It contained reference name, file, set file name
myformdata.append(`file${index}`, file, file.name);
}
// Creating an XMLHttpRequest object
var myhttp = new XMLHttpRequest();
// Callback function
// To handle the response
myhttp.onreadystatechange = function(){
if (myhttp.readyState == 4 && myhttp.status == 200) {
console.log("File uploaded Successfully")
}
};
// Open the connection with the web server
myhttp.open("POST", "https://httpbin.org/post", true);
// Setting headers
myhttp.setRequestHeader("Content-Type", "multipart/form-data");
// Sending file to the server
myhttp.send(myformdata);
})
</script>
</body>
</html>