如何使用javascript上传文件？
如何使用javascript上传文件？
提问于 2018-06-26 13:32:40
我想用js创建一个上传程序。有没有人能教我怎么用javascript上传文件？
回答 3
Stack Overflow用户
发布于 2018-06-26 13:48:27
您可以像这样使用html5文件类型：
<input type="file" id="myFile">你的文件将会有价值：
var myUploadedFile = document.getElementById("myFile").files[0];有关更多信息，请参阅https://www.w3schools.com/jsref/dom_obj_fileupload.asp
请看这里的示例：https://www.script-tutorials.com/pure-html5-file-upload/
Stack Overflow用户
发布于 2018-12-19 06:14:55
您可以使用XMLHttpRequest和FormData上传文件。下面的示例展示了如何上传新选择的文件。
<input type="file" name="my_files[]" multiple/>
<script>
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const fd = new FormData();
// add all selected files
e.target.files.forEach((file) => {
fd.append(e.target.name, file, file.name);
});
// create the request
const xhr = new XMLHttpRequest();
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
// we done!
}
};
// path to server would be where you'd normally post the form to
xhr.open('POST', '/path/to/server', true);
xhr.send(fd);
});
</script>Stack Overflow用户
发布于 2021-05-27 00:27:59
HTML部件：
<form enctype = "multipart/form-data" onsubmit="return false;" >
<input id="file" type="file" name="static_file" />
<button id="upload-button" onclick="uploadFile(this.form)"> Upload </button>
</form>
JavaScript部件：
function uploadFile(form){
const formData = new FormData(form);
var oOutput = document.getElementById("static_file_response")
var oReq = new XMLHttpRequest();
oReq.open("POST", "upload_static_file", true);
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
oOutput.innerHTML = "Uploaded!";
console.log(oReq.response)
} else {
oOutput.innerHTML = "Error occurred when trying to upload your file.<br \/>";
}
};
oOutput.innerHTML = "Sending file!";
console.log("Sending file!")
oReq.send(formData);
}
在上面的HTML中，我使用表单捕获文件，并在单击按钮时调用JS函数。在JS函数中，我使用XMLHttpRequest发送文件。
可以在here上找到详细的分步文档。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51035478
复制相关文章
相似问题
腾讯云开发者
