最近在做文件上传的功能，因为界面设计比较简单，就没有引用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; 100%"></progress> <br /> <!--div模拟进度条--> <div id="progressNumber" style=" 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。。。求大神指点。