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. ...
随机推荐
- USACO 2008 January Silver Telephone Lines /// 二分最短路 邻接表dijkstra oj22924
题目大意: 一共有N (1 ≤ N ≤ 1,000)个电线杆,有P P (1 ≤ P ≤ 10,000)对电线杆是可以连接的, 用几条线连接在一起的电线杆之间都可相互通信,现在想要使得电线杆1和电线杆 ...
- Servlet共享数据
共享数据: 1.域对象:有一个作用范围的对象,可以在范围内共享数据 2.request域:代表一次请求范围,一般用于请求转发的多个资源中共享数据 方法: 1.存储数据:setAttrbute(Stri ...
- IDEA与Tomcat的相关配置说明
1.IDEA会为每个Tomcat部署的项目单独建立一份配置文件 查看控制台的log输出:Using CATAINA_BASE 2.工作空间项目和Tomcat部署的web项目 WEB-INF:内的资源不 ...
- batch、随机、Mini-batch梯度下降
batch梯度下降: 对所有m个训练样本执行一次梯度下降,每一次迭代时间较长: Cost function 总是向减小的方向下降. 随机梯度下降: 对每一个训练样本执行一次梯度下降,但是丢失了向量化带 ...
- mysql 触发器实现级联删除有外键的多张表
2019-10-12 10:17:44 1.数据,建表时有可能会报错,只需要把前三行注释删掉就行 -- ---------------------------- -- Table structure ...
- kcptun搭建
wget --no-check-certificate https://github.com/kuoruan/shell-scripts/raw/master/kcptun/kcptun.sh sha ...
- Impala查询执行过程
- mysql连接超时的问题处理
1. 内网 ts 连接mysql 有时候会连接失败, 原因是 连接超时, 当时所有服务器一起启动,抢占资源,导致连接超过10s. 现在增加一次连接机会, 增加一些日志. 2. 并且对mysql 全局参 ...
- yii2中使用定义在 params.php文件中的配置
yii2 使用 配置文件中在 params 的配置, 可以用 Yii::$app->params['key1']形式访问 参考 yii can't access Yii::$app->pa ...
- mkdir: Cannot create directory /file. Name node is in safe mode.
刚刚在hadoop想创建一个目录的时候,发现报错了 具体信息如下: [hadoop@mini1 hadoop-2.6.4]$ hadoop fs -mkdir /file mkdir: Cannot ...