WebApi两种上传图片
一、表单提交：
#region 表单提上传图片 [HttpPost, System.Web.Http.Cors.EnableCors(origins: "*", headers: "*", methods: "*")] public async Task<string> ImgFormUploadToken() { ResultInfo resinfo = new ResultInfo(); //获取验证token string accessToken = HttpContext.Current.Request.Params["accessToken"]; if (string.IsNullOrEmpty(accessToken)) return resinfo.ToString(); string valaidUrl = Klongiot.volunteers.FileUpload.Models.ConstantVar.imgLoadTokenWebApi + "Values/IsCheckToken"; resinfo = await Kinglong.Common.HttpHelper.GetOauthPostResInfo(valaidUrl, accessToken, null); //验证失败 if (!resinfo.res) { resinfo.info = "token验证失败！无权限上传图片！"; return resinfo.ToString(); } return await ImgFormUpload(); } [HttpPost] public async Task<string> ImgFormUpload() { Kinglong.Common.ResultInfo cResInfo = new Kinglong.Common.ResultInfo(); //检查是否 multipart/form-data if (!Request.Content.IsMimeMultipartContent("form-data")) { cResInfo.info = "没有要上传的图片！"; return cResInfo.ToString(); } string folderName = HttpContext.Current.Request.Params["folderName"]; string fileName = HttpContext.Current.Request.Params["fileName"]; //文件保存目录路径 string saveTempPath = "/UpLoadFiles"; string resTempPath = ""; if (!string.IsNullOrEmpty(folderName)) { resTempPath += "/" + folderName; saveTempPath += "/" + folderName; } string dirTempPath = HttpContext.Current.Server.MapPath(saveTempPath); if (!System.IO.Directory.Exists(dirTempPath)) { System.IO.Directory.CreateDirectory(dirTempPath); } //判断目录是否存在 //设置上传目录 MultipartFormDataStreamProvider provider = new MultipartFormDataStreamProvider(dirTempPath); await Request.Content.ReadAsMultipartAsync(provider); foreach (MultipartFileData file in provider.FileData) { //这里获取含有双引号'" ' string filename = file.Headers.ContentDisposition.FileName.Trim('"'); //获取对应文件后缀名 string fileExt = filename.Split('.')[1]; System.IO.FileInfo fileInfo = new System.IO.FileInfo(file.LocalFileName); //fileinfo.Name 上传后的文件路径 此处不含后缀名 //修改文件名 添加后缀名 if (string.IsNullOrEmpty(fileName)) fileName = Guid.NewGuid().ToString(); resTempPath += "/" + fileName + "." + fileExt; string saveUrl = dirTempPath + "/" + fileName + "." + fileExt; try { fileInfo.MoveTo(saveUrl); cResInfo.attr["path"] = resTempPath; cResInfo.res = true; } catch (FileLoadException exf) { continue; } } cResInfo.StatusCode = "200"; cResInfo.info = "success"; return cResInfo.ToString(); } #endregion
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="Content/quoteJs/webuploader/webuploader.css" rel="stylesheet" /> <script src="Content/quoteJs/jquery-2.1.4.min.js"></script> <script src="Content/quoteJs/webuploader/webuploader.js"></script> <script src="Content/quoteJs/jquery.form.js"></script> <script type="text/javascript"> $(function () { // 初始化Web Uploader var uploader = WebUploader.create({ // 选完文件后，是否自动上传。 auto: true, // swf文件路径 swf: 'Content/quoteJs/webuploader/Uploader.swf', // 文件接收服务端。 //server: 'http://192.168.1.147:91/api/Upload/ImgFormUpload', server: 'http://192.168.1.147:91/api/Upload/ImgBasicUpload', method:'POST', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#filePicker', withCredentials: true, sendAsBinary:true, // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); var $list = $('#fileList'); uploader.on('fileQueued', function (file) { var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>' ), $img = $li.find('img'); // $list为容器jQuery实例 $list.append($li); // 创建缩略图 // 如果为非图片文件，可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb(file, function (error, src) { if (error) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr('src', src); }, 50, 50); }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress span'); // 避免重复创建 if (!$percent.length) { $percent = $('<p class="progress"><span></span></p>') .appendTo($li) .find('span'); } $percent.css('width', percentage * 100 + '%'); }); //uploader.on('uploadBeforeSend', function (obj, data, headers) { // $.extend(headers, { // "Origin": "*" // }); //}); // 文件上传成功，给item添加成功class, 用样式标记上传成功。 uploader.on('uploadSuccess', function (file) { $('#' + file.id).addClass('upload-state-done'); }); // 文件上传失败，显示上传出错。 uploader.on('uploadError', function (file) { var $li = $('#' + file.id), $error = $li.find('div.error'); // 避免重复创建 if (!$error.length) { $error = $('<div class="error"></div>').appendTo($li); } $error.text('上传失败'); }); // 完成上传完了，成功或者失败，先删除进度条。 uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').remove(); }); }); </script> </head> <body> <form> <!--dom结构部分--> <div id="uploader-demo"> <!--用来存放item--> <div id="fileList" class="uploader-list"></div> <div id="filePicker">选择图片</div> </div> </form>
</body>
第二种basic64上传，作app上传图片使用比较多。
#region 二进制文件上传认证 /// <summary> /// 需要走oauth 验证 才能上传图片 /// </summary> /// <param name="quePara"></param> /// <returns></returns> [HttpPost, System.Web.Http.Cors.EnableCors(origins: "*", headers: "*", methods: "*")] public async Task<string> ImgBasicUploadToken([FromBody]JObject quePara) { ResultInfo resinfo = new ResultInfo(); //获取验证token string accessToken = quePara["accessToken"] == null ? "" : quePara["accessToken"].ToString(); if (string.IsNullOrEmpty(accessToken)) return resinfo.ToString(); Dictionary<string, string> postPara = new Dictionary<string, string>(); postPara["dictPara"] = "12"; string valaidUrl = Klongiot.volunteers.FileUpload.Models.ConstantVar.imgLoadTokenWebApi + "Values/IsCheckToken"; resinfo = await Kinglong.Common.HttpHelper.GetOauthPostResInfo(valaidUrl, accessToken, postPara); //验证失败 if (!resinfo.res) { resinfo.info = "token验证失败！无权限上传图片！"; return resinfo.ToString(); } return await ImgBasicUpload(quePara); } /// <summary> /// 局域网不需要验证即可上传 /// </summary> /// <param name="quePara"></param> /// <returns></returns> [HttpPost] public async Task<string> ImgBasicUpload([FromBody]JObject quePara) { ResultInfo cResInfo = new ResultInfo(); if (quePara == null) { return cResInfo.ToString(); } string file = quePara["file"] == null ? "" : quePara["file"].ToString(); string folderName = quePara["folderName"] == null ? "" : quePara["folderName"].ToString(); string fileName = quePara["fileName"] == null ? "" : quePara["fileName"].ToString(); if (string.IsNullOrEmpty(file)) return cResInfo.ToString(); try { byte[] bt = Convert.FromBase64String(file); System.IO.MemoryStream stream = new System.IO.MemoryStream(bt); System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(stream); string saveTempPath = "/UpLoadFiles"; string resTempPath = ""; if (!string.IsNullOrEmpty(folderName)) { saveTempPath += "/" + folderName; resTempPath += "/" + folderName; } string dirTempPath = System.Web.Hosting.HostingEnvironment.MapPath(saveTempPath); // string dirTempPath = HttpContext.Current.Server.MapPath(saveTempPath); if (!System.IO.Directory.Exists(dirTempPath)) { System.IO.Directory.CreateDirectory(dirTempPath); } //如果没有名字使用guid命名 if (string.IsNullOrEmpty(fileName)) fileName = Guid.NewGuid().ToString(); resTempPath += "/" + fileName + ".jpg"; dirTempPath += "/" + fileName + ".jpg"; bitmap.Save(dirTempPath); cResInfo.attr["path"] = resTempPath; cResInfo.res = true; } catch (Exception ex) { throw; } return cResInfo.ToString(); } #endregion
$(function () { //初始化 $('#file').ImgBasic64Upload({ isEnableChange: true , url: "/api/Upload/ImgBasicUpload" , ajaxSucCall: function (d) { alert(JSON.stringify(d)); } }); }); ; (function ($) { //主方法 $.fn.ImgBasic64Upload = function (optOrMenthName, _options) { // 方法调用 var $this = $(this), thsId = $this.attr('id'); optOrMenthName = optOrMenthName || {}; var stateOption = $this.data(thsId); if (stateOption) { $.fn.ImgBasic64Upload.Options = $.extend(stateOption, optOrMenthName); } else { $.fn.ImgBasic64Upload.Options = $.extend(defaults, optOrMenthName); $this.data(thsId, $.fn.ImgBasic64Upload.Options); } if (typeof optOrMenthName == 'string') { return methods[method](this, _options); } if ($.fn.ImgBasic64Upload.Options.isEnableChange) { $this.on('change', function (e) { methods['fileOnChange']($this,e); }); } }; var defaults = { //是否启用fileOnchange事件 isEnableChange: false, //是否启用缩略图 isDramImg: true , outputFormat: '' //缩略图宽 , width: 90 //缩略图高 , height: 90 , imgBasic64: '' //图片上传文件夹 , folderName: 'default' //自定义文件名 , fileName: '' ,accessToken:undefined , url: undefined , ajaxData: {} ,ajaxSucCall:function(d){ } }; var methods = { fileOnChange:function($this,e){ var file = $this[0].files[0]; var val = $this.val().split('.')[1]; if (val == 'png' || val == 'jpg' || val == 'jpeg' || val == 'JPEG' || val == 'JPG' || val == 'PNG') { //转换文件64位 var ready = new FileReader(); /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/ ready.readAsDataURL(file); ready.onload = function () { $.fn.ImgBasic64Upload.Options.imgBasic64 = this.result; //启用压缩图片 if ($.fn.ImgBasic64Upload.Options.isDramImg == true) { methods.dramImg($this); } else { uploadImg(basic64, "/api/Upload/ImgBasicUploadToken", "userimg", "001", undefined); } } } else { layer.alert('请选择图片上传'); } }, ////图片压缩 dramImg: function dramImg(ths, paras) { var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d'); var imgWidth = 0, imgHeight = 0, offsetX = 0, offsetY = 0; var resultBasic = undefined; var img = new Image; img.crossOrigin = 'Anonymous'; img.src = $.fn.ImgBasic64Upload.Options.imgBasic64; img.onload = function () { imgWidth = img.width; imgHeight = img.height; if (imgWidth > imgHeight) { imgWidth = $.fn.ImgBasic64Upload.Options.width * imgWidth / imgHeight; imgHeight = $.fn.ImgBasic64Upload.Options.width; offsetX = -Math.round((imgWidth - $.fn.ImgBasic64Upload.Options.width) / 2); } else { imgHeight = $.fn.ImgBasic64Upload.Options.width * imgHeight / imgWidth; imgWidth = $.fn.ImgBasic64Upload.Options.width; offsetY = -Math.round((imgHeight - $.fn.ImgBasic64Upload.Options.width) / 2); } imgHeight = imgHeight != NaN ? imgHeight : 0; offsetY = offsetY != NaN ? offsetY : 0; canvas.height = $.fn.ImgBasic64Upload.Options.height; canvas.width = $.fn.ImgBasic64Upload.Options.width; ctx.drawImage(img, offsetX, offsetY, imgWidth, imgHeight); if (!$.fn.ImgBasic64Upload.Options.outputFormat || $.fn.ImgBasic64Upload.Options.outputFormat == '') outputFormat = 'image/jpeg'; $.fn.ImgBasic64Upload.Options.imgBasic64 = canvas.toDataURL(outputFormat); methods.uploadImg(ths); //上传图片 }; //while (!resultBasic) { //} //return resultBasic; }, uploadImg: function (ths) { var opt = $.fn.ImgBasic64Upload.Options; //if (!opt.accessToken) { // alert("accessToken不能为空！"); // return false; //} if (!opt.url) { alert("图片上传Url不能为空！"); return false; } opt.ajaxData = $.extend(opt.ajaxData, { "file": opt.imgBasic64.split(",")[1] , 'folderName': opt.folderName, "fileName": opt.fileName , "accessToken": opt.accessToken }); $.ajax({ type: 'POST', url: opt.url, //contentType: "application/json", data: opt.ajaxData, dataType: 'JSON', success: function (data) { if (typeof ($.fn.ImgBasic64Upload.Options.ajaxSucCall) == 'function') { $.fn.ImgBasic64Upload.Options.ajaxSucCall(data); } }, error: function (data) { } }); } } //methods 结束 })(jQuery);
