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"方法。 开始之前先说两句无关的,其实在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:
1 2 3 4 5 |
<form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress></progress> |
首先,你可以做一些验证,例如文件的onChange事件:
1 2 3 4 5 6 7 |
$(':file').change(function(){ var file = this.files[0]; name = file.name; size = file.size; type = file.type; //your validation }); |
按钮点击触发Ajax:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(':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 }); }); |
处理进度:
1 2 3 4 5 |
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
HTML5应用之文件上传-小米哥的专栏-博客频道- CSDN.NET.htm
atitit.ajax上传文件的实现原理 与设计相关推荐
- jquery form插件(ajax)上传文件实现及原理
原理: jquery form插件ajax上传文件的原理, 1.浏览器实现了XMLHttpRequest level2规范的,则插件使用xhr直接提交文件.通常来说chrome.firefox都实现了 ...
- Ajax上传文件的cache、processdata、contentType属性以及FormData对象的总结
Ajax上传文件的cache.processdata.contentType属性以及FormData对象的总结 前言:在之前的Ajax一次性上传多张图片并实现预览的博客中提到,如果要用 Ajax 上传 ...
- ajax上传文件报错The current request is not a multipart request的解决办法
ajax上传文件报错The current request is not a multipart request的解决办法 主要报错语句为: The current request is not a ...
- flask ajax 上传 图片,flask jQuery ajax 上传文件
1.html 代码 注:1.html 部分主要是一个form表单,其中表单的enctype = "multipart/form-data" 必须要有. 2.由于我的页面背景颜色设置 ...
- 页面无刷新ajax上传文件--模拟iframe,超简单
前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...
- 上传html 0字节,HTML ajax 上传文件限制文件的类型和文件大小
html js function getFileType(filePath){ //获取文件的后缀名 var startIndex = filePath.lastIndexOf(".&quo ...
- ajax上传文件 获取失败,Ajax上传文件/照片时报错TypeError :Illegal invocation的解决方法...
本篇文章给大家带来的内容是关于Ajax上传文件/照片时报错TypeError :Illegal invocation的解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 问题 A ...
- php 通过ajax上传文件,php – 通过ajax上传文件
我使用2个文件index.js,upload.php尝试通过ajax上传文件(img),如果成功附加到div uploadfile_show. 但它不起作用,几乎没有问题,下面是我的代码有什么建议吗? ...
- Django框架 之 Form表单和Ajax上传文件
Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
- php+ajax上传文件
直接上源代码 html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" > ...
最新文章
- 绿盟科技发布OpenSSL高危漏洞技术分析与防护方案 G20成员国美国、中国、德国受影响较大...
- 前端:JS/27/HTML DOM简介和新特性,HTML DOM访问HTML元素的方法,元素对象的属性(标准属性),noscroll事件,实例:书讯快递
- centos7的网络配置
- 五大智能软硬件技术,赋予智慧健康无限可能
- 应用程序正在为首次使用计算机做准备
- ecshop源码分析-ecshop二次开发
- pyecharts对于经纬度_pyecharts绘制geo地图
- AUI素材网-网站模板源码下载
- 通过爬虫获取第五人格游戏信息整理并分析(一)
- idea重启端口占用问题
- 阿里云漏洞验证需要付费的解决方法
- BUG记录: Exception evaluating SpringEL expression
- 【GoLang】Map的遍历
- 配置python命令tab键自动补全
- NC15128 老子的全排列呢 dfs 全排列 (何以解忧,唯有暴搜)
- idea 解决 右边没有gradle 工具栏
- Win7中解决无法卸载/升级 VS2008、无法输入序列号的问题
- 打印机一直显示打印服务器错误,打印机老显示状态错误怎么办_打印机显示打印错误状态怎么弄-win7之家...
- matlab中将mat数据文件转成excel文件
- 苹果电脑能恢复数据吗?看完分析你就明白了!
热门文章
- Python开发环境配置 Vim + Ctags+ TagList
- Google code android开源项目(一)
- 微服务架构的链路追踪和故障快速排查zipkin(微服务治理)
- 用JFreeChart 来分析Cassandra/Oracle插入海量数据的性能
- 《高性能Linux服务器构建实战》——2.2节开始安装Varnish
- 构建LVS+Keepalived高可用群集
- 设计鲁棒性的方法:输入一个链表的头结点,逆序遍历打印该链表出来
- 求高人指点此分页存储过程怎么样?
- [转] PHP:自己动手制作伪原创程序
- springboot - 应用实践(1)认识springboot