小技术之异步上传文件

　　最近公司任务多，MVC 和 C#系列都没更新，不过折腾了下异步上传，其实挺简单的，不过以前没做过，打算记录下来方便以后用到，同时分享给需要的朋友，中间也遇到一些疑难杂症，所以也浪费了点时间。我先把现实的代码给出来，在后面会提出一个问题，希望各位能帮瓶子解决下。

　　

　　为了照顾一些新人，我一步一步的把实现过程说出来：

　　下面这里有段HTML，我没有用html.hepler，其实做法差不多：

<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>

View Code

　　这里有两个注意点form的属性设置，第一，要是Post方式的提交，第二，enctype属性设置为multipart/form-data；缺少一个都会导致后台Request.Files不到文件。

　　接下来就是后台处理：

 //首页

        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;

        }

View Code

　　

　　首先，要对Request.Files做一些判断进行对应提示，接着就是通过虚拟路径转成服务器是上物理路径，也就是文件的保存路径，最后SaveAs那个路径就可以了。其实整个处理的大概分三步吧。第一步。Request.Files，第二步Server.MapPath拿到路径，第三步SaveAs就就可以了。这里有两个地方要注意，第一，保证你的路径存在的，如果没有就创建一个用 Directory.CreateDirectory(path)，不然会报错。第二，路径名也需要保存文件的文件名，不然也会报错。

　　到这里就可以实现一个同步的上传了，为了用户体验更好，我们加入jq实现异步：

　　

<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>

View Code

　　

　　记得在前面引用js文件：

<script src="../../Scripts/jquery-1.7.1.js"></script>

<script src="../../Scripts/jquery.form.js"></script>

　　这样一个简单的异步提交就实现了，在后台处理的时候，还获取了上传文件的虚拟路径，在返回到页面的时候用a标签显示出来，保存进数据库的时候直接$("a").attr('href')就可以拿到路径了，最好加上域名。

　　写到这里也差不多了。这个是我做的demo，点击下载。有什么问题，欢迎在评论提出来。另外，我这用的是ASPX视图的，如果用CSHTML（RAZOR）来做这个例子，注意模板的已经引用jquery-1.7.1.js文件，如果你在视图没有写 Layout = NULL，并且再引用一次JS文件就会引起对象不支持“ajaxSubmit”属性或方法 这个错误。