HTML5多图片拖拽上传带进度条

浏览数：38 / 时间：2015年06月09日

前言

昨天利用css2的clip属性实现了网页进度条觉得还不错，但是很多情况下，我们在那些时候用进度条呢，一般网页加载的时候如果有需要可以用，那么问题就来了，怎么才算整个加载完毕呢，是页面主要模块加载完毕，还是window.onload之后算呢，对这些方面，我真不敢随意回答，因业务需求而定，本文想要说的是在图片上传的时候用到的进度条。

效果展示

详细参考请移步至html5demo

HTML5 新增的拖拽相关事件说明

1.ondragover

效果图演示是所看见的可以将文件不仅仅是图片拖拽到该div上边，只要鼠标接触到该div就会触发该事件，演示效果图表现为拖拽区边框变为淡绿色

2.ondragleave

鼠标拖拽文件离开时触发的事件，演示效果图表现为拖拽区边框为灰色

3.ondrop

鼠标在拖拽区按键松开，在此函数内触发读取文件，预览效果，上传服务器操作

HTML5 新增的读取文件api之FileReader/FormData

拖拽区鼠标按键松开，那么就会读取文件流，如果是图片就直接可以看见图片，否则就只显示文件名，用js怎么读取文件流呢，就要用到FileReader对象了，

该对象的很多属性事件比如onload，readAsDataURL，abort，onprogress等详情点击

比如图片上传之后的预览代码如下

var reader = new FileReader();
                reader.onload = function (event) {//文件加载完成之后从event对象的result取内容，不论成功失败都会将值放在result中的
                    var image = new Image();
                    image.src = event.target.result;
                    image.width = 250; // a fake resize
                    holder.appendChild(image);
                };
                reader.readAsDataURL(file); //表示将文件读取为一段以data:开头的字符串，就是Data URL,它是将小文件直接嵌入
                //文档的方案，如果你不写这句，那么就显示不出来因为文档中没有image.src的数据

通过这种方式文件就可以预览了，那么预览完了之后干啥呢，接着就post数据到服务器

那么问题就来了，怎么post数据呢，我这里又没有form表单，也没有iframe，此时就彻底一点都用HTML5的新特性

formData模拟表单数据然后用XMLHttpRequest提交同时可以利用XMLHttpRequest的upload.onprogress事件

实现进度条进度计算。

先上代码

function readfiles(files) {
            //debugger;
            var formData = tests.formdata ? new FormData() : null;
            for (var i = 0; i < files.length; i++) {
                if (tests.formdata) formData.append(‘file‘, files[i]);//添加表单元素
                previewfile(files[i]);
            }
            // now post a new XHR request
            if (tests.formdata) {
                var xhr = new XMLHttpRequest();
                if (tests.progress) {//上传进度事件
                    xhr.upload.onprogress = updateProgress;
                } else {
                    console.log("不支持 upload in new XMLHttpRequest");
                }
                xhr.open(‘POST‘, ‘WebForm1.aspx‘);//提交服务器处理程序
                xhr.onload = function () {//加载完成之后设置进度条值为100
                    progress.value = 100;
                    progress.innerHTML = 100 + "%";
                };
                xhr.send(formData);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // alert(xhr.responseText);
                    }
                };

                function updateProgress(event) {
                    //debugger;
                    if (event.lengthComputable) {
                        //event.loaded加载了多少字节  event.total总共多少字节
                        var complete = (event.loaded / event.total * 100 | 0);
                        console.log("complete->", complete);
                        progress.value = 100;
                        progress.innerHTML = 100 + "%";
                    }
                };
            }
        }

还是上后端WebForm1.aspx代码吧，后端处理请求代码

  protected void Page_Load(object sender, EventArgs e)
        {

            HttpFileCollection files = Request.Files;
            for (int i = 0; i < files.Count; i++)
            {
                string r = new Random().Next(0, 9).ToString();
                string filename = DateTime.Now.ToString("yyyyMMddhhmmsss") + r + 
                    files[i].FileName.Substring(files[i].FileName.LastIndexOf("."));
                string path = Server.MapPath("~/images/") + filename;
                files[i].SaveAs(path);
            }
            Response.Write("upload is completed!");
            //Thread.Sleep(1000);
            Response.End();
        }