小技术之异步上传文件
最近公司任务多,MVC 和 C#系列都没更新,不过折腾了下异步上传,其实挺简单的,不过以前没做过,打算记录下来方便以后用到,同时分享给需要的朋友,中间也遇到一些疑难杂症,所以也浪费了点时间。我先把现实的代码给出来,在后面会提出一个问题,希望各位能帮瓶子解决下。
为了照顾一些新人,我一步一步的把实现过程说出来:
下面这里有段HTML,我没有用html.hepler,其实做法差不多:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<form id="ulForm" method="post" action="/Home/UpLoadFileEvent" enctype="multipart/form-data">
<div id="updateDiv"></div>
<div>
<label>上传附件</label>
<input id="ul_File" name="ul_File" type="file" />
<input id="ul_submit" name="ul_submit" type="button" value="上传" />
</div>
</form>
这里有两个注意点form的属性设置,第一,要是Post方式的提交,第二,enctype属性设置为multipart/form-data;缺少一个都会导致后台Request.Files不到文件。
接下来就是后台处理:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//首页
public ActionResult Index()
{
return View();
}
//上传文件事件
[HttpPost]
public ActionResult UpLoadFileEven()
{
var file = Request.Files;
return UpLoadFile(file, @"~\Uploadfile\Document\" + DateTime.Now.ToString("yyyy-MM-dd"));
}
//上传文件
public JsonResult UpLoadFile(HttpFileCollectionBase file, string url)
{
try
{
if (file.Count <= 0)
{
//判断是否添加文件
return Json(new { result = "false", message = "请选择需要添加的文件" });
}
var newFile = file[0];
if (!(newFile != null && newFile.ContentLength >= 0))
{
//判断是否为空字节文件
return Json(new { result = "false", message = "请选择非空字节的文件" });
}
//设置文件保存在服务器上的路径
var path = Server.MapPath(url);
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
//拼接路径并且保存
path = Path.Combine(path, newFile.FileName);
newFile.SaveAs(path);
//转换正虚拟路径
string returnPath = urlToVirtual(path);
return Json(new { result = "true", message = "上传成功!", path = returnPath, fileName = newFile.FileName });
}
catch
{
return Json(new { result = "false", message = "上传失败!请联系管理员!" });
}
}
//物理转虚拟路径
private string urlToVirtual(string imagesurl1)
{
//其实这里的tmpRootDir也等于tmpRootDir=Server.MapPath("~/");
string tmpRootDir = Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath.ToString());//获取程序根目录
string imagesurl2 = imagesurl1.Replace(tmpRootDir, ""); //转换成相对路径
imagesurl2 = imagesurl2.Replace(@"\", @"/");
return imagesurl2;
}
首先,要对Request.Files做一些判断进行对应提示,接着就是通过虚拟路径转成服务器是上物理路径,也就是文件的保存路径,最后SaveAs那个路径就可以了。其实整个处理的大概分三步吧。第一步。Request.Files,第二步Server.MapPath拿到路径,第三步SaveAs就就可以了。这里有两个地方要注意,第一,保证你的路径存在的,如果没有就创建一个用 Directory.CreateDirectory(path),不然会报错。第二,路径名也需要保存文件的文件名,不然也会报错。
到这里就可以实现一个同步的上传了,为了用户体验更好,我们加入jq实现异步:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript">
$(document).ready(function () {
$("#ul_submit").click(function () {
$("#ulForm").ajaxSubmit(function (r) {
if (r.result == 'true') {
var updateDiv = $("#updateDiv");
if (updateDiv.html() != '')
updateDiv.append("<br />")
updateDiv.append("<a target='_blank' href='" + r.path + "'>" + r.fileName + "</a>")
}
alert(r.message);
});
})
})
</script>
记得在前面引用js文件:
<script src="../../Scripts/jquery-1.7.1.js"></script>
<script src="../../Scripts/jquery.form.js"></script>
这样一个简单的异步提交就实现了,在后台处理的时候,还获取了上传文件的虚拟路径,在返回到页面的时候用a标签显示出来,保存进数据库的时候直接$("a").attr('href')就可以拿到路径了,最好加上域名。
写到这里也差不多了。这个是我做的demo,点击下载。有什么问题,欢迎在评论提出来。另外,我问个问题,大家都看到我写demo是在aspx视图里,我把这段HTML和JS代码放到razor里就报 对象不支持“ajaxSubmit”属性或方法 这个错误,一般这个错误,就是缺少引用和引用顺序问题嘛。我看了看没什么不对劲,大家可以复制到Razor里看看,如果有解决的,可以在评论里告诉我,瓶子技术菜还望大家见谅。。