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

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

学无止境,精益求精

   最近在做自学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[].name == $(this).data('src'))) {
$(this).remove();
}
});
}
}); function readFile() {
var file = this.files[];
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="" style=" height:100px; width:100px;"/>';
}
}
}); $(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[].name == $(this).data('src'))) {
$(this).remove();
}
});
}
}); function readFile() {
var file = this.files[];
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="" style=" height:100px; width:100px;"/>';
}
}
}); $(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[].name == $(this).data('src'))) {
$(this).remove();
}
});
}
}); function readFile() {
var file = this.files[];
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="" style=" height:100px; width:100px;"/>';
}
}
}); </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="" />
</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="" />
</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="" />
</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(, fileType.Length - );
string fileTypes = "gif|jpg|jpeg|png|bmp|pic";
if (fileTypes.Contains(fileType))//如果上传的文件属于要求的类型
{
if (filesize <= * * )//要求上传的图片小于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(, fileType.Length - );
string fileTypes = "gif|jpg|jpeg|png|bmp|pic";
if (fileTypes.Contains(fileType))//如果上传的文件属于要求的类型
{
if (filesize <= * * )//要求上传的图片小于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(, fileType.Length - );
string fileTypes = "gif|jpg|jpeg|png|bmp|pic";
if (fileTypes.Contains(fileType))//如果上传的文件属于要求的类型
{
if (filesize <= * * )//要求上传的图片小于2M
{
string NewcommonPath = commonPath + fileName;
file.SaveAs(NewcommonPath);
}
}
}
return View();
}

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

看完就顶哈!

资源文件:JS库和多文件上传JS文件,请使用此链接下载!http://files.cnblogs.com/files/chenwolong/Desktop.zip

@陈卧龙的博客

MVC 上传文件并展示的更多相关文章

  1. Spring MVC上传文件

    Spring MVC上传文件 1.Web.xml中加入 <servlet> <servlet-name>springmvc</servlet-name> <s ...

  2. MVC上传文件

    ASP.NET MVC上传文件是必段撑握的知识.加强训练才是.以前Insus.NET曾使用第三方MyAjaxForm.js :http://www.cnblogs.com/insus/p/378548 ...

  3. Spring MVC 上传文件

    Spring MVC上传文件需要如下步骤: 1.前台页面,form属性 method设置为post,enctype="multipart/form-data"  input的typ ...

  4. asp.net MVC 上传文件 System.Web.HttpException: 超过了最大请求长度

    APS.NET MVC 上传文件出现  System.Web.HttpException: 超过了最大请求长度 这个问题 原因是 默认最大上传文件大小为4096,而我提交的文件太大了. 解决方案:修改 ...

  5. Spring MVC上传文件原理和resolveLazily说明

    问题:使用Spring MVC上传大文件,发现从页面提交,到进入后台controller,时间很长.怀疑是文件上传完成后,才进入.由于在HTTP首部自定义了“Token”字段用于权限校验,Token的 ...

  6. MVC:上传文件

    今天写了一个使用MVC上传的DEMO,很简单不超过10行代码.代码如下(关注重点,所以尽量精简掉其他代码): 项目结构

  7. ASP.NET MVC上传文件----uploadify的使用

    课程设计需要实现上传文件模块,本来ASP.NET是有内置的控件,但是ASP.NET MVC没有,所以就有两种方法:自定义和采用第三方插件.由于时间的关系,故采用第三方插件:uploadify. upl ...

  8. ASP.NET MVC上传文件

    最近参考网络资料,学习了ASP.NET MVC如何上传文件.最基本的,没有用jQuery等技术. 1.定义Model public class TestModel    {        [Displ ...

  9. 解析Spring MVC上传文件

    新建一个普通的maven工程 在pom.xml文件中引入相应的坐标 <?xml version="1.0" encoding="UTF-8"?> & ...

随机推荐

  1. placeholder属性实现text标签默认值提示用户

    <input type="text" class="searchTxt" id=this.id+"-searchTxt" placeh ...

  2. Bootstrap页面布局23 - BS折叠内容

    <div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如 ...

  3. 11号了,还有三天上线-改bug

    +(NSDictionary *)replacedKeyFromPropertyName { return  @{ @"doctorId": @"id" }; ...

  4. Mac 下 命令收藏

    1.查看文件的二进制 xxd -b test.wav 2.所有占用的端口 sudo lsof -i -P | grep -i "listen" 原文地址:Mac 下 命令收藏标签: ...

  5. 安装mssql2008和启动时出现的问题及解决办法

    (一) 安装sql server 2008 时, 提示错误:此计算机上安装了 Microsoft Visual Studio 2008 的早期版本. 请在安装 SQL Server 2008 前将 V ...

  6. 管子&小白

    管夷吾已入朝,稽首谢罪,桓公亲手扶起,赐之以坐.夷吾曰:“臣乃俘戮之余,得蒙宥死,实为万幸,敢辱过礼!”桓公曰:“寡人有问于子,子必坐,然后敢请."夷吾再拜就坐. 桓公曰:“齐,千乘之国,先 ...

  7. JQuery通过$(xxx...)返回对象

    var JQ = function () { return new JQ.prototype.init(); }; JQ.prototype.init = function () { }; JQ.pr ...

  8. 关于PushKit的使用总结

    1.PushKit的认识 (1)概念 ios8苹果新引入了名为pushkit的框架和一种新的push通知类型,被称作voip push.该push方式旨在提供区别于普通apns push的能力,通过这 ...

  9. eclipse根据.wsdl文件自动生成webservice的调用客户端

    1.工具:eclipse3.3或者是带有webservice插件的eclipse 2. 首先用浏览器访问webservice的站点,接着保存打开的页面,后缀为.wsdl. 3.把保存好的文件拷入ecl ...

  10. 其他常用HTML 片段

    1.input placeholder 文字居中 字体大小+上下padding值等于设计稿宽度 设计稿中总高度为86px   padding:27px 0;font-size:30px;   2.英文 ...