最近在做文件上傳的功能，因為界面設計比較簡單，就沒有引用jq，但是網上大部分的上傳插件都需要jq的支持。為了一個上傳功能引用90多k的jq文件有點太小題大做了，所以就自己動手寫了一個原生js上傳的demo。下麵是代碼： HTML代碼 伺服器端用的是.Net 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" 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。。。求大神指點。
