开源地址：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
