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

Posted yangykaifa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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在client直接读写/显示client的文件.
并且有些浏览器仅仅能得到文件名称,而不同意得到 完整的文件路径.

 

 

作者:: 老哇的爪子 Attilax 艾龙。  EMAIL:[email protected]

转载请注明来源: 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的,如今是风潮,并且有实时进度条显示.但client浏览器必须安装flash插件(虽说大多数浏览器都已安装了),并且flash版本号升级时,有可能导致上传功能失败.记得flash由9.x升级到10.x时就出现了这样的问题. 另外,在firefox下,基于flash的上传,假设在后台须要读取用户的session/cookie时,基本上会出错,这是flash与firefox之间的一个眼下都未解决的bug.

 

3. 上传进度的实现原理

 

长期以来,开发人员们一直为此苦恼,大部分为解决问题都採用了flash作为解决方式。但flash并不是灵丹妙药。由于flash版本号,割据造成的问题有时反倒成为了噩梦。有些站点则採用了form标签的enctype=multipart/form-data属性。但这一属性要求server作出特殊的设置才可以显示运行进度。并且本身也比較复杂,复杂就意味着easy出现错误,这可不是我们想要的。

 

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

js不能直接计算进度。。

 

4. 本地预览的解决

html4,有些server能够通过js获取到文件全路径。能够实现本地预览。否则。要通过plulgin方式。。

,我们将使用 HTML5 的 FileReader 实如今浏览器上的文件预览

 

 

4.1. 用HTML5上传文件

在HTML5标准中,XMLHttpRequest对象被又一次定义,被称为“XMLHttpRequest Level 2”,当中包括了下面5个新特性:

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

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

§ 跨域请求的支持

§ 同意发送匿名请求(即不发送HTTP的Referer部分)

§ 同意设置请求的超时

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

上面图示的就是我们可以实现的内容:

§ 显示上传的文件信息,比方文件名称、类型、尺寸

§ 一个可以显示真实进度的进度条

§ 上传的速度

§ 剩余时间的估算

§ 已上传的数据量

§ 上传结束后server返回的响应

 

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

});

button点击触发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的文件上传很easy,但必须在支持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上传文件的实现原理 与设计的主要内容,如果未能解决你的问题,请参考以下文章

Hadoop之HDFS原理及文件上传下载源码分析(上)

大文件秒上传的原理是啥?

《Linux设计与实现》笔记——系统调用工作原理添加系统调用的过程

Android实战----基于Retrofit实现多图片/文件图文上传

Hadoop之HDFS原理及文件上传下载源码分析(下)

高级Java开发类QQ聊天工具的设计与实现(代码已上传)