你的位置:首页 > ASP.net教程

[ASP.net教程]MVC 上传文件并展示


   最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来。

   十年河东十年河西,莫欺少年穷

   学无止境,精益求精

   最近在做自学MVC,遇到的问题很多,索性一点点总结下。

   本篇旨在写一篇上传文件的博客,上传文件中以上传图片最多,所以本篇以上传图片为例进行说明:

   在进行讲解之前,先声明如下几点:

   1、本篇是结合Jquery进行图片上传,需要用到JQ库:jquery-1.7.2.js 和 jquery.MultiFile.js

   2、本篇用HTML5中FileReader进行图片的展示,无需上传就可以展示选择的图片,具体大家可自行查阅:HTML5+JQuery+FileReader

   3、本篇分为单文件上传及对文件上传

   效果图如下:

   

   

   

   以上是效果图

   下面分别以前端HTML和后端代码进行说明:

   前端JS如下:

   

    以上便是通过FileReader读取图片并展示的代码

   下面就HTML进行说明如下:

   

   Form必须加上Enctype类型、id="mainPicNum"的Input控件type为File,即:上传控件,accept="gif|jpg|jpeg|png|bmp|pic"为该上传控件接收的文件类型,maxlength="1"为允许上传的最大文件数,如上效果图中,商品配图和商品详情图MaxLength均大于1,如下所示:

   完整HTML代码如下:

