开源地址：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
本文转自毒逆天博客园博客，原文链接：
