FormData 异步上传文件

idisfkj 发布于2019-08-20 14:12 / 1480人阅读

摘要：一创建放入待上传文件准备对象将文件放入对象中二通过发送数据到服务器，实现文件上传创建对象监听文件上传进度文件长度是否可计算已下载的字节数文件总字节数监听文件传输开始终止上传监听成功完成事件监听错误事件监听被中止事件监听传输结束事件不管成功或

DOM

一、创建FormData放入待上传文件

//准备FormData对象
var formData = new FormData(),
    uploadFile = document.getElementById("file");
    
//将文件放入FormData对象中    
formData.append("file", uploadFile.files[0]);

二、通过xhr发送FormData数据到服务器，实现文件上传

//创建xhr对象
var xhr = new XMLHttpRequest();

//监听文件上传进度
xhr.upload.onprogress = function(evt){
    //lengthComputabel: 文件长度是否可计算
    if(evt.lengthComputable){
        //evt.loaded: 已下载的字节数
        //evt.total: 文件总字节数
        var percent = Math.round(evt.loaded*100/evt.total);
        console.log(percent);
    }
}

//监听文件传输开始    
xhr.onloadstart = function(evt）{
        xhr.abort() //终止上传
}

//监听ajax成功完成事件
xhr.onload = function(evt){
    ...
}

//监听ajax错误事件    
xhr.onerror = function(evt){
    ...
}

//监听ajax被中止事件
xhr.onabort = function(evt){
    ...
}

//监听传输结束事件: 不管成功或者失败都会触发
xhr.onloaded = function(evt){
    ...
}   
   
//*发起ajax请求数据
xhr.open("POST", "/url", true);
xhr.send(formData);

来源 http://www.jikexueyuan.com/co...

专线服务服务器托管 formdata上传文件异步文件上传 Java异步上传文件文件异步上传文件到云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81450.html

H5拖放+FormData接口+NodeJS，完整异步文件上传（一）

摘要：前段时间面试过程中，频繁遇到异步文件上传的相关问题。所以，这会是一个拖放接口实现文件异步上传的完整。监听放置元素的事件，通过对象可以获得拖拽事件的状态及数据。后端文件接收保存后端使用实现文件上传。前段时间面试过程中，频繁遇到H5异步文件上传的相关问题。还遇到过一个通过H5拖放功能实现文件异步上传的问题，大概知道H5有新增拖拽功能可以接收文件，如何异步上传文件就母鸡了(摊手)。面试...

NervosNetwork 2019-08-22 15:57 评论0 收藏0
H5拖放+FormData接口+NodeJS，完整异步文件上传（一）

摘要：前段时间面试过程中，频繁遇到异步文件上传的相关问题。所以，这会是一个拖放接口实现文件异步上传的完整。监听放置元素的事件，通过对象可以获得拖拽事件的状态及数据。后端文件接收保存后端使用实现文件上传。前段时间面试过程中，频繁遇到H5异步文件上传的相关问题。还遇到过一个通过H5拖放功能实现文件异步上传的问题，大概知道H5有新增拖拽功能可以接收文件，如何异步上传文件就母鸡了(摊手)。面试...

wenshi11019 2019-08-05 13:25 评论0 收藏0
antd 和 element上传文件详解与FormData详解

摘要：当用户完成选择文件动作时，提交子页面中的。从此我们上传文件就欢欣鼓舞的来找了。因为的核心是对象，异步的实现是通过一个对象，一般简称该对象对。这些回答基于自己理解，如有不妥，希望路过的大神轻喷，指正。背景平时工作中经常会遇到需要上传文件的情况，如果你用ant design 或者element ,它们都提供了上传的组件。我们分别来看一下element 和 antd 手动上传怎么处理：...

Fundebug 2019-08-23 10:29 评论0 收藏0
web端文件上传功能的思考

摘要：概述文件上传是一个很常见的需求，实现文件上传的技术也很多。帮助文档模拟无刷新的文件上传功能页面无刷新上传文件模拟，超简单为什么上传文件的表单里要加个属性接口对象的介绍使用对象涉及文章侵权，请邮件告知。概述文件上传是一个很常见的需求，实现文件上传的技术也很多。下面就谈谈一些常见的上传技术以及它们的优劣。传统表单上传传统表单文件上传估计是运用最广泛和最简单的技术了，说它简单是...

Jaden 2019-08-21 12:35 评论0 收藏0
node.js实现formdata上传文件

摘要：对象包含表单的文本域信息，或对象包含对象表单上传的文件信息。是文件的信息前端传递的文件类型在中获取将具有文本域数据，如果存在的话。 node.js实现formdata上传文件 1.关于formdata XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，...

Aceyclee 2019-08-22 13:56 评论0 收藏0