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
本文版权归作者和博客园共有。欢迎转载,但必须保留此段声明,且在文章页面明显位置给出原文连接!