摘自: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. JDBC_事务说明

    JDBC控制事务:1.事务:一个包含多个步骤的业务操作,如果这个业务操作被事务管理则多个步骤同时成功或同时失败2.操作: 1.开启事务 2.提交事务 3.回滚事务3.使用Connection对象来管理 ...

  2. anaconda新建环境

    安装tensorflow等如下: https://blog.csdn.net/Gransand/article/details/80713810 修改默认打开目录如下: https://blog.cs ...

  3. this 、typeof、false、parseInt()、this、arguments、Array和object判断

    typeof typeof (undefined) 不会报错 undefined object Number boolean function String 返回值为字符串类型 false .fals ...

  4. JAVA算法之简单排序

    冒泡排序: 在概念上是排序算法中最简单的,但是运行起来非常慢,冒泡排序遵循以下几个规则(假如我们现在要给一队打乱的足球队员排序): 比较两个队员 如果左边的队员比右边的高,则交换位置 向右移动一位,比 ...

  5. CSS3——动画

    动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果. 语法格式:  animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反 ...

  6. PHP正则使用技巧1

    $pattern="/<div class=\"cover g-playicon\">(.*?)>/s"; 意思为抓取<div clas ...

  7. php开发面试题---面试常用英语(你能介绍你自己吗?)

    php开发面试题---面试常用英语(你能介绍你自己吗?) 一.总结 一句话总结: Could you please describe yourself? 1.为什么觉得自己适合这份工作? Why do ...

  8. truncate和delete的区别

    TRUNCATE 命令用法 语法    TRUNCATE TABLE name 参数  name 是要截断的表的名称或要删除其全部行的表的名称. 注释 TRUNCATE TABLE 在功能上与不带 W ...

  9. python笔记三

    # 数据读写不一定是文件,也可以在内存中读写 # StringIO就是在内存中读写str from io import StringIO f = StringIO() # 要把str写入StringI ...

  10. 编译报错 :The method list(String, Object[]) is ambiguous for the type BaseHibernateDao<M,PK>

    原因:eclipse 的个bug,具体见http://stackoverflow.com/questions/10852923/method-is-ambiguous-for-the-type-but ...