atitit.ajax上传文件的实现原理与设计

而本文实现的文件上传也是无页面刷新的，可以说是一种"类似AJAX"方法。
开始之前先说两句无关的，其实在ajax出现之前，web应用也可以是无刷新的，那时大多通过IFrame来做到这一点。当然Ajax出现之后，人们一窝蜂地投奔Ajax 的阵营了，iFrame 就乏人问津了。但是用iFrame来实现无刷新上传文件确实一个很好的选择。ps：Ajax技术基本上可以说是由google公司带起来的，但少Gmail中上传文件用的还是 IFrame，所以说使用IFrame来上传文件是最好的选择。
我在这里这里用的技术是jsp，其实asp，php等也是一

2.2. html5转码base64

来上传

2.3. 其他插件FLASH的实现原理

现在所谓比较成熟的 ajax上传,功能核心都不是ajax
1.通过一个iframe,由ajax(不如说是js)来控制.核心是iframe中的Form
2.通过专门的组件,譬如uploadify,其核心其实是flash.只不过做成了Jquery插件.其实有专门的FLASH上传组件,如swfupload,其js代码都是自带的.

1.iframe原理简单,兼容性强,自己写JS+iframe也能轻易实现无刷新上传
2.基于flash的,现在是风潮,而且有实时进度条显示.但客户端浏览器必须安装flash插件(虽说大多数浏览器都已安装了),而且flash版本升级时,有可能导致上传功能失败.记得flash由9.x升级到10.x时就出现了这种问题. 另外,在firefox下,基于flash的上传,如果在后台需要读取用户的session/cookie时,基本上会出错,这是flash与firefox之间的一个目前都未解决的bug.

3. 上传进度的实现原理

长期以来，开发者们一直为此苦恼，大部分为解决这个问题都采用了flash作为解决方案，但flash并非灵丹妙药，因为flash版本，割据造成的问题有时反倒成为了噩梦。有些网站则采用了form标签的enctype=multipart/form-data属性，但这一属性要求服务器作出特殊的设置才能够显示进度，而且本身也比较复杂，复杂就意味着容易出现错误，这可不是我们想要的。

3.1. 使用ajax结合服务端的进度返回，比较麻烦

js不能直接计算进度。。

4. 本地预览的解决

html4,有些服务器可以通过js获取到文件全路径，可以实现本地预览，否则，要通过plulgin方式。。

，我们将使用 HTML5 的 FileReader 实现在浏览器上的文件预览

4.1. 用HTML5上传文件

在HTML5标准中，XMLHttpRequest对象被重新定义，被称为“XMLHttpRequest Level 2”，其中包含了以下5个新特性：

§ 支持上传、下载字节流，比如文件、blob以及表单数据

§ 增加了上传、下载中的进度事件

§ 跨域请求的支持

§ 允许发送匿名请求（即不发送HTTP的Referer部分）

§ 允许设置请求的超时

在这篇教程中，我们主要关注第一和第二项特性，尤其是第二项——它能够提供我们想要的上传进度。和之前的方案不同，这个方案并不要求服务器作出特殊的设置，因此大家边看教程就可以边动手试试了。

上面图示的就是我们能够实现的内容：

§ 显示上传的文件信息，比如文件名、类型、尺寸

§ 一个能够显示真实进度的进度条

§ 上传的速度

§ 剩余时间的估算

§ 已上传的数据量

§ 上传结束后服务器返回的响应

5. 可以采用HTML5，用jQuery,Ajax实现文件上传，不仅如此，你可以做文件验证（名称，大小，MIME类型）或利用HTML5的进度标签（或者div）处理进度事件。

HTML5解决了以往网页编写的一个难题：带有上传进度的文件上传。

最近我也在做文件上传，我不想用flash、iframe或其它插件，经过一番研究，我想出了解决方案。

HTML:

</form>

首先，你可以做一些验证，例如文件的onChange事件：

$(':file').change(function(){

var file = this.files[0];

name = file.name;

size = file.size;

type = file.type;

//your validation

});

按钮点击触发Ajax:

$(':button').click(function(){

var formData = new FormData($('form')[0]);

$.ajax({

url: 'upload.php', //server script to process data

type: 'POST',

xhr: function() { // custom xhr

myXhr = $.ajaxSettings.xhr();

if(myXhr.upload){ // check if upload property exists

myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload

}

return myXhr;

//Ajax事件

beforeSend: beforeSendHandler,

success: completeHandler,

error: errorHandler,

// Form数据

data: formData,

//Options to tell JQuery not to process data or worry about content-type

cache: false,

contentType: false,

processData: false

});

处理进度：

function progressHandlingFunction(e){

if(e.lengthComputable){

$('progress').attr({value:e.loaded,max:e.total});

}

HTML5的文件上传非常简单，但必须在支持HTML5的浏览器中运行。

5.1. 上传框架插件

jquery.form.js" 。

6. 参考

Ajax + JSP实现异步文件上传 - Sean's Blog的日志 - 网易博客.htm

jQuery异步上传文件 - jQuery学习 - 程序员博客.htm

Jquery ajaxsubmit上传图片实现代码_jquery_脚本之家.htm

（iframe方式）ajax无刷新上传图片 - zhangchun - 博客园.htm

HTML5应用之文件上传 - 小米哥的专栏 - 博客频道 - CSDN.NET.htm

atitit.ajax上传文件的实现原理 与设计

1. 上传文件的三大难题

1.1. 本地预览

1.2. 无刷新

1.3. 进度显示

2. 传统的html4 + ajax 是无法直接实现上传文件

2.1. 传统的实现方式iframe