WebUploader.js 上传的几种情况
最近的项目中用到webUploader的地方比较多，总结了几种图片上传的情况。
必要的引用
<link href="~/Scripts/webuploader-0.1.5/webuploader.css" rel="stylesheet" /> <script src="~/Scripts/webuploader-0.1.5/webuploader.min.js"></script>
第一，只上传缩略图
页面html
<td>
@if (Model==null||string.IsNullOrEmpty(Model.Cover))
{
<img src="~/Images/blankimg.jpg" width="120" height="120" id="img" />
}
else
{
<img src="~/Upload/College/@Model.Cover" width="120" height="120" id="img" />
}
@Html.HiddenFor(m=>m.Cover)
<div id="uploader" class="wu-example" style="margin-top:10px">
<!--用来存放文件信息-->
<div class="btns">
<div id="picker">选择图片</div>
</div>
</div>
</td>
js代码
var ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 240 * ratio,
thumbnailHeight = 240 * ratio;
var uploader = WebUploader.create({
swf: '/Scripts/webuploader-0.1.5/js/Uploader.swf',
pick: '#picker',
resize: false,
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
},
thumb: {
width: 120,
height: 120,
quality: 70,
allowMagnify: true,
crop: true,
type: 'image/jpeg'
},
method: "POST"
});
uploader.on("fileQueued", function (file) {
uploader.makeThumb(file, function (error, ret) {
if (error) {
alert('预览错误')
} else {
$("#img").attr("src", ret)
$("#Cover").val(ret)
uploader.reset();
}
}, thumbnailWidth, thumbnailHeight);
})
服务端action 在保存方法中直接保存路径
public JsonResult College_Save(XX0301Model.Base model)
{
if (!string.IsNullOrWhiteSpace(model.Cover))
{
var array = model.Cover.Split(',');
if (array.Length > 1)
{
var image = array[1];
var arr = Convert.FromBase64String(image);
MemoryStream ms = new MemoryStream(arr);
Bitmap bmp = new Bitmap(ms);
var path = Server.MapPath("/Upload/College/");
if (!System.IO.Directory.Exists(path))
System.IO.Directory.CreateDirectory(path);
var fileName = Guid.NewGuid() + ".jpg";
bmp.Save(path + fileName, System.Drawing.Imaging.ImageFormat.Jpeg);
ms.Close();
model.Cover = fileName;
}
}
return IData.XX0301.Save(model).ToJson();
}
第二，上传缩略图和原图
界面html代码
<td> @if (Model == null) { <img src="~/Images/blankimg.jpg" width="120" height="120" id="img" /> } else { <img src="~/Upload/Campus/@Model.ThumbUrl" width="120" height="120" id="img" /> } @Html.HiddenFor(m => m.ID) @Html.HiddenFor(m=>m.ImgUrl) @Html.HiddenFor(m=>m.ThumbUrl) <div id="uploader" class="wu-example" style="margin-top:10px"> <!--用来存放文件信息--> <div class="btns"> <div id="picker">选择图片</div> </div> </div> </td>
js代码
var ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 250 * ratio, thumbnailHeight = 250 * ratio; var uploader = WebUploader.create({ swf: '/Scripts/webuploader-0.1.5/js/Uploader.swf', server: '@Url.Action("CampusUpload")', pick: '#picker', resize: false, auto: true, fileSingleSizeLimit: 2 * 1024 * 1024, //1M accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/jpg,image/jpeg,image/png' }, thumb: { width: 250, height: 250, quality: 70, allowMagnify: true, crop: true, type: 'image/jpeg' }, method: "POST" }); uploader.on("uploadStart", function (file) { Art.waitPanel.showWait("正在上传文件", 99999); }) uploader.on("error", function (type) { Art.waitPanel.closeWait() if (type == "Q_TYPE_DENIED") { top.$.messager.alert("系统提示", "请上传JPG、PNG格式文件", "error"); } else if (type == "F_EXCEED_SIZE") { top.$.messager.alert("系统提示", "文件大小不能超过1M", "error"); } }); uploader.on("uploadSuccess", function (file, response) { Art.waitPanel.closeWait() var data = response if (data.flag) { uploader.makeThumb(file, function (error, ret) { if (error) { top.$.messager.alert("系统提示", "预览错误","error") } else { Art.waitPanel.showWait("正在生成缩略图", 99999); $.post("@Url.Action("Campus_MakeThumb")", { image: ret }, function (result) { if (result.flag) { $("#img").attr("src", ret) $("#ImgUrl").val(data.data) $("#ThumbUrl").val(result.data) uploader.reset(); } else { top.$.messager.alert("系统提示", result.msg, "error") } Art.waitPanel.closeWait() }) } }, thumbnailWidth, thumbnailHeight); } else { top.$.messager.alert("系统提示", data.msg, "error") } })
服务端保存原图，缩略图的代码
public JsonResult CampusUpload() { var file = Request.Files[0]; if (file == null) return ResultEx.Init(false, "读取图片失败！").ToJson(); var fileName = file.FileName; var fix = fileName.Substring(fileName.LastIndexOf('.') + 1); var fixList = new string[] { "jpg", "jpeg", "png", "gif" }; if (!fixList.Contains(fix)) return ResultEx.Init(false, "上传的图片格式不正确！").ToJson(); var maxSize = 1024 * 1024 * 2; //2M if (file.ContentLength >= maxSize) return ResultEx.Init(false, "上传的图片大小不得大于2M！").ToJson(); var nFileName = Guid.NewGuid() + "." + fix; var path = Server.MapPath("/Upload/Campus/"); if (!System.IO.Directory.Exists(path)) System.IO.Directory.CreateDirectory(path); file.SaveAs(path + nFileName); return ResultEx.Init(true, "", nFileName).ToJson(); } public JsonResult Campus_MakeThumb(string image) { try { image = image.Split(',')[1]; var arr = Convert.FromBase64String(image); MemoryStream ms = new MemoryStream(arr); Bitmap bmp = new Bitmap(ms); var path = Server.MapPath("/Upload/Campus/"); if (!System.IO.Directory.Exists(path)) System.IO.Directory.CreateDirectory(path); var fileName = Guid.NewGuid() + ".jpg"; bmp.Save(path + fileName, System.Drawing.Imaging.ImageFormat.Jpeg); ms.Close(); return ResultEx.Init(true, "", fileName).ToJson(); } catch (Exception ex) { return ResultEx.Init(ex).ToJson(); } }
第三，上传url带参数，并且在上传之前做数据校验
html页面
<td colspan="2" rowspan="6" align="center"> @{ var path = "/Upload/STUDENT/"; var fileName = (Model != null && !string.IsNullOrWhiteSpace(Model.KSH) ? Model.KSH : "nonePhoto"); path = path + fileName + ".jpg"; } <img width="200" height="250" src="@path" id="img_ZP" /> <div id="uploader" class="wu-example" style="margin-top:10px"> <!--用来存放文件信息--> <div class="btns"> <div id="picker">选择图片</div> </div> </div> </td>
js代码
var uploader = WebUploader.create({ swf: '/Scripts/webuploader-0.1.5/js/Uploader.swf', server: '/MCenter/Student/Student_PicUpload', pick: '#picker', resize: false, auto: true, fileSingleSizeLimit: 1 * 1024 * 1024, //1M accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/jpg,image/jpeg,image/png' }, method: "POST" }); uploader.on("uploadStart", function (file) { Art.waitPanel.showWait("正在上传文件", 99999); }) uploader.on('beforeFileQueued', function (file) { var KSH = $("#KSH").textbox('getValue'); if (!KSH || KSH == null || KSH == "") { top.$.messager.alert("系统提示", "请填写考生号后再上传图片！") return false; } uploader.options.formData = { KSH: KSH }; }); uploader.on("error", function (type) { Art.waitPanel.closeWait() if (type == "Q_TYPE_DENIED") { top.$.messager.alert("系统提示", "请上传JPG、PNG格式文件", "error"); } else if (type == "F_EXCEED_SIZE") { top.$.messager.alert("系统提示", "文件大小不能超过1M", "error"); } }); uploader.on("uploadSuccess", function (file, response) { Art.waitPanel.closeWait() var data = response if (data.flag) { $("#img_ZP").attr("src", "/Upload/Student/" + data.data) uploader.reset(); } else { top.$.messager.alert("系统提示", data.msg, "error") } })
服务端代码上传原图
public JsonResult Student_PicUpload(string KSH) { var file = Request.Files[0]; if (file == null) return ResultEx.Init(false, "读取图片失败！").ToJson(); var fileName = file.FileName; var fix = fileName.Substring(fileName.LastIndexOf('.') + 1); var fixList = new string[] { "jpg", "jpeg", "png", "gif" }; if (!fixList.Contains(fix)) return ResultEx.Init(false, "上传的图片格式不正确！").ToJson(); var maxSize = 1024 * 1024 * 1; //1M if (file.ContentLength >= maxSize) return ResultEx.Init(false, "上传的图片大小不得大于1M！").ToJson(); var path = Server.MapPath("/Upload/Student/"); if (!System.IO.Directory.Exists(path)) System.IO.Directory.CreateDirectory(path); file.SaveAs(path + KSH + ".jpg"); return ResultEx.Init(true, "", KSH + ".jpg").ToJson(); }
第四，根据官网上的demo的多图队列上传
引用
<script src="~/lib/jquery/1.9.1/jquery.min.js"></script> <link href="~/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" /> <link href="~/lib/webuploader/0.1.5/demo.css" rel="stylesheet" /> <script type="text/javascript" src="/lib/webuploader/0.1.5/webuploader.min.js"></script>
官方的demo需要引用对应的demo.css
#container { color: #838383; font-size: 12px; } #uploader .queueList { margin: 20px; border: 3px dashed #e6e6e6; } #uploader .queueList.filled { padding: 17px; margin: 0; border: 3px dashed transparent; } #uploader .queueList.webuploader-dnd-over { border: 3px dashed #999999; } #uploader p {margin: 0;} .element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px,1px,1px,1px); } #uploader .placeholder { min-height: 350px; padding-top: 178px; text-align: center; background: url(images/image.png) center 93px no-repeat; color: #cccccc; font-size: 18px; position: relative; } #uploader .placeholder .webuploader-pick { font-size: 18px; background: #00b7ee; border-radius: 3px; line-height: 44px; padding: 0 30px; *width: 120px; color: #fff; display: inline-block; margin: 0 auto 20px auto; cursor: pointer; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } #uploader .placeholder .webuploader-pick-hover { background: #00a2d4; } #uploader .placeholder .flashTip { color: #666666; font-size: 12px; position: absolute; width: 100%; text-align: center; bottom: 20px; } #uploader .placeholder .flashTip a { color: #0785d1; text-decoration: none; } #uploader .placeholder .flashTip a:hover { text-decoration: underline; } #uploader .filelist { list-style: none; margin: 0; padding: 0; } #uploader .filelist:after { content: ''; display: block; width: 0; height: 0; overflow: hidden; clear: both; } #uploader .filelist li { width: 110px; height: 110px; background: url(images/bg.png) no-repeat; text-align: center; margin: 0 8px 20px 0; position: relative; display: inline; float: left; overflow: hidden; font-size: 12px; } #uploader .filelist li p.log { position: relative; top: -45px; } #uploader .filelist li p.title { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; white-space: nowrap; text-overflow : ellipsis; top: 5px; text-indent: 5px; text-align: left; } #uploader .filelist li p.progress { position: absolute; width: 100%; bottom: 0; left: 0; height: 8px; overflow: hidden; z-index: 50; margin: 0; border-radius: 0; background: none; -webkit-box-shadow: 0 0 0; } #uploader .filelist li p.progress span { display: none; overflow: hidden; width: 0; height: 100%; background: #1483d8 url(images/progress.png) repeat-x; -webit-transition: width 200ms linear; -moz-transition: width 200ms linear; -o-transition: width 200ms linear; -ms-transition: width 200ms linear; transition: width 200ms linear; -webkit-animation: progressmove 2s linear infinite; -moz-animation: progressmove 2s linear infinite; -o-animation: progressmove 2s linear infinite; -ms-animation: progressmove 2s linear infinite; animation: progressmove 2s linear infinite; -webkit-transform: translateZ(0); } @-webkit-keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; } } @-moz-keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; } } @keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; } } #uploader .filelist li p.imgWrap { position: relative; z-index: 2; line-height: 110px; vertical-align: middle; overflow: hidden; width: 110px; height: 110px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webit-transition: 200ms ease-out; -moz-transition: 200ms ease-out; -o-transition: 200ms ease-out; -ms-transition: 200ms ease-out; transition: 200ms ease-out; } #uploader .filelist li img { width: 100%; } #uploader .filelist li p.error { background: #f43838; color: #fff; position: absolute; bottom: 0; left: 0; height: 28px; line-height: 28px; width: 100%; z-index: 100; } #uploader .filelist li .success { display: block; position: absolute; left: 0; bottom: 0; height: 40px; width: 100%; z-index: 200; background: url(images/success.png) no-repeat right bottom; } #uploader .filelist div.file-panel { position: absolute; height: 0; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0; background: rgba( 0, 0, 0, 0.5 ); width: 100%; top: 0; left: 0; overflow: hidden; z-index: 300; } #uploader .filelist div.file-panel span { width: 24px; height: 24px; display: inline; float: right; text-indent: -9999px; overflow: hidden; background: url(images/icons.png) no-repeat; margin: 5px 1px 1px; cursor: pointer; } #uploader .filelist div.file-panel span.rotateLeft { background-position: 0 -24px; } #uploader .filelist div.file-panel span.rotateLeft:hover { background-position: 0 0; } #uploader .filelist div.file-panel span.rotateRight { background-position: -24px -24px; } #uploader .filelist div.file-panel span.rotateRight:hover { background-position: -24px 0; } #uploader .filelist div.file-panel span.cancel { background-position: -48px -24px; } #uploader .filelist div.file-panel span.cancel:hover { background-position: -48px 0; } #uploader .statusBar { height: 63px; border-top: 1px solid #dadada; padding: 0 20px; line-height: 63px; vertical-align: middle; position: relative; } #uploader .statusBar .progress { border: 1px solid #1483d8; width: 198px; background: #fff; height: 18px; position: relative; display: inline-block; text-align: center; line-height: 20px; color: #6dbfff; position: relative; margin: 0 10px 0 0; } #uploader .statusBar .progress span.percentage { width: 0; height: 100%; left: 0; top: 0; background: #1483d8; position: absolute; } #uploader .statusBar .progress span.text { position: relative; z-index: 10; } #uploader .statusBar .info { display: inline-block; font-size: 14px; color: #666666; } #uploader .statusBar .btns { position: absolute; top: 10px; right: 20px; line-height: 40px; } #filePicker2 { display: inline-block; float: left; } #uploader .statusBar .btns .webuploader-pick, #uploader .statusBar .btns .uploadBtn, #uploader .statusBar .btns .uploadBtn.state-uploading, #uploader .statusBar .btns .uploadBtn.state-paused { background: #ffffff; border: 1px solid #cfcfcf; color: #565656; padding: 0 18px; display: inline-block; border-radius: 3px; margin-left: 10px; cursor: pointer; font-size: 14px; float: left; } #uploader .statusBar .btns .webuploader-pick-hover, #uploader .statusBar .btns .uploadBtn:hover, #uploader .statusBar .btns .uploadBtn.state-uploading:hover, #uploader .statusBar .btns .uploadBtn.state-paused:hover { background: #f0f0f0; } #uploader .statusBar .btns .uploadBtn { background: #00b7ee; color: #fff; border-color: transparent; } #uploader .statusBar .btns .uploadBtn:hover { background: #00a2d4; } #uploader .statusBar .btns .uploadBtn.disabled { pointer-events: none; opacity: 0.6; }
界面html
<div id="uploader" class="wu-example"> <div class="queueList"> <div id="dndArea" class="placeholder"> <div id="filePicker" class="webuploader-container"><div class="webuploader-pick">点击选择图片</div><div id="rt_rt_1binnblu91uid10p812ar8849nh1" style="position: absolute; top: 0px; left: 134.5px; width: 168px; height: 44px; overflow: hidden; bottom: auto; right: auto;"><input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*"><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label></div></div> <p>或将照片拖到这里，单次最多可选300张</p> </div> <ul class="filelist"></ul> </div> <div class="statusBar" style="display:none;"> <div class="progress" style="display: none;"> <span class="text">0%</span> <span class="percentage" style="width: 0%;"></span> </div><div class="info">共0张（0B），已上传0张</div> <div class="btns"> <div id="filePicker2" class="webuploader-container"><div class="webuploader-pick">继续添加</div><div id="rt_rt_1binnbluc18pevlkb9b101q1hvq6" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;"><input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*"><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label></div></div><div class="uploadBtn state-pedding">开始上传</div> </div> </div> </div>
js代码
<script type="text/javascript"> jQuery(function () { var $ = jQuery, // just in case. Make sure it's not an other libaray. $wrap = $('#uploader'), // 图片容器 $queue = $('<ul class="filelist"></ul>') .appendTo($wrap.find('.queueList')), // 状态栏，包括进度和控制按钮 $statusBar = $wrap.find('.statusBar'), // 文件总体选择信息。 $info = $statusBar.find('.info'), // 上传按钮 $upload = $wrap.find('.uploadBtn'), // 没选择文件之前的内容。 $placeHolder = $wrap.find('.placeholder'), // 总体进度条 $progress = $statusBar.find('.progress').hide(), // 添加的文件数量 fileCount = 0, // 添加的文件总大小 fileSize = 0, // 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio, // 可能有pedding, ready, uploading, confirm, done. state = 'pedding', // 所有文件的进度信息，key为file id percentages = {}, supportTransition = (function () { var s = document.createElement('p').style, r = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; s = null; return r; })(), // WebUploader实例 uploader; if (!WebUploader.Uploader.support()) { alert('Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器'); throw new Error('WebUploader does not support the browser you are using.'); } // 实例化 uploader = WebUploader.create({ pick: { id: '#filePicker', label: '点击选择图片' }, dnd: '#uploader .queueList', paste: document.body, accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }, // swf文件路径 swf: '/lib/webuploader/0.1.5/Uploader.swf', disableGlobalDnd: true, chunked: true, // server: 'http://webuploader.duapp.com/server/fileupload.php', server: '/House/Pics_Upload', formData:{houseId:@Model}, fileNumLimit: 300, fileSizeLimit: 5 * 1024 * 1024, // 200 M fileSingleSizeLimit: 1 * 1024 * 1024 // 50 M }); // 添加“添加文件”的按钮， uploader.addButton({ id: '#filePicker2', label: '继续添加' }); // 当有文件添加进来时执行，负责view的创建 function addFile(file) { var $li = $('<li id="' + file.id + '">' + '<p class="title">' + file.name + '</p>' + '<p class="imgWrap"></p>' + '<p class="progress"><span></span></p>' + '</li>'), $btns = $('<div class="file-panel">' + '<span class="cancel">删除</span>' + '<span class="rotateRight">向右旋转</span>' + '<span class="rotateLeft">向左旋转</span></div>').appendTo($li), $prgress = $li.find('p.progress span'), $wrap = $li.find('p.imgWrap'), $info = $('<p class="error"></p>'), showError = function (code) { switch (code) { case 'exceed_size': text = '文件大小超出'; break; case 'interrupt': text = '上传暂停'; break; default: text = '上传失败，请重试'; break; } $info.text(text).appendTo($li); }; if (file.getStatus() === 'invalid') { showError(file.statusText); } else { // todo lazyload $wrap.text('预览中'); uploader.makeThumb(file, function (error, src) { if (error) { $wrap.text('不能预览'); return; } var img = $('<img src="' + src + '">'); $wrap.empty().append(img); }, thumbnailWidth, thumbnailHeight); percentages[file.id] = [file.size, 0]; file.rotation = 0; } file.on('statuschange', function (cur, prev) { if (prev === 'progress') { $prgress.hide().width(0); } else if (prev === 'queued') { $li.off('mouseenter mouseleave'); $btns.remove(); } // 成功 if (cur === 'error' || cur === 'invalid') { console.log(file.statusText); showError(file.statusText); percentages[file.id][1] = 1; } else if (cur === 'interrupt') { showError('interrupt'); } else if (cur === 'queued') { percentages[file.id][1] = 0; } else if (cur === 'progress') { $info.remove(); $prgress.css('display', 'block'); } else if (cur === 'complete') { $li.append('<span class="success"></span>'); } $li.removeClass('state-' + prev).addClass('state-' + cur); }); $li.on('mouseenter', function () { $btns.stop().animate({ height: 30 }); }); $li.on('mouseleave', function () { $btns.stop().animate({ height: 0 }); }); $btns.on('click', 'span', function () { var index = $(this).index(), deg; switch (index) { case 0: uploader.removeFile(file); return; case 1: file.rotation += 90; break; case 2: file.rotation -= 90; break; } if (supportTransition) { deg = 'rotate(' + file.rotation + 'deg)'; $wrap.css({ '-webkit-transform': deg, '-mos-transform': deg, '-o-transform': deg, 'transform': deg }); } else { $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')'); // use jquery animate to rotation // $({ // rotation: rotation // }).animate({ // rotation: file.rotation // }, { // easing: 'linear', // step: function( now ) { // now = now * Math.PI / 180; // var cos = Math.cos( now ), // sin = Math.sin( now ); // $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')"); // } // }); } }); $li.appendTo($queue); } // 负责view的销毁 function removeFile(file) { var $li = $('#' + file.id); delete percentages[file.id]; updateTotalProgress(); $li.off().find('.file-panel').off().end().remove(); } function updateTotalProgress() { var loaded = 0, total = 0, spans = $progress.children(), percent; $.each(percentages, function (k, v) { total += v[0]; loaded += v[0] * v[1]; }); percent = total ? loaded / total : 0; spans.eq(0).text(Math.round(percent * 100) + '%'); spans.eq(1).css('width', Math.round(percent * 100) + '%'); updateStatus(); } function updateStatus() { var text = '', stats; if (state === 'ready') { text = '选中' + fileCount + '张图片，共' + WebUploader.formatSize(fileSize) + '。'; } else if (state === 'confirm') { stats = uploader.getStats(); if (stats.uploadFailNum) { text = '已成功上传' + stats.successNum + '张照片至XX相册，' + stats.uploadFailNum + '张照片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>' } } else { stats = uploader.getStats(); text = '共' + fileCount + '张（' + WebUploader.formatSize(fileSize) + '），已上传' + stats.successNum + '张'; if (stats.uploadFailNum) { text += '，失败' + stats.uploadFailNum + '张'; } } $info.html(text); } function setState(val) { var file, stats; if (val === state) { return; } $upload.removeClass('state-' + state); $upload.addClass('state-' + val); state = val; switch (state) { case 'pedding': $placeHolder.removeClass('element-invisible'); $queue.parent().removeClass('filled'); $queue.hide(); $statusBar.addClass('element-invisible'); uploader.refresh(); break; case 'ready': $placeHolder.addClass('element-invisible'); $('#filePicker2').removeClass('element-invisible'); $queue.parent().addClass('filled'); $queue.show(); $statusBar.removeClass('element-invisible'); uploader.refresh(); break; case 'uploading': $('#filePicker2').addClass('element-invisible'); $progress.show(); $upload.text('暂停上传'); break; case 'paused': $progress.show(); $upload.text('继续上传'); break; case 'confirm': $progress.hide(); $upload.text('开始上传').addClass('disabled'); stats = uploader.getStats(); if (stats.successNum && !stats.uploadFailNum) { setState('finish'); return; } break; case 'finish': stats = uploader.getStats(); if (stats.successNum) { alert('上传成功'); } else { // 没有成功的图片，重设 state = 'done'; location.reload(); } break; } updateStatus(); } uploader.onUploadProgress = function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress span'); $percent.css('width', percentage * 100 + '%'); percentages[file.id][1] = percentage; updateTotalProgress(); }; uploader.onFileQueued = function (file) { fileCount++; fileSize += file.size; if (fileCount === 1) { $placeHolder.addClass('element-invisible'); $statusBar.show(); } addFile(file); setState('ready'); updateTotalProgress(); }; uploader.onFileDequeued = function (file) { fileCount--; fileSize -= file.size; if (!fileCount) { setState('pedding'); } removeFile(file); updateTotalProgress(); }; uploader.on('all', function (type) { var stats; switch (type) { case 'uploadFinished': setState('confirm'); break; case 'startUpload': setState('uploading'); break; case 'stopUpload': setState('paused'); break; } }); uploader.onError = function (code) { alert('Eroor: ' + code); }; $upload.on('click', function () { if ($(this).hasClass('disabled')) { return false; } if (state === 'ready') { uploader.upload(); } else if (state === 'paused') { uploader.upload(); } else if (state === 'uploading') { uploader.stop(); } }); $info.on('click', '.retry', function () { uploader.retry(); }); $info.on('click', '.ignore', function () { alert('todo'); }); $upload.addClass('state-' + state); updateTotalProgress(); }); </script>
后台上传和使用CodeCarvings生成缩略图和水印的代码
需要使用nuget安装CodeCarvings.Piczard
public JsonResult Pics_Upload(int houseId,HttpPostedFileBase file) { string md5 = CommonHelper.CalcMD5(file.InputStream); string ext = Path.GetExtension(file.FileName); string path = "/upload/" + DateTime.Now.ToString("yyyy/MM/dd") + "/" + md5 + ext;// /upload/2017/07/07/afadsfa.jpg string thumbPath = "/upload/" + DateTime.Now.ToString("yyyy/MM/dd") + "/" + md5 + "_thumb" + ext; string fullPath = HttpContext.Server.MapPath("~" + path);//d://22/upload/2017/07/07/afadsfa.jpg string thumbFullPath = HttpContext.Server.MapPath("~" + thumbPath); new FileInfo(fullPath).Directory.Create();//尝试创建可能不存在的文件夹 file.InputStream.Position = 0;//指针复位 //file.SaveAs(fullPath);//SaveAs("d:/1.jpg"); //缩略图 ImageProcessingJob jobThumb = new ImageProcessingJob(); jobThumb.Filters.Add(new FixedResizeConstraint(200, 200));//缩略图尺寸200*200 jobThumb.SaveProcessedImageToFileSystem(file.InputStream, thumbFullPath); file.InputStream.Position = 0;//指针复位 //水印 ImageWatermark imgWatermark = new ImageWatermark(HttpContext.Server.MapPath("~/images/watermark.jpg")); imgWatermark.ContentAlignment = System.Drawing.ContentAlignment.BottomRight;//水印位置 imgWatermark.Alpha = 50;//透明度，需要水印图片是背景透明的png图片 ImageProcessingJob jobNormal = new ImageProcessingJob(); jobNormal.Filters.Add(imgWatermark);//添加水印 jobNormal.Filters.Add(new FixedResizeConstraint(600, 600)); jobNormal.SaveProcessedImageToFileSystem(file.InputStream, fullPath); HouseSrv.AddNewHousePic(new HousePicDTO { HouseId = houseId, Url = path, ThumbUrl = thumbPath }); CreateStaticPage(houseId);//上传了新图片或者删除图片都要重新生成html页面 return Json(AjaxResult.Init(true)); }
