atitit.ajax上传文件的实现原理 与设计
atitit.ajax上传文件的实现原理与设计 1.上传文件的三大难题 1 1.1.本地预览 1 1.2.无刷新 1 1.3.进度显示 1 2.传统的html4+ajax是无法直接实现上传文件 1 2.1.传统的实现方式iframe 2 2.2.html5转码base64 3 2.3.其他插件FLASH的实现原理 3 3.上传进度的实现原理 3 3.1.使用ajax结合服务端的进度返回,比较麻烦 4 4.本地预览的解决 4 4.1.用HTML5上传文件 4 5.可以采用HTML5,用jQuery,Ajax实现文件上传,不仅如此,你可以做文件验证(名称,大小,MIME类型)或利用HTML5的进度标签(或者div)处理进度事件。 5 5.1.上传框架插件 7 6.参考 7 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"方法。
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个新特性: §支持上传、下载字节流,比如文件、blob以及表单数据 增加了上传、下载中的进度事件 跨域请求的支持 允许发送匿名请求(即不发送HTTP的Referer部分) 允许设置请求的超时 在这篇教程中,我们主要关注第一和第二项特性,尤其是第二项——它能够提供我们想要的上传进度。和之前的方案不同,这个方案并不要求服务器作出特殊的设置,因此大家边看教程就可以边动手试试了。 上面图示的就是我们能够实现的内容: 显示上传的文件信息,比如文件名、类型、尺寸 一个能够显示真实进度的进度条 上传的速度 剩余时间的估算 已上传的数据量 上传结束后服务器返回的响应
5.可以采用HTML5,用jQuery,Ajax实现文件上传,不仅如此,你可以做文件验证(名称,大小,MIME类型)或利用HTML5的进度标签(或者div)处理进度事件。HTML5解决了以往网页编写的一个难题:带有上传进度的文件上传。 最近我也在做文件上传,我不想用flash、iframe或其它插件,经过一番研究,我想出了解决方案。 HTML:
首先,你可以做一些验证,例如文件的onChange事件: 5 6 7 |
$(':file').change(function(){ varfile=this.files[0]; name=file.name; size=file.size; type=file.type; //yourvalidation }); |
按钮点击触发Ajax:
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(':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
});
});
处理进度:
5
functionprogressHandlingFunction(e){
if(e.lengthComputable){
$('progress').attr({value:e.loaded,max:e.total});
}
}
HTML5的文件上传非常简单,但必须在支持HTML5的浏览器中运行。
5.1.上传框架插件
jquery.form.js"。
6.参考
Ajax+JSP实现异步文件上传-Sean'sBlog的日志-网易博客.htm
jQuery异步上传文件-jQuery学习-程序员博客.htm
Jqueryajaxsubmit上传图片实现代码_jquery_编程之家.htm
(iframe方式)ajax无刷新上传图片-zhangchun-博客园.htm
HTML5应用之文件上传-小米哥的专栏-博客频道-CSDN.NET.htm
HTML5应用之文件上传-小米哥的专栏-博客频道-CSDN.NET.htm
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!