最近的项目中用到webUploader的地方比较多,总结了几种图片上传的情况。
必要的引用
第一,只上传缩略图
页面html
@if (Model==null||string.IsNullOrEmpty(Model.Cover)) { } else {
} @Html.HiddenFor(m=>m.Cover)
选择图片
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代码
@if (Model == null) { "~/Images/blankimg.jpg" width="120" height="120" id="img" /> } else {
"~/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)
"uploader" class="wu-example" style="margin-top:10px">class="btns">"picker">选择图片
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页面
"2" rowspan="6" align="center"> @{ var path = "/Upload/STUDENT/"; var fileName = (Model != null && !string.IsNullOrWhiteSpace(Model.KSH) ? Model.KSH : "nonePhoto"); path = path + fileName + ".jpg"; } "200" height="250" src="@path" id="img_ZP" />
"uploader" class="wu-example" style="margin-top:10px">class="btns">"picker">选择图片
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的多图队列上传
引用
"~/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" /> "~/lib/webuploader/0.1.5/demo.css" rel="stylesheet" />
官方的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
"uploader" class="wu-example">class="queueList">"dndArea" class="placeholder">"filePicker" class="webuploader-container">class="webuploader-pick">点击选择图片"rt_rt_1binnblu91uid10p812ar8849nh1" style="position: absolute; top: 0px; left: 134.5px; width: 168px; height: 44px; overflow: hidden; bottom: auto; right: auto;">"file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">或将照片拖到这里,单次最多可选300张
class="filelist">
class="statusBar" style="display:none;">class="progress" style="display: none;"> class="text">0% class="percentage" style="width: 0%;">class="info">共0张(0B),已上传0张class="btns">"filePicker2" class="webuploader-container">class="webuploader-pick">继续添加"rt_rt_1binnbluc18pevlkb9b101q1hvq6" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;">"file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">class="uploadBtn state-pedding">开始上传
js代码
后台上传和使用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)); }