FormData兼容IE10 360及DWR的异步上传原理
摘自:https://github.com/henryluki/FormData/blob/master/formdata.js
if(!window.FormData) {
(function(self) {
var BOUNDARY, BlobPart, CRLF, FormData, StringPart, support;
if (self.FormData) {
return;
}
support = {
arrayBuffer : !!self.ArrayBuffer,
blob : !!self.FileReader && !!self.Blob && (function() {
try {
new Blob();
return true;
} catch (_error) {
return false;
}
})()
};
CRLF = "\r\n";
BOUNDARY = "--------FormData" + Math.random();
StringPart = (function() {
function StringPart(name, value) {
this.name = name;
this.value = value;
}
StringPart.prototype.convertToString = function() {
var lines;
lines = [];
return new Promise((function(_this) {
return function(resolve) {
lines.push("--" + BOUNDARY + CRLF);
lines.push("Content-Disposition: form-data; name=\""
+ _this.name + "\";" + CRLF + CRLF);
lines.push("" + _this.value + CRLF);
return resolve(lines.join(''));
};
})(this));
};
return StringPart;
})();
BlobPart = (function() {
function BlobPart(name, filename, souce) {
this.name = name;
this.filename = filename;
this.souce = souce;
}
BlobPart.prototype._readArrayBufferAsString = function(buff) {
var view;
view = new Uint8Array(buff);
return view.reduce(function(acc, b) {
acc.push(String.fromCharCode(b));
return acc;
}, new Array(view.length)).join('');
};
BlobPart.prototype._readBlobAsArrayBuffer = function() {
return new Promise((function(_this) {
return function(resolve) {
var reader;
reader = new FileReader();
reader.readAsArrayBuffer(_this.souce);
return reader.onload = function() {
return resolve(_this
._readArrayBufferAsString(reader.result));
};
};
})(this));
};
BlobPart.prototype._readBlobAsBinary = function() {
return new Promise((function(_this) {
return function(resolve) {
return resolve(_this.souce.getAsBinary());
};
})(this));
};
BlobPart.prototype.convertToString = function() {
var lines;
lines = [];
lines.push("--" + BOUNDARY + CRLF);
lines.push("Content-Disposition: form-data; name=\"" + this.name
+ "\"; filename=\"" + this.filename + "\"" + CRLF);
lines.push("Content-Type: " + this.souce.type + CRLF + CRLF);
if (support.blob && support.arrayBuffer) {
return this._readBlobAsArrayBuffer().then(function(strings) {
lines.push(strings + CRLF);
return lines.join('');
});
} else {
return this._readBlobAsBinary().then(function(strings) {
lines.push(strings + CRLF);
return lines.join('');
});
}
};
return BlobPart;
})();
FormData = (function() {
function FormData() {
this.polyfill = true;
this._parts = [];
this.boundary = BOUNDARY;
}
FormData.prototype._stringToTypedArray = function(string) {
var bytes;
bytes = Array.prototype.map.call(string, function(s) {
return s.charCodeAt(0);
});
return new Uint8Array(bytes);
};
FormData.prototype.append = function(key, value) {
var part;
part = null;
if (typeof value === "string") {
part = new StringPart(key, value);
} else if (value instanceof Blob) {
part = new BlobPart(key, value.name || "blob", value);
} else {
part = new StringPart(key, value);
}
if (part) {
this._parts.push(part);
}
return this;
};
FormData.prototype.toString = function() {
var parts;
parts = this._parts;
return Promise.all(this._parts.map(function(part) {
return part.convertToString();
})).then(function(lines) {
lines.push("--" + BOUNDARY + "--");
return lines.join('');
}).then(this._stringToTypedArray);
};
return FormData;
})();
return self.FormData = FormData;
})(typeof self !== 'undefined' ? self : this);
}
DWR异步上传的核心原理:
// 复制替身
var clone = value.cloneNode(true);
// 移除自身ID
value.removeAttribute("id", prop);
// 设置自身名称
value.setAttribute("name", prop);
// 隐藏自身
value.style.display = "none";
// 插入替身
value.parentNode.insertBefore(clone, value);
// 移除自身
value.parentNode.removeChild(value);
// 加进iframe里的form中
batch.form.appendChild(value);
FormData兼容IE10 360及DWR的异步上传原理的更多相关文章
- HTML5 FormData 模拟表单控件 支持异步上传二进制文件 移动端
FormData是XMLHttpRequest Level 2添加的一个新的接口,利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,还可以使用XMLHttpR ...
- (H5)FormData+AJAX+SpringMVC跨域异步上传文件
最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...
- HTML5 jQuery+FormData 异步上传文件,带进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...
- jquery运用FormData结合Ajax异步上传表单,超实用
首先创建一个formData,其中参数,就是你的form表单,jquery要加0,也可以用document.querySelector("form")得到 var formData ...
- 使用FormData实现ajax文件异步上传
1.传统的web开发文件上传一般是基于form表单的文件上传,同步的方式,用户体验差,可控性也差 2.异步上传的实现 有以下方式 2.1 借助浏览器插件 一般需要安装一些类似flash的插件 这种方 ...
- Jquery FormData文件异步上传 快速指南
网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题: 使用jquery2.1版本,较老版本不支持异步文件上传功能: 表单代码: <form id=&quo ...
- 适用于各浏览器支持图片预览,无刷新异步上传js插件
文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...
- ASP.NET WebAPi(selfhost)之文件同步或异步上传
前言 前面我们讲过利用AngularJs上传到WebAPi中进行处理,同时我们在MVC系列中讲过文件上传,本文结合MVC+WebAPi来进行文件的同步或者异步上传,顺便回顾下css和js,MVC作为客 ...
- jQuery插件之ajaxFileUpload异步上传
介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...
随机推荐
- Response案例1_重定向
import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.serv ...
- Codeforces Round #567 (Div. 2)自闭记
嘿嘿嘿,第一篇文章,感觉代码可以缩起来简直不要太爽 打个div2发挥都这么差... 平均一题fail一次,还调不出错,自闭了 又一次跳A开B,又一次B傻逼错误调不出来 罚时上天,E还傻逼了..本来这场 ...
- 跟我一起使用Vue.js + Docker 部署项目
本文学习自:https://juejin.im/post/5bee5ddde51d457b8a33938c 项目环境是在ubuntu下,记得要在root目录下,不然安装vue会报错 npm insta ...
- leetcode-23-合并K个有序链表*
题目描述: 方法一:分治 # Definition for singly-linked list. # class ListNode: # def __init__(self, x): # self. ...
- 0916CSP-S模拟测试赛后总结
40分-rank35. 不想找借口.实力不行. 赛时状态没出什么大问题.就是实力太弱了. 天皇又AK了.去问了一下,他说全是简单题…… 后来发现一些人用非正解AC了. 但是天皇题题正解题题首切啊. 还 ...
- 异或前缀和——cf1186C
很思维的题,b的1个数和c的1个数相差为偶数时,必定有偶数个不同 反之必定有奇数个不同 #include <iostream> #include <cstdlib> #incl ...
- dart中的typedef <函数别名>
typedef定义如下: typedef 给某一种特定的函数类型起了一个名字,可以认为是一个类型的别名.或者这样理解: 自己定义了一种数据类型,不过这种数据类型是函数类型,按照这种类型实例化后的对象, ...
- Sublime text2 + cygwin编译C++
1.安装cygwin2.安装sublime text23.将g++和gdb加入系统环境变量(windows系统)3.安装package control4.通过package control安装subl ...
- hive 总结四(优化)
本文参考:黑泽君相关博客 本文是我总结日常工作中遇到的坑,结合黑泽君相关博客,选取.补充了部分内容. 表的优化 小表join大表.大表join小表 将key相对分散,并且数据量小的表放在join的左边 ...
- day 50 MySQL数据备份与还原(mysqldump)
MySQL数据备份与还原(mysqldump) 一 mysqldump指令实现数据备份.mysql指令实现数据还原 经常有朋友问我,DBA到底是做什么的,百科上说:数据库管理员(Databas ...