【开源】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);
        }
    });

后端实例代码：

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 });          }

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

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

 

，如需转载请自行联系原作者