推荐:HTML5 AJAX 文件上传模块
以下是一个简单的HTML5 AJAX文件上传模块的示例代码:
HTML部分:
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="myFile" id="myFile" multiple>
<input type="submit" value="Upload" id="upload">
</form>
JavaScript部分:
document.getElementById('uploadForm').onsubmit = function(event) {
event.preventDefault();
var files = document.getElementById('myFile').files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
var file = files[i];
formData.append('files[]', file);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
if (this.status == 200) {
console.log('File(s) uploaded successfully');
} else {
console.error('Error during file upload');
}
};
xhr.send(formData);
};
这段代码使用了HTML5的FormData
对象来构建表单数据,并且使用了XMLHttpRequest来完成异步的文件上传。用户通过点击<input type="submit" value="Upload">
按钮来触发上传。在实际应用中,你需要将/upload
路径替换为你的服务器端处理上传文件的路径。
评论已关闭