html5 input上传

原创

mob64ca12ecf3b4 2024-01-17 10:59:52 ©著作权

文章标签 Data javascript 服务器 文章分类 HTML5 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12ecf3b4的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何实现HTML5 input上传

流程图：

flowchart TD
    A(开始)
    B(创建input标签)
    C(监听input的change事件)
    D(获取选择的文件)
    E(创建FormData对象)
    F(将文件添加到FormData中)
    G(创建XMLHttpRequest对象)
    H(设置请求方法和URL)
    I(发送请求)
    J(监听请求状态)
    K(处理服务器响应)
    L(结束)
    A --> B
    B --> C
    C --> D
    D --> E
    E --> F
    F --> G
    G --> H
    H --> I
    I --> J
    J --> K
    K --> L

步骤及代码示例：

创建一个input标签，设置type为file，用于选择文件。

<input type="file" id="myFile">

监听input的change事件，当文件选择发生变化时执行相应的操作。

document.getElementById('myFile').addEventListener('change', function(event) {
  // 执行操作
});

获取选择的文件。

var file = event.target.files[0];

创建FormData对象，用于将文件数据发送到服务器。

var formData = new FormData();

将文件添加到FormData中。

formData.append('file', file);

创建XMLHttpRequest对象，用于发送异步请求。

var xhr = new XMLHttpRequest();

设置请求方法和URL。

xhr.open('POST', '/upload', true);

发送请求。

xhr.send(formData);

监听请求状态，当请求状态改变时执行相应的操作。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 处理服务器响应
  }
};

处理服务器响应，可以将服务器返回的数据展示给用户。

console.log(xhr.responseText);

结束。

代码解释：

第1步：创建一个input标签，用户可以通过点击该标签选择文件。
第2步：监听input的change事件，当用户选择文件后执行相应的操作。
第3步：通过event.target.files获取用户选择的文件。
第4步：创建一个FormData对象，用于将文件数据发送给服务器。
第5步：通过FormData的append方法将文件添加到FormData中，参数'file'表示文件的字段名，可以根据实际情况修改。
第6步：创建一个XMLHttpRequest对象，用于发送异步请求。
第7步：使用open方法设置请求方法和URL，参数'POST'表示使用POST请求，'/upload'表示服务器接收文件的URL，可以根据实际情况修改。
第8步：使用send方法发送请求，参数为FormData对象。
第9步：监听XMLHttpRequest的onreadystatechange事件，当请求状态改变时执行相应的操作。readyState为4表示请求已完成，status为200表示请求成功。
第10步：处理服务器返回的数据，可以通过xhr.responseText获取服务器返回的文本。
第11步：结束。