摘自: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的异步上传原理的更多相关文章

  1. HTML5 FormData 模拟表单控件 支持异步上传二进制文件 移动端

    FormData是XMLHttpRequest Level 2添加的一个新的接口,利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,还可以使用XMLHttpR ...

  2. (H5)FormData+AJAX+SpringMVC跨域异步上传文件

    最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...

  3. HTML5 jQuery+FormData 异步上传文件,带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...

  4. jquery运用FormData结合Ajax异步上传表单,超实用

    首先创建一个formData,其中参数,就是你的form表单,jquery要加0,也可以用document.querySelector("form")得到 var formData ...

  5. 使用FormData实现ajax文件异步上传

    1.传统的web开发文件上传一般是基于form表单的文件上传,同步的方式,用户体验差,可控性也差 2.异步上传的实现 有以下方式 2.1 借助浏览器插件 一般需要安装一些类似flash的插件  这种方 ...

  6. Jquery FormData文件异步上传 快速指南

    网站中文件的异步上传是个比较麻烦的问题,不过现在通过jquery 可以很容易的解决这个问题: 使用jquery2.1版本,较老版本不支持异步文件上传功能: 表单代码: <form id=&quo ...

  7. 适用于各浏览器支持图片预览,无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  8. ASP.NET WebAPi(selfhost)之文件同步或异步上传

    前言 前面我们讲过利用AngularJs上传到WebAPi中进行处理,同时我们在MVC系列中讲过文件上传,本文结合MVC+WebAPi来进行文件的同步或者异步上传,顺便回顾下css和js,MVC作为客 ...

  9. jQuery插件之ajaxFileUpload异步上传

    介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...

随机推荐

  1. 生产环境Docker部署ELK跨区访问kafka不通问题的解决

    由于分布式系统的日志集中采集的需求非常强烈,我们组通过调研和实践搭建了一套基于Docker的日志收集系统Amethyst. 我们首先在测试环境搭建了一套基于Docker swarm集群的ELK分布式环 ...

  2. sql (9) COUNT

    COUNT() 函数返回匹配指定条件的行数.语法SQL COUNT(column_name) 语法COUNT(column_name) 函数返回指定列的值的数目(NULL 不计入):新建表 Stude ...

  3. windows下mysql8.0.x简单安装!

    1.官网下载mysql安装包并解压到自己喜欢的目录 2.在解压的目录下,添加my.ini配置文件,内容如下:[mysqld]# 设置3306端口port=3306# 设置mysql的安装目录 下面是我 ...

  4. c# 给文件/文件夹 管理用户权限

    public class PermissionManager { /// <summary> /// 为文件添加users,everyone用户组的完全控制权限 /// </summ ...

  5. MFC文档视图结构学习笔记

    文档/视图概述 为了统一和简化数据处理方法,Microsoft公司在MFC中提出了文档/视图结构的概念,其产品Word就是典型的文档/视图结构应用程序 MFC通过其文档类和视图类提供了大量有关数据处理 ...

  6. LUOGU P4253 [SCOI2015]小凸玩密室(树形dp)

    传送门 解题思路 玄学树形\(dp\),题目描述极其混乱...看错了两次题,设首先根据每次必须点完子树里的灯才能点别的,那么点灯情况只有两种,第一种是点到某一个祖先,第二种是点到某一个祖先的兄弟.所以 ...

  7. JLOI 2013 卡牌游戏 bzoj3191

    题目描述 N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字为X,则庄家首先把 ...

  8. C#winfrom listview 设置显示图片

    ListView控件有5种显示图片方式:LargeIcon(大图标),Detail(详细),SmallIcon(小图标),List(列表),Tile,常用前4种.  这里说一下设置方式:LargeIc ...

  9. 第二十二篇:Spring简单定时任务

    背景:有些操作,不适合放在页面上让用户手动触发去执行,比如一些需要不断更新的数据(如统计数据)有些需要同步的数据,不需要非常实时,可以在固定的时间或者固定的频率执行同步 第一步:配置xml第二步:编写 ...

  10. PowerDesigner导出所有表到Excel(同一表格)

    '****************************************************************************** '* File: pdm2excel.v ...