基于.net mvc的多图片上传预览保存

1、使用到的技术和操作流程说明

A、使用JavaScript、jquery、.net mvc3.0。

B、点击+号按钮在上传图片信息发生变化时，通过异步的ajax请求把图片信息发送到后台保存，保存成功后返回图片的ID和url信息到前台。进行预览信息的加载！

C、点击保存，把页面上的的图片ID和url传递到后台，将图片的信息保存到数据库，这里传递的参数可以根据需要进行自定义。

2、使用ajax上传文件（图片）

A、先封装了一个 formData 对象，然后使用 post 方法将文件传给服务器。本来http 协议中没有上传文件方面的功能，直到 rfc1867 为 http 协议添加了这个功能。当然在 rfc1867 中限定 form 的 method 必须为 POST ， enctype = “multipart/form-data” 以及<input type = "file">。

 

B、发现在 multipart/form-data 后面有boundary以及一串字符，这是分界符，后面的一堆字符串是随机生成的，目的是防止上传文件中出现分界符导致服务器无法正确识别文件起始位置。

 

如果请求的Content-Type设置为application/x-www-form-urlencoded，那么这个Post请求被认为是HTTP POST表单请求，参数出现在Form data 区域。这里的出现在request payload 的文件信息是因为请求的content-type = image/jpeg 形式。

C、ajax参数contentType 必须设置为false。ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。

 

D、后台接收数据的处理

HttpRequestBase 类接收相关参数，此类用作一些类的基类，这些类使 ASP.NET 可以读取客户端在 Web 请求过程中发送的 HTTP 值，这里是获取客户端上传的文件集合。

 

效果演示：

 

图片上传保存预览

 

 

提交json格式形式数据到后台

 

 

保存到服务器端的图片信息：

 

 附件下载地址：

资源下载