.NET WebAPI 实现图片上传(包括附带参数上传图片)
博主的项目,客户端是APP,考虑到以后也可能会应用到微信端、网站等,图片上传方法就需要兼容多端,并且以目前的设计,不允许非登录用户上传图片,就得在上传时解决附带参数上传图片的问题。
先来看看后台方法(逻辑都写在了一起,有点乱,分布式文件系统还没做好,暂时存在了本地...):
1 /// <summary> 2 /// 图片上传 [FromBody]string token 3 /// </summary> 4 /// <returns></returns> 5 [HttpPost] 6 [Route("api/Upload/ImgUpload")] 7 public Task<Hashtable> ImgUpload() 8 { 9 // 检查是否是 multipart/form-data 10 if (!Request.Content.IsMimeMultipartContent("form-data")) 11 throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); 12 13 // 文件保存目录路径 14 const string saveTempPath = "~/UploadFiles/"; 15 var dirTempPath = HttpContext.Current.Server.MapPath(saveTempPath); 16 17 // 设置上传目录 18 var provider = new MultipartFormDataStreamProvider(dirTempPath); 19 20 var task = Request.Content.ReadAsMultipartAsync(provider). 21 ContinueWith<Hashtable>(o => 22 { 23 var hash = new Hashtable(); 24 var file = provider.FileData[0]; 25 // 最大文件大小 26 const int maxSize = 10000000; 27 // 定义允许上传的文件扩展名 28 const string fileTypes = "gif,jpg,jpeg,png,bmp"; 29 30 // token验证 31 var token = string.Empty; 32 try 33 { 34 token = provider.FormData["token"].ToString(); 35 } 36 catch (Exception exception) 37 { 38 throw new Exception("未附带token,非法访问!", exception); 39 } 40 41 if (!string.IsNullOrEmpty(token)) 42 { 43 if (!CacheManager.TokenIsExist(token)) 44 { 45 throw new UserLoginException("Token已失效,请重新登陆!"); 46 } 47 if (accountInfoService.Exist_User_IsForzen(AccountHelper.GetUUID(token))) 48 { 49 CacheManager.RemoveToken(token); 50 tempCacheService.Delete_OneTempCaches(new Guid(token)); 51 throw new UserLoginException("此用户已被冻结,请联系管理员(客服)!"); 52 } 53 } 54 else 55 { 56 throw new Exception("token为空,非法访问!"); 57 } 58 59 string orfilename = file.Headers.ContentDisposition.FileName.TrimStart('"').TrimEnd('"'); 60 var fileinfo = new FileInfo(file.LocalFileName); 61 if (fileinfo.Length <= 0) 62 { 63 hash["Code"] = -1; 64 hash["Message"] = "请选择上传文件。"; 65 } 66 else if (fileinfo.Length > maxSize) 67 { 68 hash["Code"] = -1; 69 hash["Message"] = "上传文件大小超过限制。"; 70 } 71 else 72 { 73 var fileExt = orfilename.Substring(orfilename.LastIndexOf('.')); 74 75 if (String.IsNullOrEmpty(fileExt) || 76 Array.IndexOf(fileTypes.Split(','), fileExt.Substring(1).ToLower()) == -1) 77 { 78 hash["Code"] = -1; 79 hash["Message"] = "不支持上传文件类型。"; 80 } 81 else 82 { 83 try 84 { 85 AttachmentFileResultDTO attachmentFileResult; 86 attachmentFileService.UploadAttachmentFile(fileinfo, dirTempPath, fileExt, 87 Path.GetFileNameWithoutExtension(file.LocalFileName), out attachmentFileResult); 88 89 hash["Code"] = 0; 90 hash["Message"] = "上传成功"; 91 hash["FileId"] = attachmentFileResult.ID; 92 hash["FileName"] = attachmentFileResult.FileName + attachmentFileResult.FileType; 93 hash["NetImageUrl"] = attachmentFileResult.FileUrl; 94 } 95 catch (Exception exception) 96 { 97 throw new Exception("上传失败!", exception); 98 } 99 } 100 } 101 return hash; 102 }); 103 return task; 104 }
注:
1.第31行至57行是对附带参数token进行验证,因为博主的需求是只开放登录用户上传图片
2.第34行一定要tostring(),因为我们的参数也是以二进制数据格式上传的
前台目前是以jquery做的测试,使用了ajaxfileupload.js来上传文件。不过博主下载的ajaxfileupload.js并不支持附带参数上传,不知道是不是没找到好资源,不管了,自己打开文件瞅瞅...源码也不长一两百行,那就自己动手改改呗。(如果你已下载到支持附带参数上传的js,请自动忽略这一部分)
找到createUploadForm这个函数,OK,顾名思义它是用来创建FORM的,看看博主下载版本的源码:
1 createUploadForm: function (id, fileElementId) { 2 //create form 3 var formId = 'jUploadForm' + id; 4 var fileId = 'jUploadFile' + id; 5 var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); 6 var oldElement = jQuery('#' + fileElementId); 7 var newElement = jQuery(oldElement).clone(); 8 jQuery(oldElement).attr('id', fileId); 9 jQuery(oldElement).before(newElement); 10 jQuery(oldElement).appendTo(form); 11 //set attributes 12 jQuery(form).css('position', 'absolute'); 13 jQuery(form).css('top', '-1200px'); 14 jQuery(form).css('left', '-1200px'); 15 jQuery(form).appendTo('body'); 16 return form; 17 },
我们添加参数data,并在第5行后面插入下列代码:
1 if (data) { 2 for (var i in data) { 3 if (data.hasOwnProperty(i)) { 4 jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); 5 } 6 } 7 }
再找到调用这个函数的地方,ajaxFileUpload函数中有这样一行:
var form = jQuery.createUploadForm(id, s.fileElementId);
OK,修改成我们重构后的调用:
var form = jQuery.createUploadForm(id, s.fileElementId,(typeof(s.data) == 'undefined' ? false : s.data));
到这一步,我们就可以jquery调用ajaxfileupload执行文件上传并且附带参数了。
1 $.ajaxFileUpload({ 2 url: "/api/Upload/ImgUpload", 3 secureuri: false, 4 fileUpload: file, 5 dataType: 'json', 6 data: { "token": token }, 7 success: function (data, status) { 8 var str = $(data).text(); 9 var result = JSON.parse(str); 10 successFn(result, key); 11 }, error: function (data, status, e) { 12 failFn(); 13 } 14 });
具体的ajaxfileupload.js下载路径:http://download.csdn.net/detail/cb511612371/9173749
附上做测试随意写的文件上传通用方法一份,可能有点丑...求轻喷(会有部分逻辑是博主测试的功能需求决定的,如使用,请自己过滤处理)
1 //图片上传 2 window.proHub = {}; 3 common = {}; 4 /**================================================================ 5 文件上传 6 =================================================================*/ 7 common.uploadTemplate = '<li class="fl pr">' + 8 '<div class="plus abs-mm fullLayer">' + 9 '<span class="abs-mm"></span>' + 10 '<span class="abs-mm"></span>' + 11 '</div>' + 12 '<img class="abs-mm hidden"/>' + 13 '<input class="file-input" type="file" name="file{0}" accept="image/*" οnchange="fileUploadChange(this);"/>' + 14 '<div class="file-img-del hidden"></div>' + 15 '</li>'; 16 17 // 文件上传 18 common.fileIndex = 0; 19 // 添加文件上传框 20 common.appendFileUpload = function ($container, imgData, key) { 21 var h = "hidden"; 22 23 var $list = $container.find("li"); 24 var t = $container.attr("limit");//1 25 var len = t === undefined ? 0 : t;//0 26 var canAdd = len != $list.length; 27 var $prev = $container.find("li:last"); 28 var str = common.uploadTemplate; 29 30 // 执行上传 31 if ($.trim($container.html()).length > 0) { 32 common.uploadImage(uploadResult, $container); 33 } 34 35 imgData && ($prev.find("img").removeClass(h).get(0).src = imgData); 36 $prev.find(".plus").addClass(h); 37 $prev.find("[type=file]").addClass(h); 38 $prev.find(".file-img-del").removeClass(h); 39 canAdd && $container.append(str.format(common.fileIndex)); 40 41 common.fileIndex++; 44 } 45 46 // 上传文件控件change 47 function fileUploadChange(fileControl) { 48 var imgClass = ".img-preview-list"; 49 var h = "hidden"; 50 viewFile(fileControl); 51 52 function viewFile(fileControl) { 53 var file = fileControl.files[0]; 54 56 var reader = new FileReader(); 57 reader.onload = function (evt) { 58 var data = evt.target.result; 59 var $par = $(fileControl).parents(imgClass); 60 common.appendFileUpload($par, data); 61 } 62 reader.readAsDataURL(file); 63 } 64 } 65 66 // 上传成功和删除图片回调方法 67 var imgUrl = { "head_img": null, "card_zheng": null, "card_fan": null, "certificate": null, "license": null }; 68 uploadResult = function (fileId, key) { 70 imgUrl[key] = fileId; 71 // 点击查看大图 72 $(".openPhoto img").click(function () { 73 $("#big_photo").attr("src", $(this).attr("src")); 74 $.fancybox.open($("#panel")); 75 }); 76 } 77 78 common.uploadImgInit = function () { 79 var imgClass = ".img-preview-list"; 80 var $box = $(imgClass); 81 82 $box.on("click", ".file-img-del", function () { 83 var $par = $(this).parents(imgClass); 84 var len = $par.find("li").length; 85 if (len == 1) { 86 var str = common.uploadTemplate; 87 $par.append(str); 88 } 89 uploadResult(null, $par.attr("key")); 90 $(this).parent().remove(); 91 }); 92 93 $box.each(function (index, item) { 94 95 common.appendFileUpload($(item)); 96 }); 97 }; 98 99 // 上传图片到服务器 100 common.uploadImage = function (submit, $box) { 101 var files = $box.find("[type=file]"); 102 var count = 0; 103 var imgKey = $box.attr("key"); 104 var map = {}; 105 106 $(files).each(function (index, item) { 107 if (item.files.length) { 108 imgKey = $(this).parent().parent().attr("key"); 109 count++; 110 proHub.uploadImage(item, successFn, failFn, imgKey); 111 } 112 }); 113 if (!count) { 114 submit(); 115 } 116 var curIndex = 0; 117 function successFn(result, key) { 118 if (result.Code == 0) { 119 map[key] = result["FileId"]; 120 curIndex++; 121 122 if (curIndex == count) { 123 submit(map[key], key); 124 } 125 } else { 126 Config.Method.JudgeCode(result, 1); 127 } 128 } 129 131 function failFn() { 132 alert("图片上传失败,请重试!"); 133 $(".file-img-del").click(); 134 } 135 } 136 137 proHub.uploadImage = function (file, successFn, failFn, key) { 138 $.ajaxFileUpload({ 139 url: "/api/Upload/ImgUpload", 140 secureuri: false, 141 fileUpload: file, 142 dataType: 'json', 143 data: { "token": token }, 144 success: function (data, status) { 145 var str = $(data).text(); 146 var result = JSON.parse(str); 147 successFn(result, key); 148 }, error: function (data, status, e) { 149 failFn(); 150 } 151 }); 152 };
如果有写的不好或不对的地方,欢迎指出,必定及时纠正,虚心请教。
原创文章,代码都是从自己项目里贴出来的。转载请注明出处哦,亲~~~
转载于:https://www.cnblogs.com/csqb-511612371/p/4871574.html
.NET WebAPI 实现图片上传(包括附带参数上传图片)相关推荐
- IOS5开发-http get/post调用mvc4 webapi互操作(图片上传)
目前最流行的跨平台交互是采用http协议通过JSON对象进行互操作.这种方式最简单,也很高效.webservice+xml的方式似乎已经过时. 下面是我做的一个例子 webapi的代码 View Co ...
- dede图片上传php,dedecms后台上传图片怎么实现图片轮播
dedecms后台上传图片怎么实现图片轮播? 用dedecms套网站已经做了几个了,但图片轮播始终是用手工改代码.今天研究了一下在后台上传图片来实现图片轮播的. 推荐学习:织梦cms 首先那当然是设置 ...
- java 移动页面中的图片上传_移动端上传图片(ajax跨域请求)
第一次写项目开发经验,望担待. 除了前端以外的事就不叨叨了,下面开始弄干活(两个页面首页.列表页). 项目 开发简述 项目需求:上传图片并展示. 项目地址:项目的链接地址 开发工具:sublime 后 ...
- php多图片上传并压缩,PHP 上传图片并压缩方法详解
使用到三个文件connect.php:连接数据库用 test_upload.php:执行SQL语句用 upload_img.php:上传图片并压缩用 三个文件代码如下: connect.php< ...
- C#文件上传同时附带参数上传
使用下面的方法就可以在上传文件的同时附带请求参数传递.方法内的部分请求参数可能需要修改. /// <summary>/// 文件上传/// </summary>/// < ...
- jsp 图片上传到oracle,jsp上传图片到数据库(oracle),并能在页面上显示解决办法
jsp上传图片到数据库(oracle),并能在页面上显示解决办法 jsp上传图片到数据库(oracle),并能在页面上显示解决办法 日期:2014-05-18 浏览次数:20341 次 jsp上传图片 ...
- html5七牛图片上传js,前端如何上传图片至七牛云
上传文件是我们在前端开发中经常遇到的一个问题.最近在做某项目管理后台的时候,需要将轮播图上传至七牛云.以前在Vue里面做过类似的功能,但是在Angular中使用同样的方法发现行不通. 此篇文章主要介绍 ...
- mvc ajax图片上传,MVC 通过ajaxSubmit上传图片并显示
js代码 function submitform() { $("#form_upload").ajaxSubmit({ success: showResponse }); } fu ...
- PHP图片上传水印代码,php上传图片并打上透明水印的代码
[www.citswd.com--热门资讯] php上传图片并打上透明水印的代码怎么做,以下是小编整理的php上传图片并打上透明水印的代码,供大家参考.就跟随百分网小编一起去了解下吧,想了解更多相关信 ...
最新文章
- maven编译时出现读取XXX时出错invalid LOC header (bad signature)
- 自己编写的MSN历史记录合并工具
- 安徽计算机省一级考试试题,安徽计算机一级考试试题及答案
- 数据结构基础 - 链表的遍历
- JDK 9早期版本安装后的Windows注册表清理
- [css] 说说你对媒体查询的理解
- asterisk使用SIP相互对接
- 【Python3网络爬虫开发实战】3.1-使用urllib
- 刚装的系统没有sql server(mssqlserver)_数据库与SQL学习
- jQuery 学习-样式篇(四):jQuery 设置和删除元素的属性
- 用Python自动化爬取CNKI知网数据(批量下载PDF论文)
- Oracle 之 AIO (异步io)
- java csv下载_javacsv.jar
- 面试官灵魂三问:什么是SOA?什么是微服务?SOA和微服务有什么区别?
- 注解的写法格式与作用
- 淘宝用户行为分析(一):点击—加购—收藏—购买
- Python 日志logging模块初探及多线程踩坑(2)
- 【汇正财经】什么是股票交割方式?股票交割方式有哪些?
- 机器学习之「二分类算法」-----银行营销案例分析
- 江西财经大学第二届程序设计竞赛同步赛----E-是不是复读机