html5文件上传实现进度条需要后端吗

html-css045

html5文件上传实现进度条需要后端吗,第1张

不需要后端的,前端自己判断,代码如下:

function uploadFile(){

// 获取上传文件,放到 formData对象里面

var pic = $("#myhead").get(0).files[0]

var formData = new FormData()

formData.append("file" , pic)

$.ajax({

type: "POST",

url: "upload",

data: formData ,//这里上传的数据使用了formData 对象

processData : false,

//必须false才会自动加上正确的Content-Type

contentType : false ,

//这里我们先拿到jQuery产生的 XMLHttpRequest对象,为其增加 progress 事件绑定,然后再返回交给ajax使用

xhr: function(){

var xhr = $.ajaxSettings.xhr()

if(onprogress &&xhr.upload) {

xhr.upload.addEventListener("progress" , onprogress, false)

return xhr

}

}

})

后端的责任。

前端上传文件实时显示进度条和上传速度的工作原理就是后端的责任,在Django中实现需要重载上传文件的函数,在上传时文件是被分成数个MB的chunk处理的,每次都会调用这个上传函数。也就是说,每处理一个chunk就更新uploadedsize,然后浏览器端通过AJAX获取这个值和文件大小

最后用JavaScript渲染到页面上。

前端只能说会用框架和插件干活。前段时间用的百度的webuploader,demo就带进度条的。js代码不多可以看一下,猜测是监听事件。上传是前端和通信协议做的事,后端是写入。在比较传统流和和spring自带的transferto的耗时统称上传时间是不对的,应为写入时间。

项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用html5截图前段模块是bootstarp框架不废话直接来代码spring-mvc配置文件。

nginx话lua可以拿到链接的套接口,读取套接口就可以知道当前上传了多少了。可以看下openresty的lualib/resty/upload.lua。

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

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

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

3、跨域请求的支持。

4、允许发送匿名请求(即不发送HTTP的Referer部分)。

5、允许设置请求的超时。

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

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

1、显示上传的文件信息,比如文件名、类型、尺寸。

2、一个能够显示真实进度的进度条。

3、上传的速度。

4、剩余时间的估算。

5、已上传的数据量。

6、上传结束后服务器返回的响应。

另外,凭借XMLHttpRequest,我们的上传过程整个都是异步的,因此用户在上传文件的时候,依然可以操作网页当中的其它元素,并不需要专门等待上传的完成。而在上传结束后,我们能够获取服务器发回的响应,因此整个上传过程都显得相当顺理成章。