5.可以采用HTML5，用jQuery,Ajax实现文件上传，不仅如此，你可以做文件验证（名称，大小，MIME类型）或利用HTML5的进度标签（或者div）处理进度事件。 5
1.上传文件的三大难题
1.1.本地预览
1.2.无刷新
1.3.进度显示
2.传统的html4+ajax是无法直接实现上传文件
.ajax与后台通信都是通过传递字符串
因为从浏览器安全角度考虑,新浏览器基本上都禁止了通过JS在客户端直接读写/显示客户端的文件.
而且有些浏览器只能得到文件名,而不允许得到完整的文件路径.
作者::老哇的爪子Attilax艾龙，EMAIL:1466519819@qq.com
转载请注明来源：http://blog.csdn.net/attilax
本来Ajax是不支持上传文件的，但是可以通过IFrame技术模拟实现，异步提交，原理实际上就是利用了一个隐藏的Iframe子窗体，把提交的表单的target指向这个隐藏的窗体，在提交时，浏览器的头部还会出现加载信息，但是页面却没有任何刷新，勉强实现了Ajax的异步上传。
插件的原理就是构建一个form,然后用POST的方式提交整个Form。在后台中，通过传递来的Form，得到HttpPostedFile，在获取其中的图片信息，这样就实现后台上传图片了。
2.1.传统的实现方式iframe
而本文实现的文件上传也是无页面刷新的，可以说是一种"类似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上传,功能核心都不是ajax1.通过一个iframe,由ajax(不如说是js)来控制.核心是iframe中的Form2.通过专门的组件,譬如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对象被重新定义，被称为“XMLHttpRequestLevel2”，其中包含了以下5个新特性：
跨域请求的支持
允许发送匿名请求（即不发送HTTP的Referer部分）
允许设置请求的超时
在这篇教程中，我们主要关注第一和第二项特性，尤其是第二项——它能够提供我们想要的上传进度。和之前的方案不同，这个方案并不要求服务器作出特殊的设置，因此大家边看教程就可以边动手试试了。
上面图示的就是我们能够实现的内容：
一个能够显示真实进度的进度条
上传的速度
剩余时间的估算
已上传的数据量
上传结束后服务器返回的响应
5.可以采用HTML5，用jQuery,Ajax实现文件上传，不仅如此，你可以做文件验证（名称，大小，MIME类型）或利用HTML5的进度标签（或者div）处理进度事件。
HTML5解决了以往网页编写的一个难题：带有上传进度的文件上传。
最近我也在做文件上传，我不想用flash、iframe或其它插件，经过一番研究，我想出了解决方案。
HTML:
| 1 2 3 4 5 |
<formenctype="multipart/form-data"> <inputname="file"type="file"/> <inputtype="button"value="Upload"/> </form> <progress></progress> |
$(':file').change(function(){ varfile=this.files[0]; name=file.name; size=file.size; type=file.type; //yourvalidation }); |
@H_480_403@
$(':button').click(function(){ varformData=newFormData($('form')[0]); $.ajax({ url:'upload.PHP',//serverscripttoprocessdata type:'POST', xhr:function(){//customxhr myXhr=$.ajaxSettings.xhr(); if(myXhr.upload){//checkifuploadpropertyexists myXhr.upload.addEventListener('progress',progressHandlingFunction,153)">false);//forhandlingtheprogressoftheupload } returnmyXhr; }, //Ajax事件 beforeSend:beforeSendHandler, success:completeHandler, error:errorHandler,0)">//Form数据 data:formData,0)">//OptionstotellJQuerynottoprocessdataorworryaboutcontent-type cache:false, contentType:false }); }); |
@H_480_403@
functionprogressHandlingFunction(e){ if(e.lengthComputable){ $('progress').attr({value:e.loaded,max:e.total}); } } |
@H_480_403@
