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

html-css08

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

}

}

})

首先,我们制作的这个进度条并没有后台数据作为支撑,所以是一个靠js实现的一个简单的页面。

我们首先需要新建一个html5的页面,其使用的progress元素实在html5时代才出现的。

我们在新建的页面中,输入一个段落标签,一个进度条,一个button按钮。

然后,我们需要设置一下进度条显示的进度。value代表从多少开始,max代表到多少结束。我们做的是百分比形式的,应该写成这样的。

这些做好之后,我们需要书写两个小的事件,实现原理大体上是鼠标单击下载按钮,开始下载变为正在下载百分之多少,等到达到我们预设的时间后显示下载完成。

我们之前已经给p标签和progress标签分别赋予了不同的id,我们需要获取到这两个元素,并将他们赋给两个变量。

我们还要将progress的初始值设为0,当鼠标单击的时候,我们以一定的时间为周期调用写好的事件。

函数写好之后,我们在浏览器中调试,点击下载按钮之后会在300ms内完成下载时间。