首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用javascript上传文件?

如何使用javascript上传文件?
EN

Stack Overflow用户
提问于 2018-06-26 13:32:40
回答 3查看 29.6K关注 0票数 5

我想用js创建一个上传程序。有没有人能教我怎么用javascript上传文件?

EN

回答 3

Stack Overflow用户

发布于 2018-06-26 13:48:27

您可以像这样使用html5文件类型:

代码语言:javascript
复制
<input type="file" id="myFile">

你的文件将会有价值:

代码语言:javascript
复制
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/

票数 7
EN

Stack Overflow用户

发布于 2018-12-19 06:14:55

您可以使用XMLHttpRequestFormData上传文件。下面的示例展示了如何上传新选择的文件。

代码语言:javascript
复制
<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>
票数 5
EN

Stack Overflow用户

发布于 2021-05-27 00:27:59

HTML部件:

代码语言:javascript
复制
<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部件:

代码语言: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上找到详细的分步文档。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51035478

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档