文件上传(显示进度条、上传速度)

最新推荐文章于 2023-12-01 13:54:56 发布

此鱼非闲鱼也

最新推荐文章于 2023-12-01 13:54:56 发布

阅读量3.4k

点赞数 2

分类专栏： Ajax NodeJS 文章标签： node.js ajax js

本文链接：https://blog.csdn.net/m0_45315697/article/details/105252334

版权

本文介绍了如何使用XMLHttpRequest对象和FormData对象实现文件上传，并展示了如何在上传过程中显示进度条和上传速度。重点讲解了XMLHttpRequest的onreadystatechange属性、readyState和status状态码，以及何时选择POST请求。同时，给出了使用FormData对象上传文件并显示进度的代码示例。

摘要由CSDN通过智能技术生成

XMLHttpRequest对象

使用XMLHttpRequest对象实现数据交互。

//创建XMLHttpRequest对象
let xhr = new XMLHttpRequest(); //let来创建(ES6版本以上)

//为了应对所有的现代浏览器，检查浏览器是否支持 XMLHttpRequest 对象。
//如果支持，则创建XMLHttpRequest对象。如果不支持，则创建 ActiveXObject
var xmlhttp;
if (window.XMLHttpRequest){
   
// IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else{
   
  // IE5, IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

XMLHttpRequest对象有三个重要属性：
1、onreadystatechange
onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。
2、readyState：存有服务器响应的状态信息。从0到4的变化

0: 请求未初始化（代理被创建，但尚未调用 open方法）
1: 服务器连接已建立（open方法已经被调用）
2: 请求已接收（send方法已被调用，且头部和状态已经可获得）
3: 请求处理中（下载中，responseText 属性已经包含部分数据）
4: 请求已完成，且响应已就绪（下载操作已完成）

3、status：服务器响应状态码

200 ：OK
404 ：未找到页面

//当 readyState 等于 4 且状态为 200 时，表示响应已就绪。举例如下：
let xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
   
  if (xhr.readyState==4 && xhr.status==200){
   
    document.getElementById("myDiv").innerHTML=xhr.responseText;
   }
 }

向服务器发送请求，使用XMLHttpRequest对象的open()和send()方法

let xhr = new XMLHttpRequest();
/* open(method，url，async)方法：
   参数method:请求的类型get或者post
   参数url:文件在服务器上的位置
   参数async:true为异步或者false为同步
*/
xhr.open("get","/fileUpload",true);
// send()方法:将请求发送给服务器，如果send方法带参数，只能用于post请求
xhr.send();

post和get请求类型怎么选择？
get比post更简单也更快，并且在大部分情况下都能用。

GET：一般用于信息获取，使用 URL 传递参数，对所发送信息的数量也有限制，一般在2000 个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制
也就是说 Get 是通过地址栏来传值，而 Post 是通过提交表单来传值。
在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

FormData对象

使用FormData对象上传文件

 <input type="file" class="myfile">
 进度<progress max="100" value="0"></progress>
 <span class="persent">0%</span>
 速度 <span class="speed">0b/s</span>
 <button class="btn">上传文件</button>
 <button class="btn">取消文件</button>
 <div class