你的位置:首页 > Java教程

[Java教程]原生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 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。。。求大神指点。