程式師世界 >> 編程語言 >> .NET網頁編程 >> C# >> C#基礎知識 >> c#+js上傳文件顯示進度條

c#+js上傳文件顯示進度條

編輯：C#基礎知識

最近在做文件上傳的功能，因為界面設計比較簡單，就沒有引用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" ></progress>
    <br />
    <!--div模擬進度條-->
    <div id="progressNumber" ></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。。。求大神指點。