原生javascript使用FormData Api实现upload文件显示进度条上传

FormData 对象的使用

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

你可以自己创建一个FormData对象，然后调用它的append()方法来添加字段，像这样：

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); //数字123456会被立即转换成字符串 "123456"

// HTML 文件类型input，由用户选择
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

注意：字段 “userfile” 和 “webmasterfile” 都包含一个文件. 字段 “accountnum” 是数字类型，它将被FormData.append()方法转换成字符串类型(FormData 对象的字段类型可以是 Blob, File, 或者 string: 如果它的字段类型不是Blob也不是File，则会被转换成字符串类型。

上面的示例创建了一个FormData实例，包含”username”, “accountnum”, “userfile” 和 “webmasterfile”四个字段，然后使用XMLHttpRequest的send()方法发送表单数据。字段 “webmasterfile” 是 Blob类型。一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。你可以通过 Blob() 构造函数创建一个Blob对象。

来源：MDN

点击这里查看formData解释

最终效果如下：

这里写图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>upload文件上传</title>
  <style>
    .box{height:20px;width:200px;margin-top:20px;}
    #progress{background:red;height:20px;border:1px solid #ccc;width:0;}
  </style>
</head>
<body>
  <h2>请选择要上传的文件：</h2>
  <input type="file" id="file">
  <div class="box">
    <div id="progress"></div>
  </div>
  <h1 style="color:yellow;"></h1>
</body>
<script>
  function $(select){
    return document.querySelector(select);
  }
  $("#file").onchange = function(ev){
    let file = ev.target.files[0];  // 获取file对象
    let formData = new FormData();  // 新建formData对象
    formData.append('file', file);  // 将file添加到formData传到后端
    let xhr = new XMLHttpRequest(); // 新建ajax异步对象
    xhr.open('post', '/');  // 打开ajax
    // 监听ajax对象事件状态
    xhr.onreadystatechange = function (){
      if(xhr.readyState == 4 && xhr.status == 200){
        $('h1').innerText = '上传成功！';
      }
    }

    // 监听文件上传进度
    xhr.upload.onprogress = function (ev){
      if(ev.lengthComputable){
        console.log(1);
        let progress = ev.loaded/ev.total *100;
        $('#progress').style.width = progress + '%';
        $('#progress').innerText = progress + '%';
      }
    };

    xhr.send(formData); // 发送ajax请求将formData对象发送过去
  }

</script>
</html>

原生javascript使用FormData Api实现upload文件显示进度条上传

猜你喜欢