06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

简介:

LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui

LoT.UI开源地址如下:https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI

先看在LoT.UI里面的应用效果图:

懒人福利:http://www.cnblogs.com/dunitian/p/5535455.html(一句代码直接实现)

关键代码解析:(https://github.com/dunitian/LoTCodeBase/tree/master/NetCode/3.常用技能/02.uploader系列/01.Webuploader

JS部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
< script  type="text/javascript">
         //1.uploader初始化。 auto-是否自动上传
         var uploader = WebUploader.create({
             server: '/Home/Upload',
             swf: '/open/webuploader/Uploader.swf',
             pick: '#lot-picker',
             auto: true,                     //自动上传
             //chunked: true,                //断点续传-单个默认5M
             duplicate: false,               //文件去重
             prepareNextFile: true,          //提前准备下一个文件(可选,单文件不建议开)
             //formData: { },                //自定义参数表,每次请求都会发送这些参数
             paste: document.body,           //启动剪贴板(可选)
             dnd: $('#lot-uploader'),        //启动拖拽(可选)
             fileNumLimit: 5,                //文件总数量
             fileSingleSizeLimit: 10485760,  //单个文件最大值(IIS默认<=4M,可自行设置:httpRuntime的maxRequestLength)
             accept: {
                 title: 'Images',
                 extensions: 'gif,jpg,jpeg,bmp,png',
                 mimeTypes: 'image/*'
             }
         });
 
         //2.文件添加时,添加样式和缩略图
         uploader.on('fileQueued', function (file) {
             var $li = $(
                     '< div  id="' + file.id + '" class="file-item thumbnail">' +
                         '< img >' +
                         '< div  class="info info-top">Szie:' + Math.floor(file.size / 1024) + 'kb' + '</ div >' +
                         '< div  class="info info-bot">' + file.name + '</ div >' +
                     '</ div >'
                     ),
                 $img = $li.find('img');
             $('#lot-filelist').append($li);
             // 创建缩略图
             uploader.makeThumb(file, function (error, src) {
                 if (error) {
                     $img.replaceWith('< span >不能预览</ span >');
                     return;
                 }
                 $img.attr('src', src);
             }, 100, 100);
             ////计算文件MD5(可加)
             //uploader.md5File(file).then(function (val) {
             //    console.log('md5:',val,'-',file.name);
             //});
         });
 
         //3.文件上传过程中创建进度条实时显示。
         uploader.on('uploadProgress', function (file, percentage) {
             var $li = $('#' + file.id),
                 $percent = $li.find('.progress span');
             //避免重复创建
             if (!$percent.length) {
                 $percent = $('< p  class="progress">< span ></ span ></ p >').appendTo($li).find('span');
             }
             $percent.css('width', percentage * 100 + '%');
         });
 
         //4.文件上传成功,给item添加成功class, 用样式标记上传成功。
         uploader.on('uploadSuccess', function (file, data) {
             if (data.status) {
                 $('#' + file.id).addClass('upload-state-done');
             } else {
                 showMsg(file, data.msg);
             }
         });
 
         //5.失败系列的处理
         //5.1添加失败处理
         uploader.on('error', function (log) {
             switch (log) {
                 case 'F_EXCEED_SIZE':
                     addMsg('文件10M以内'); break;
                 case 'Q_EXCEED_NUM_LIMIT':
                     addMsg('已超最大上传数'); break;
                 case 'Q_TYPE_DENIED':
                     addMsg('文件类型不正确'); break;
                 case 'F_DUPLICATE':
                     addMsg('文件已经被添加'); break;
                 default:
                     addMsg('文件添加失败~'); break;
             }
         });
         //5.2上传失败处理
         uploader.on('uploadError', function (file) {
             showMsg(file, '上传失败');
         });
 
         //错误信息显示
         function showMsg(file, msg) {
             var $li = $('#' + file.id), $error = $li.find('div.error');
             //避免重复创建
             if (!$error.length) {
                 $error = $('< div  class="error"></ div >').appendTo($li);
             }
             $error.text(msg);
         }
         //错误信息提示
         function addMsg(msg) {
             $('#lot-uploader').prepend('< h3  class="temp-log" style="color:red;">' + msg + '</ h3 >')
             setTimeout(function () {
                 $('.temp-log').remove();
             }, 2000);
         }
     </ script >

后端代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/// <summary>
         /// 图片上传
         /// </summary>
         /// <returns></returns>
         public  JsonResult Upload(HttpPostedFileBase file)
         {
             if  (file ==  null ) {  return  Json( new  { status =  false , msg =  "图片提交失败"  }); }
             if  (file.ContentLength > 10485760) {  return  Json( new  { status =  false , msg =  "文件10M以内"  }); }
             string  filterStr =  ".gif,.jpg,.jpeg,.bmp,.png" ;
             string  fileExt = Path.GetExtension(file.FileName).ToLower();
             if  (!filterStr.Contains(fileExt)) {  return  Json( new  { status =  false , msg =  "图片格式不对"  }); }
             //防止黑客恶意绕过,从根本上判断下文件后缀
             if  (!file.InputStream.CheckingExt())
             {
                 //todo:一次危险记录
                 return  Json( new  { status =  false , msg =  "图片格式不对"  });
             }
             //todo: md5判断一下文件是否已经上传过,如果已经上传直接返回 return Json(new { status = true, msg = sqlPath });
 
             string  path =  string .Format( "{0}/{1}" "/lotFiles" , DateTime.Now.ToString( "yyyy-MM-dd" ));
             string  fileName =  string .Format( "{0}{1}" , Guid.NewGuid().ToString( "N" ), fileExt);
             string  sqlPath =  string .Format( "{0}/{1}" , path, fileName);
             string  dirPath = Request.MapPath(path);
 
             if  (!Directory.Exists(dirPath)) { Directory.CreateDirectory(dirPath); }
             try
             {
                 //todo:缩略图
                 file.SaveAs(Path.Combine(dirPath, fileName));
                 //todo: 未来写存数据库的Code
             }
             catch  return  Json( new  { status =  false , msg =  "图片保存失败"  }); }
             return  Json( new  { status =  true , msg = sqlPath });
         }

开源组件:https://github.com/fex-team/webuploader

扩展组件:https://github.com/dunitian/LoTUploader


本文转自毒逆天博客园博客,原文链接:http://www.cnblogs.com/dunitian/p/5535431.html,如需转载请自行联系原作者


相关文章
|
9天前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
|
11天前
|
Linux C# Android开发
一个开源、跨平台的.NET UI框架 - Avalonia UI
一个开源、跨平台的.NET UI框架 - Avalonia UI
|
1月前
|
前端开发 关系型数据库 MySQL
Python基于Django框架图书管理系统,Bootstrap框架UI,后台EasyUI框架UI,有登录,实现增删改查的富文本效果
本文介绍了一个使用Python Django框架开发的图书管理系统,该系统采用Bootstrap框架进行前端UI设计,EasyUI框架用于后台UI界面,集成了富文本编辑器,并实现了登录及增删改查功能。
|
1月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
22 0
|
1月前
|
前端开发 Linux API
Avalonia:一个.NET跨平台UI框架
Avalonia:一个.NET跨平台UI框架
64 0
|
4月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
4月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
4月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
4月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版