最近在做文件上传的功能，因为界面设计比较简单，就没有引用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。。。求大神指点。
时间： 2024-12-24 17:18:50