【问题标题】:Web Api 2 multiple image upload with jquery or angularjsWeb Api 2 使用 jquery 或 angularjs 上传多张图片
【发布时间】:2015-11-07 18:32:36
【问题描述】:
我正在使用 Asp.Net Web Api 2 和 Angularjs 开发一个 RESTFUL 应用程序。我从来没有按照我计划的方式上传图片,如果有人可以教育我一点,给我一些例子或至少一篇文章开始,我将不胜感激。
我真正想做的是以下几点:
1. 可以同时上传多张图片,在整个记录保存到数据库之前,它们的预览会出现在浏览器上。
2.我想把图片直接存到磁盘上,但是路径要以字符串的形式存入数据库。
我需要服务器端和客户端开发方面的帮助。在客户端,任何 Angularjs 或 JQuery 库都是可以接受的。
【问题讨论】:
标签:
jquery
angularjs
file-upload
asp.net-web-api2
image-upload
【解决方案1】:
您好,您需要创建一个 Multipart Formatter 来支持多个文件上传。 Example here
在示例中,他们有一个 e2e 示例,将图像写入磁盘。你只需要适应在DB中写入fileUrl即可。
我从未使用 AngularJs 上传图片,但这个 library 看起来很棒。
编辑:这是一个多部分请求的示例,需要定义一个边界来分隔图像。注意最后一个边界应该有一个前缀 -- 来标记请求的结束。
POST http://yourendpoint/api/images HTTP/1.1
内容类型:multipart/form-data;边界=--你的边界
----你的边界
内容处置:表单数据;名称=“图像1”;文件名=“image1.gif”
内容类型:图片/gif
ImageBytes...asodnaoisdaisndaosind
内容处置:表单数据;名称=“图像2”;文件名="image2.png"
内容类型:图片/png
ImageBytes...asodnaoisdaisndaosind
----你的边界
内容处置:表单数据;名称=“图像3”;文件名="image3.jpg"
内容类型:图片/jpg
ImageBytes...asodnaoisdaisndaosind
----你的边界--