开源1句代码搞定图片批量上传,无需什么代码功底无语言界限
Posted 码道安邦
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了开源1句代码搞定图片批量上传,无需什么代码功底无语言界限相关的知识,希望对你有一定的参考价值。
开源地址:https://github.com/dunitian/LoTUploader
WebUploader基础上的封装改善,一句代码全部实现(样式美化,实例JS优化(配置优化,样式调整,名称+大小显示,错误处理等),后端代码。。。。。)
效果:(完整demo:https://github.com/dunitian/LoTUploader/tree/V1.0.1/Demo)
一句代码:$.lotuploader(\'lot-uploader\', \'/Home/Upload\'); //必填参数:ID,Server地址 (完整案例看Demo部分)
第一步:引入样式
<link href="Scripts/lotUploader/lotuploader1.0.1.min.css" rel="stylesheet" />
第二步:自己定义一个DIV(id名任意)
<div id="lot-uploader"></div>
第三步:引入脚本
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="Scripts/lotUploader/lotuploader1.0.1.min.js"></script>
代码部分:
<script type="text/javascript">
$.lotuploader({
lotDocId: \'lot-uploader\', //ID
lotUrl: \'/Home/Upload\', //服务器Post地址
});</script>
单文件处理:
$.lotuploader({ lotDocId: \'lot-uploader\', lotUrl: \'服务器Post地址\', oneFile: true, fileSize: 1024 * 1024 * 5, btnStr: \'点我就上传默认展图\', lotSuccessFunc: function (file,data) { //方法主体 }, lotErrorFunc: function (msg) { $(\'#lot-uploader\').append(\'<div class="lot-temp" style="color:red">\' + msg + \'</div> \'); setTimeout(function () { $(\'.lot-temp\').remove(); }, 2000); } });
后端实例代码:
/// <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 }); }
/// <summary> /// 判断扩展名是否是指定类型---默认是判断图片格式,符合返回true(没有释放stream,请手动:file.InputStream.Dispose();) /// eg:图片+压缩+文档:"7173", "255216", "6677", "13780", "8297", "55122", "8075", "208207" /// eg:img,"7173", "255216", "6677", "13780" //gif //jpg //bmp //png /// eg:file,"8297", "55122", "8075", "208207" //rar //7z //zip + 文档系列 /// </summary> /// <param name="stream">文件流</param> /// <param name="fileTypes">文件扩展名</param> /// <returns></returns> public static bool CheckingExt(this Stream stream, params string[] fileTypes) { if (fileTypes == null || fileTypes.Length == 0) { fileTypes = new string[] { "7173", "255216", "6677", "13780" }; } bool result = false; string fileclass = ""; #region 读取头两个字节 var reader = new BinaryReader(stream); byte[] buff = new byte[2]; try { reader.Read(buff, 0, 2);//读取每个文件的头两个字节 fileclass = buff[0].ToString() + buff[1].ToString(); } catch (System.Exception ex) { stream.Dispose(); reader.Dispose(); return false; } #endregion #region 校验 for (int i = 0; i < fileTypes.Length; i++) { if (fileclass == fileTypes[i]) { result = true; break; } } #endregion return result; }
注意点:
如果你项目并不使用font-awesome,那请吧.upload-state-done:after样式修改一下,这样成功后就很明了
案例没有采用纯Net语法,只是把服务端处理用Net处理了下。index.html部分通用
CDN地址:
https://cdn.rawgit.com/dunitian/LoTUploader/master/Dist/progress.png
https://cdn.rawgit.com/dunitian/LoTUploader/master/Dist/lotuploader.swf
https://cdn.rawgit.com/dunitian/LoTUploader/master/Dist/lotuploader.min.css
https://cdn.rawgit.com/dunitian/LoTUploader/master/Dist/lotuploader1.0.2.min.js
以上是关于开源1句代码搞定图片批量上传,无需什么代码功底无语言界限的主要内容,如果未能解决你的问题,请参考以下文章
嗯嗯,一句代码就搞定 RecycleView 侧滑菜单添加头部底部加载更多
一句代码搞定 RecycleView 侧滑菜单添加头部底部加载更多