开发者社区> 毒逆天> 正文

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.
+关注继续查看

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部分:

<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>

后端代码:

/// <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

作者:毒逆天
打赏:18i4JpL6g54yAPAefdtgqwRrZ43YJwAV5z
本文版权归作者和博客园共有。欢迎转载,但必须保留此段声明,且在文章页面明显位置给出原文连接!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
02.LoT.UI 前后台通用框架分解系列之——灵活的菜单栏
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI 先看在LoT.
995 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
18907 0
05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI 先看在LoT.
1027 0
07.LoT.UI 前后台通用框架分解系列之——强大的文本编辑器
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI 先看在LoT.
1011 0
picasso图片缓存框架
<p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:Arial; font-size:14px; line-height:26px"> picasso是Square公司开源的一个Android图形缓存库,地址<a target="_blank" href
1536 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
17758 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
23788 0
【OkHttp】OkHttp 上传图片 ( 获取 SD 卡动态权限 | 跳转到相册界面选择图片 | 使用 OkHttp 上传图片文件 )(二)
【OkHttp】OkHttp 上传图片 ( 获取 SD 卡动态权限 | 跳转到相册界面选择图片 | 使用 OkHttp 上传图片文件 )(二)
35 0
+关注
毒逆天
目前不太用云栖, 博客园地址:http://dunitian.cnblogs.com;GitHub地址:https://github.com/dunitian
368
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载