摘要：利用对象，我们可以通过用一些键值对来模拟一系列表单控件，我们还可以使用的方法来异步的提交这个表单。比起普通的，使用的最大优点就是我们可以异步上传一个二进制文件图片压缩文件等。
XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象，我们可以通过js用一些键值对来模拟一系列表单控件，我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单"。比起普通的ajax，使用FormData的最大优点就是我们可以异步上传一个二进制文件(图片、压缩文件等)。
上传文件例子 原生写法html
jsfunction sendForm(){
var fr = document.getElementById("form1")
var fd = new FormData(fr);//使用HTML表单来初始化一个FormData对象
fd.append("file", document.getElementById("file").files[0]);
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
console.log(fd)
xhr.open("POST", "/session/sendImg?subID=3&subsID=2&ssID=163");
xhr.send(fd);
}
//+ uploadComplete 上传结束函数
//+ uploadFailed 上传错误函数
//+ uploadCanceled 终止函数
JSLite 方法
使用JSLite来发送FormData，但必须要正确的设置相关选项(jQuery是一样的玩儿)
jsfunction sendForm(){
var fd = new FormData();
fd.append("file",$("#file")[0].files[0]);
fd.append("name",$("#name").val());
$.ajax({
type:"POST",
dataType:"text",
processData: false, // 告诉JSLite不要去处理发送的数据
contentType: false, // 告诉JSLite不要去设置Content-Type请求头
data:fd,
url:"/session/sendImg?subID=3&subsID=2&ssID=163",
success:function(data){
console.log("success:",data)
},
error:function(d){
console.log("error:",d)
}
})
}
append()
浏览器兼容性给当前FormData对象添加一个键/值对
void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);
MDN 参考地址
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 7+ | 4.0 (2.0) | 10+ | 12+ | 5+ |
| 支持filename参数 (Yes) | 22.0 | (22.0) | ? | ? | ? |
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85524.html
摘要：转载大牛的分析，这将是的方向。域名分析据统计，目前全世界的网站使用它。的市场份额不断下降，以为基础的标准语法，正得到越来越广泛的支持。下面就探讨如何用标准语法，取代的一些主要功能，做到。 转载大牛的分析，这将是JSLite的方向。前人栽树后人乘凉，jQuery为我们制定了一套接口标准，我们继续为此努力。域名：JSLite.io jQuery 分析 据统计，目前全世界57.3%...
摘要：极大地简化了编程。与有着类似的，通用库只有，手机上每一都是钱。可以通过下面的标记把添加到网页中请注意，标签应该位于页面的部分。 简介 JSLite 是一个 JavaScript 库。 JSLite 极大地简化了 JavaScript 编程。 JSLite 只针对先进浏览器支持(HTML5,CSS3)移动端浏览器编写。 JSLite 使用js新方法实现j...
摘要：与有着绝大部分类似的，通用库只有，手机上每一都是钱。目前及的最新版已经支持。在这个函数中，原来的对象是无效的。与方法相同，接受一个标准格式的字符串，并返回解析后的对象。这有点像，但是是相反的方式。 [JSLite.io] showImg(https://img.shields.io/github/issues/JSLite/JSLite.svg); showImg(https://im...
摘要：当用户完成选择文件动作时，提交子页面中的。从此我们上传文件就欢欣鼓舞的来找了。因为的核心是对象，异步的实现是通过一个对象，一般简称该对象对。这些回答基于自己理解，如有不妥，希望路过的大神轻喷，指正。 背景 平时工作中经常会遇到需要上传文件的情况，如果你用ant design 或者element ,它们都提供了上传的组件。 我们分别来看一下element 和 antd 手动上传怎么处理：...
阅读 667·2021-09-09 09:32
阅读 2531·2021-09-02 10:20
阅读 2408·2021-07-23 11:24
阅读 648·2019-08-30 15:54
阅读 3420·2019-08-30 15:54
阅读 1220·2019-08-30 11:02
阅读 2655·2019-08-26 17:40
阅读 952·2019-08-26 13:55
