C# MVC（File）控件多张图片上传加预览
刚来公司实习，老板叫我写一个积分商城网站。用的是公司的框架结构搭建的后台，所以后台的图片上传不需要自己写。但是前台的评价图片就需要自己手写了，在网上找了很多代码发现都用不了。问了很多人也都没有实现！
最后公司同事给我了一个上传的代码，拿来借用。发现效果很好，困扰了我很多天的问题，也得于解决。现在我把他分享出来！
先看一下上传效果：
界面样式：（显示效果）
预览效果：（唯一的缺点就是上传的好像不是高清图片，是经过压缩的。目的是为了节省空间）
成功上传会有一个状态显示：
这样就已经完成图片上传啦！也保存在了本地！
接下来就看一下代码是如何实现的吧！
前端代码：
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Script/jquery-1.8.2.min.js"></script>
<link href="~/CSS/webuploader.css" rel="stylesheet" />
<script src="~/Script/webuploader.js"></script>
<link href="~/CSS/bootstrap.min.css" rel="stylesheet" />
<link href="~/CSS/style.css" rel="stylesheet" />
<link href="~/CSS/demo.css" rel="stylesheet" />
<link href="~/CSS/font-awesome.css" rel="stylesheet" /> </head>
<body>
<table class="tc_table_cp" border="0">
<tr>
<td width="104">图片上传：</td>
<td colspan="3">
<div id="fileList"> </div>
<div class="cp_img_jia" id="filePicker"></div>
</td>
</tr>
<tr>
<td width="104"></td>
<td colspan="3">
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</td>
</tr>
</table> </body>
</html>
前端代码
这就没什么新颖的了，也无非就是一些前端的File控件的标签！
接下来就是页面的脚本代码了：
每一步的具体意思也都标有注释！
1 <script type="text/javascript">
2
3 var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
4 $(function () {
5 var $ = jQuery,
6 $list = $('#fileList'),
7 // 优化retina, 在retina下这个值是2
8 ratio = window.devicePixelRatio || 1,
9 // 缩略图大小
10 thumbnailWidth = 90 * ratio,
11 thumbnailHeight = 90 * ratio,
12
13 // Web Uploader实例
14 uploader;
15 uploader = WebUploader.create({
16 // 选完文件后，是否自动上传。
17 auto: false,
18
19 disableGlobalDnd: true,
20 // swf文件路径
21 swf: applicationPath + '/Script/Uploader.swf',
22
23 // 文件接收服务端。
24 server: applicationPath + '/Home/UpLoadProcess',
25
26 // 选择文件的按钮。可选。
27 // 内部根据当前运行是创建，可能是input元素，也可能是flash.
28 pick: '#filePicker',
29
30 //只允许选择图片
31 accept: {
32 title: 'Images',
33 extensions: 'gif,jpg,jpeg,bmp,png',
34 mimeTypes: 'image/*'
35 }
36 });
37
38 // 当有文件添加进来的时候
39 uploader.on('fileQueued', function (file) {
40 var $li = $(
41 '<div id="' + file.id + '" class="cp_img">' +
42 '<img>' +
43 '<div class="cp_img_jian"></div></div>'
44 ),
45 $img = $li.find('img');
46
47
48 // $list为容器jQuery实例
49 $list.append($li);
50
51 // 创建缩略图
52 // 如果为非图片文件，可以不用调用此方法。
53 // thumbnailWidth x thumbnailHeight 为 100 x 100
54 uploader.makeThumb(file, function (error, src) {
55 if (error) {
56 $img.replaceWith('<span>不能预览</span>');
57 return;
58 }
59
60 $img.attr('src', src);
61 }, thumbnailWidth, thumbnailHeight);
62 });
63
64 // 文件上传过程中创建进度条实时显示。
65 uploader.on('uploadProgress', function (file, percentage) {
66 var $li = $('#' + file.id),
67 $percent = $li.find('.progress span');
68
69 // 避免重复创建
70 if (!$percent.length) {
71 $percent = $('<p class="progress"><span></span></p>')
72 .appendTo($li)
73 .find('span');
74 }
75
76 $percent.css('width', percentage * 100 + '%');
77 });
78
79 // 文件上传成功，给item添加成功class, 用样式标记上传成功。
80 uploader.on('uploadSuccess', function (file, response) {
81
82 $('#' + file.id).addClass('upload-state-done');
83 });
84
85 // 文件上传失败，显示上传出错。
86 uploader.on('uploadError', function (file) {
87 var $li = $('#' + file.id),
88 $error = $li.find('div.error');
89
90 // 避免重复创建
91 if (!$error.length) {
92 $error = $('<div class="error"></div>').appendTo($li);
93 }
94
95 $error.text('上传失败');
96 });
97
98 // 完成上传完了，成功或者失败，先删除进度条。
99 uploader.on('uploadComplete', function (file) {
100 $('#' + file.id).find('.progress').remove();
101 });
102
103 //所有文件上传完毕
104 uploader.on("uploadFinished", function ()
105 {
106 //提交表单
107
108 });
109
110 //开始上传
111 $("#ctlBtn").click(function () {
112 uploader.upload();
113
114 });
115
116 //显示删除按钮
117 $(".cp_img").live("mouseover", function ()
118 {
119 $(this).children(".cp_img_jian").css('display', 'block');
120
121 });
122 //隐藏删除按钮
123 $(".cp_img").live("mouseout", function () {
124 $(this).children(".cp_img_jian").css('display', 'none');
125
126 });
127 //执行删除方法
128 $list.on("click", ".cp_img_jian", function ()
129 {
130 var Id = $(this).parent().attr("id");
131 uploader.removeFile(uploader.getFile(Id,true));
132 $(this).parent().remove();
133 });
134
135 });
136
137
138 </script>
页面脚本
接下来就是后台控制器接收前台页面异步过来的数据了（代码如下）：
1 public class HomeController : Controller
2 {
3 static string urlPath = string.Empty;
4 public HomeController()
5 {
6 var applicationPath = VirtualPathUtility.ToAbsolute("~") == "/" ? "" : VirtualPathUtility.ToAbsolute("~");
7 urlPath = applicationPath + "/Upload";
8
9 }
10
11 public ActionResult Index()
12 {
13 return View();
14 }
15
16 public ActionResult UpLoadProcess(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file)
17 {
18 string filePathName = string.Empty;
19
20 string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "Upload");
21 if (Request.Files.Count == 0)
22 {
23 return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失败" }, id = "id" });
24 }
25
26 string ex = Path.GetExtension(file.FileName);
27 filePathName = Guid.NewGuid().ToString("N") + ex;
28 if (!System.IO.Directory.Exists(localPath))
29 {
30 System.IO.Directory.CreateDirectory(localPath);
31 }
32 file.SaveAs(Path.Combine(localPath, filePathName));
33
34 return Json(new
35 {
36 jsonrpc = "2.0",
37 id = id,
38 filePath = urlPath + "/" + filePathName
39 });
40
41 }
42
43 }
控制器接收代码
页面所引用到的脚本和CSS样式在这里（你可以根据最上面的HTML代码找到他所引用的脚本和CSS）
Script：
jquery-1.8.2.min.js 这是好像是一个专门对图片进行上传的脚本，你也可以去官网下载！
接下来还需要引用webuploader.js 这个脚本由于文件太大，我也不知道怎么上传文件。
CSS:
webuploader.css
1 .webuploader-container {
2 position: relative;
3 }
4 .webuploader-element-invisible {
5 position: absolute !important;
6 clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
7 clip: rect(1px,1px,1px,1px);
8 }
9 .webuploader-pick {
10 position: relative;
11 display: inline-block;
12 cursor: pointer;
13
14 padding:0px;
15 width:100%;
16 height:100%;
17 color: #fff;
18 text-align: center;
19 border-radius: 3px;
20 overflow: hidden;
21 }
22 .webuploader-pick-hover {
23
24 }
25
26 .webuploader-pick-disable {
27 opacity: 0.6;
28 pointer-events:none;
29 }
bootstrap.min.css 内容太多，这个样式你可以去bootstrap官网下载
接下来还需要引用style.css 还是由于这个文件太大，我也不知道怎么上传文件。
接下来还需要引用demo.css 还是由于这个文件太大，我也不知道怎么上传文件。
接下来还需要引用font-awesome.css 还是由于这个文件太大，我也不知道怎么上传文件。
由于不知道如何上传文件，就只能这样把代码一个一个的拷贝在界面上了。
还有这些页面上会用到的图片，我把它放在这里。你可以对应着style.css里面去把这里图片放在你项目的相应位置
这个代码实用性自我认为很强，有需要的朋友可以借鉴参考！
装载是希望您表明原文出处！ 谢谢！
作者：奔奔
C# MVC（File）控件多张图片上传加预览的更多相关文章
- 用原生JS实现多张图片上传及预览功能（兼容IE8）
最近需要做一个图片上传预览的功能(兼容IE8-11.chrome.firefox等浏览器),网上现有的文件上传组件(如webuploader)总是会遇到一些兼容性问题.于是我参考了一些博文(链接找不到 ...
- jquery +ajax 上传加预览
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- ThinkPHP5+Layui实现图片上传加预览
html代码 <div class="layui-upload"> <button type="button" class="lay ...
- js获取file控件的完整路径（上传图片预览）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 在EasyUI项目中使用FileBox控件实现文件上传处理
我在较早之前的随笔<基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用>Web框架介绍中介绍了基于Uploadify的文件上传操作,免费版本用的是J ...
- FileUpload控件「批次上传 / 多档案同时上传」的范例--以「流水号」产生「变量名称」
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/19/multiple_fileupload_asp_net_20130819. ...
- DevExpress控件使用系列--ASPxUploadControl（图片上传及预览）
1.控件功能 列表控件展示数据.弹框控件执行编辑操作.Tab控件实现多标签编辑操官方说明 2.官方示例 2.1 ASPxImage http: ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
随机推荐
- 计算机系统原理：cache容量计算
Cache容量计算例题: 假定主存地址位数为32位,按字节编址,主存和cache之间采用4-路组相联映射方式,主存块大小为4个字,每字32位,采用直写(Write Throght)方式和LRU替换策略 ...
- Scrum Meeting 目录 && alpha 第一次Scrum Meeting博客
是兄弟就来摸鱼小组 Scrum Meeting 博客汇总 一.Alpha阶段 标号 标题 1 [alpha]第一次Scrum Meeting(见本文) 二.Beta阶段 会议安排 时间 4月23日8时 ...
- 【布隆过滤器】基于Hutool库实现的布隆过滤器Demo
布隆过滤器出现的背景: 如果想判断一个元素是不是在一个集合里,一般想到的是将集合中所有元素保存起来,然后通过比较确定.链表.树.散列表(又叫哈希表,Hash table)等等数据结构都是这种思路,存储 ...
- 指定pdf的格式
爬虫实战[3]Python-如何将html转化为pdf(PdfKit) 前言 前面我们对博客园的文章进行了爬取,结果比较令人满意,可以一下子下载某个博主的所有文章了.但是,我们获取的只有文章中的文 ...
- Windows PR提权
目录 提权利用的漏洞 PR提权 提权利用的漏洞 Microsoft Windows RPCSS服务隔离本地权限提升漏洞 RPCSS服务没有正确地隔离 NetworkService 或 LocalSer ...
- 自定义Tomcat部署目录
1.创建配置文件 在Tomcat安装目录中conf-->Catalina-->localhost目录下,创建项目访问请求路径.xml文件 内容如下: <Context path=&q ...
- 学javaweb 先学Servlet 应用理论很重要
package cn.Reapsun.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.ser ...
- 异常检测算法Robust Random Cut Forest（RRCF）关键定理引理证明
摘要:RRCF是亚马逊发表的一篇异常检测算法,是对周志华孤立森林的改进.但是相比孤立森林,具有更为扎实的理论基础.文章的理论论证相对较为晦涩,且没给出详细的证明过程.本文不对该算法进行详尽的描述,仅对 ...
- K8s Scheduler 在调度 pod 过程中遗漏部分节点的问题排查
问题现象 在TKE控制台上新建版本为v1.18.4(详细版本号 < v1.18.4-tke.5)的独立集群,其中,集群的节点信息如下: 有3个master node和1个worker node, ...
- 如何将代码托管到Github
Github是最火热的源代码管理平台,你可以通过这个平台,将代码托管起来,防止代码丢失,或者将自己的代码展示给世界. 首先要下载Git,请自行在各大应用平台下载. 下载完成后,在你的菜单上下文中就会出 ...