原生js上传文件 显示进度条

最近在做文件上传的功能，因为界面设计比较简单，就没有引用jq，但是网上大部分的上传插件都需要jq的支持。为了一个上传功能引用90多k的jq文件有点太小题大做了，所以就自己动手写了一个原生js上传的demo。下面是代码：

HTML代码

<html>
<head>
    <title></title>
</head>
<body>
    <input type="file" id="f" />
    <br />   
    <input type="button" value="up" onclick="up()" />
    <br />
    <!--进度条标签-->
    <progress value="0" max="100" id="progress" style="height: 20px; width: 100%"></progress>
    <br />
    <!--div模拟进度条-->
    <div id="progressNumber" style="width: 0%; height: 20px; background-color: Red"></div>
    <br />
    <div id="result"></div>
</body>
</html>
<script type="text/ecmascript">
    function up() {
        if (document.getElementById("f").value == "") {
            document.getElementById("result").innerHTML = "请选择文件";
        }
        else {
            var fileObj = document.getElementById("f").files[0];
            //创建xhr
            var xhr = new XMLHttpRequest();
            var url = "upFile.ashx";
            //FormData对象
            var fd = new FormData();
            fd.append("path", "D:\\");    //上传路径
            fd.append("file", fileObj); 
            fd.append("acttime",new Date().toString());    //本人喜欢在参数中添加时间戳，防止缓存（--、）
            xhr.open("POST", url, true);
            xhr.send(fd);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    document.getElementById("result").innerHTML = result;
                }
            }
            //进度条部分
            xhr.upload.onprogress = function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    document.getElementById('progress').value = percentComplete;
                    document.getElementById('progressNumber').style.width = percentComplete + "%";
                }
            };
        }
    }
</script>

 

服务器端用的是.Net

c#代码

using System;
using System.Web;

namespace upFile
{
    /// <summary>
    /// upFile 的摘要说明
    /// </summary>
    public class upFile : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string savePath = context.Request["path"];
            HttpPostedFile file = context.Request.Files[0];
            //文件扩展名
            string fileType = System.IO.Path.GetExtension(file.FileName);
            //存到文件服务器的文件名称 用当前时间命名
            string fileNewName = DateTime.Now.ToString("yyyyMMddHHmmss_fff") + fileType;
            try
            {
                file.SaveAs(savePath + fileNewName);
                context.Response.Write("上传成功！");
            }
            catch (Exception ex)
            {
                context.Response.Write("上传失败！错误信息：" + ex.Message.ToString());
            }
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

 

说明:

根据网上相关资料，据说支持H5的浏览器才FormDate对象，具体没有进行调试。

在上传比较小的文件时，progress标签显示效果没有div标签显示准确。

在调试过程中发现chrome浏览器不支持onprogress。。。求大神指点。

posted @ 2016-04-23 23:30  misaky  阅读(19192)  评论(3)  编辑  收藏  举报