zoukankan      html  css  js  c++  java
  • 异步上传文件

    小技术之异步上传文件

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

      

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

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

     View Code

    <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不到文件。

      接下来就是后台处理:

     View Code

    //首页
    public ActionResult Index()
    {

    return View();
    }

    //上传文件事件
    [HttpPost]
    public ActionResult UpLoadFileEven()
    {
    var file = Request.Files;
    return UpLoadFile(file, @"~UploadfileDocument" + 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实现异步:

      

     View Code

    <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里看看,如果有解决的,可以在评论里告诉我,瓶子技术菜还望大家见谅。。

     

     

     
     
    分类: 小技术
  • 相关阅读:
    Asp.net 动态添加Meta标签
    【转】在SharePoint Server 2010中更改“我的网站”
    SPQuery DateTime 类型查询
    Asp.net Web Application 打开 SharePoint 2010 Site 错误 The Web application at could not be found
    How To Create SharePoint 2010 Site Collection In Its Own DB
    C# 文件打印
    面试题 java集合
    《深入理解Java虚拟机》(六)堆内存使用分析,垃圾收集器 GC 日志解读
    《深入理解Java虚拟机》(五)JVM调优
    《深入理解Java虚拟机》(四)虚拟机性能监控与故障处理工具
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3661557.html
Copyright © 2011-2022 走看看