@{  ViewBag.Title = "FileUpLoad";  }@section css{  <script type="text/javascript">

        <script src="~/Scripts/jquery-1.7.2.js"></script>
        <script src="~/Scripts/jquery.MultiFile.js"></script>

    $(function () {      var result = document.getElementById("result");      var input = document.getElementById("mainPicNum");      if (typeof FileReader === 'undefined') {        result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用火狐浏览器,或其他兼容浏览器!";        input.setAttribute('disabled', 'disabled');      }      $("#mainPicNum").MultiFile({        afterFileSelect: function (element, value, master_element) {          readFile.call(element);        },        afterFileRemove: function (element, value, master_element) {          $('img').each(function () {            if ($(this).data('src') && (element.files[0].name == $(this).data('src'))) {              $(this).remove();            }          });        }      });      function readFile() {        var file = this.files[0];        if (!/image\/\w+/.test(file.type)) {          alert("文件必须为图片!");          return false;        }        var reader = new FileReader();        reader.readAsDataURL(file);        reader.onload = function (e) {          result.innerHTML += '<img data-src="' + file.name + '" src="' + this.result + '" alt="" />';        }      }    });    $(function () {      var result = document.getElementById("PicNumresult");      var input = document.getElementById("PicNum");      if (typeof FileReader === 'undefined') {        result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用火狐浏览器,或其他兼容浏览器";        input.setAttribute('disabled', 'disabled');      }      $("#PicNum").MultiFile({        afterFileSelect: function (element, value, master_element) {          readFile.call(element);        },        afterFileRemove: function (element, value, master_element) {          $('img').each(function () {            if ($(this).data('src') && (element.files[0].name == $(this).data('src'))) {              $(this).remove();            }          });        }      });      function readFile() {        var file = this.files[0];        if (!/image\/\w+/.test(file.type)) {          alert("文件必须为图片!");          return false;        }        var reader = new FileReader();        reader.readAsDataURL(file);        reader.onload = function (e) {          result.innerHTML += '<img data-src="' + file.name + '" src="' + this.result + '" alt="" />';        }      }    });    $(function () {      var result = document.getElementById("DescriblePicNumresult");      var input = document.getElementById("DescriblePicNum");      if (typeof FileReader === 'undefined') {        result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用火狐浏览器,或其他兼容浏览器";        input.setAttribute('disabled', 'disabled');      }      $("#DescriblePicNum").MultiFile({        afterFileSelect: function (element, value, master_element) {          readFile.call(element);        },        afterFileRemove: function (element, value, master_element) {          $('img').each(function () {            if ($(this).data('src') && (element.files[0].name == $(this).data('src'))) {              $(this).remove();            }          });        }      });      function readFile() {        var file = this.files[0];        if (!/image\/\w+/.test(file.type)) {          alert("文件必须为图片!");          return false;        }        var reader = new FileReader();        reader.readAsDataURL(file);        reader.onload = function (e) {          result.innerHTML += '<img data-src="' + file.name + '" src="' + this.result + '" alt="" />';        }      }    });  </script>}<form id="form1" action="FileUpLoad" method="post" enctype="multipart/form-data">  <div style=" height:25px;"></div>  <table>    <tr>      <td>        <span class="spans">商品主图:</span>      </td>      <td>        <input id="mainPicNum" name="mainPicNum" type="file" class=""          accept="gif|jpg|jpeg|png|bmp|pic" maxlength="1" />      </td>    </tr>    <tr style="height: 8px;">      <td></td>      <td></td>    </tr>    <tr>      <td>        <span class="spans">主图显示区:</span>      </td>      <td>        <div id="result">        </div>      </td>    </tr>    <tr style="height: 8px;">      <td></td>      <td></td>    </tr>     <tr>        <td>          <span class="spans">商品配图:</span>        </td>        <td>          <input id="PicNum" name="PicNum" type="file" runat="server" class="" accept="gif|jpg|jpeg|png|bmp|pic"            maxlength="5" />        </td>      </tr>       <tr style="height:8px;">        <td>                  </td>        <td>                  </td>      </tr>      <tr>        <td>          <span class="spans">配图显示区:</span>        </td>        <td>          <div id="PicNumresult">          </div>        </td>      </tr>      <tr style="height:8px;">        <td>                  </td>        <td>                  </td>      </tr>      <tr>        <td>          <span class="spans">商品详情图:</span>        </td>        <td>          <input id="DescriblePicNum" name="DescriblePicNum" type="file" runat="server" class=""            accept="gif|jpg|jpeg|png|bmp|pic" maxlength="5" />        </td>      </tr>       <tr style="height:8px;">        <td>                  </td>        <td>                  </td>      </tr>      <tr>        <td>          <span class="spans">详情图显示区:</span>        </td>        <td>          <div id="DescriblePicNumresult">          </div>        </td>      </tr>  </table>   <div style=" height:25px;"></div>  <input id="Submit1" type="submit" value="submit" /></form>

   前端代码及说明就这么多,下面我们来书写后端代码:

   首先截图讲解:如下

   

   红线标注部分均是后端注意事项,代码注释很完善,大家自行查看,不作说明:

   后端代码整体如下:

/// <summary>    /// 各个空间单个文件上传    /// </summary>    /// <param name="mainPicNum">与前台HTML file控件Name对应</param>    /// <param name="PicNum">与前台HTML file控件Name对应</param>    /// <param name="DescriblePicNum">与前台HTML file控件Name对应</param>    /// <returns></returns>    [HttpPost]    public ActionResult FileUpLoad(HttpPostedFileBase mainPicNum, HttpPostedFileBase PicNum, HttpPostedFileBase DescriblePicNum)    {      string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + mainPicNum.FileName;      string pth = Server.MapPath("~/UpLoad/") + fileName;      mainPicNum.SaveAs(pth);      //      fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + PicNum.FileName;      pth = Server.MapPath("~/UpLoad/") + fileName;      PicNum.SaveAs(pth);      //      fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + DescriblePicNum.FileName;      pth = Server.MapPath("~/UpLoad/") + fileName;      DescriblePicNum.SaveAs(pth);      return View();    }    /// <summary>    /// MVC4 上传文件    /// </summary>    /// <param name="mainPicNum">与前台HTML file控件Name对应</param>    /// <param name="PicNum">与前台HTML file控件Name对应</param>    /// <param name="DescriblePicNum">与前台HTML file控件Name对应</param>    /// <returns></returns>    [HttpPost]    public ActionResult FileUpLoad(IEnumerable<HttpPostedFileBase> mainPicNum, IEnumerable<HttpPostedFileBase> PicNum, IEnumerable<HttpPostedFileBase> DescriblePicNum)    {      string commonPath = Server.MapPath("~/UpLoad/");//保存路径      foreach (var file in mainPicNum)      {        string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + file.FileName;//创建文件名-唯一性        int filesize = file.ContentLength;//上传文件的字节数         string fileType = file.ContentType;//上传文件的类型        fileType = fileType.Substring(6, fileType.Length - 6);        string fileTypes = "gif|jpg|jpeg|png|bmp|pic";        if (fileTypes.Contains(fileType))//如果上传的文件属于要求的类型        {          if (filesize <= 2 * 1024 * 1024)//要求上传的图片小于2M          {            string NewcommonPath = commonPath + fileName;            file.SaveAs(NewcommonPath);          }        }      }      //      foreach (var file in PicNum)      {        string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + file.FileName;//创建文件名-唯一性        int filesize = file.ContentLength;//上传文件的字节数         string fileType = file.ContentType;//上传文件的类型        fileType = fileType.Substring(6, fileType.Length - 6);        string fileTypes = "gif|jpg|jpeg|png|bmp|pic";        if (fileTypes.Contains(fileType))//如果上传的文件属于要求的类型        {          if (filesize <= 2 * 1024 * 1024)//要求上传的图片小于2M          {            string NewcommonPath = commonPath + fileName;            file.SaveAs(NewcommonPath);          }        }      }      //      foreach (var file in DescriblePicNum)      {        string fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + file.FileName;//创建文件名-唯一性        int filesize = file.ContentLength;//上传文件的字节数         string fileType = file.ContentType;//上传文件的类型        fileType = fileType.Substring(6, fileType.Length - 6);        string fileTypes = "gif|jpg|jpeg|png|bmp|pic";        if (fileTypes.Contains(fileType))//如果上传的文件属于要求的类型        {          if (filesize <= 2 * 1024 * 1024)//要求上传的图片小于2M          {            string NewcommonPath = commonPath + fileName;            file.SaveAs(NewcommonPath);          }        }      }      return View();    }

    好了,这就是本篇上传图片的完整源码,无非需要用到一个Jquery库和多文件上传JS,上文也给出了对应的名称,大家可自行网上下载,也可以通过我上传的链接下载:

    http://files.cnblogs.com/files/chenwolong/Desktop.zip

    @陈卧龙的博客