小技术之异步上传文件

简介: 小技术之异步上传文件

 最近公司任务多,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>

  

这里有两个注意点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;
        }

  

  首先,要对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>

  

在前面引用js文件:


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


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


  

目录
相关文章
|
6月前
|
JSON 前端开发 JavaScript
前端上传文件前校验文件数据
该文介绍了如何在Vue项目中实现批量导入Excel数据的校验。使用Element UI的`el-upload`组件上传文件,通过FileReader读取内容,结合XLSX库解析Excel为JSON。解析过程包括将二进制数据转换为workbook对象,提取worksheet并转化为JSON。之后,遍历JSON数据进行字段校验,若发现空值则记录错误。提供的Demo展示了选择Excel文件后控制台显示校验结果。技术栈包括vue 2.6.14、element ui 2.15.14和xlsx 0.17.0。建议将此类功能封装为通用组件以复用。
105 2
前端上传文件前校验文件数据
|
7月前
|
前端开发
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
747 0
|
7月前
|
JSON 前端开发 JavaScript
前端上传文件前检测文件数据🔍
前端上传文件前检测文件数据🔍
128 0
|
前端开发 JavaScript PHP
在多文件上传中,如何处理文件大小限制?
在多文件上传中,如何处理文件大小限制?
126 0
|
存储 分布式计算 网络协议
文件上传下载系列——大文件分片上传
文件上传下载系列——大文件分片上传
|
JavaScript
FormData可以做些什么事,除了文件上传当然还有文件分片上传呀
FormData 是一个用于表单数据的键值对,可以通过 FormData 对象来模拟表单提交,也可以通过 FormData 对象来实现文件上传。
363 0
【异常】插件WebUploader 上传按钮没反应,按F12才会有反应的问题的解决方案
插件WebUploader 上传按钮没反应,按F12才会有反应的问题的解决方案
510 0
|
移动开发 监控 前端开发
基于SpringBoot和WebUploader实现大文件分块上传.断点续传.秒传
基于SpringBoot和WebUploader实现大文件分块上传.断点续传.秒传
1435 0
基于SpringBoot和WebUploader实现大文件分块上传.断点续传.秒传
|
前端开发 JavaScript
使用ajaxFileUpload实现文件异步上传
使用ajaxFileUpload实现文件异步上传
294 0
|
前端开发 NoSQL Redis