图片(文件)的上传

一、图片(文件)的上传。
文件的上传分两种：
第一种：直接保存到数据库。
第二种：把文件保存到硬盘上 ，把路径或名称到数据库。
但由于文件体积比较大，直接保存数据库会使数据库的响应速度的变慢，所以我们通常使用第二种。

1.从页面获取文件。
(1).通过 input file 标签 选择上传的文件。

(2).页面显示文件(文件预览)。
//文件读取器。
var imageReader = new FileReader();

$(“input”).change (function () {
//获取文件输入框里面的文件
var file = $(“input”).get(0).files[0];
//使用文件读取器读取文件。并把文件转为URL(Base64编码)
imageReader.readAsDataURL(file);
});

//文件读取器onload事件 在读取文件完成后触发
imageReader.onload = function (evt) {
$(“img”).attr(“src”, evt.target.result);//显示文件
}

(3).向控制器 发送数据。
var userPicture = $("#userPictureFile").get(0).files[0];//获取用户选择的文件.
//验证数据…

		//===发送请求

使用JQuery Ajax发送FormData数据
var form = new FormData();//构建FormData数据
form.append(“userPicture”, userPicture); //添加数据

//请求
$.ajax({
method: “post”,//文件上传时只能使用post提交，不能使用get提交
url:’@Url.Content("~/OthersMaintenance/OpenOffNumber/InsertUser")’,
data: form,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (msg) {
// 回调函数
}
});

或者使用 JS XMLHttpRequest上传文件
//创建FormData对象
var formData = new FormData();
//将数据添加到FormData
formData.append(“excelFile”, excelFile);
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//打开指定的URL 文件上传使用POST提交
xhr.open(“POST”, “@Url.Content(”~/OthersMaintenance/UserDataMaintain/ImportExcel")");
//设置回调方法
xhr.onload = function (data) {
//data.currentTarget.responseText 具体的返回内容
var msg = JSON.parse(data.currentTarget.responseText);//把返回的字符串反序列化为json 对象
}

2.控制器操作。
public ActionResult InsertUser(HttpPostedFileBase userPicture)
{
//验证数据…
//检查存放用户头像的目录是否存在
if (!System.IO.Directory.Exists(Server.MapPath("~/Document/userPicture/")))
{
//如果不存在就创建一个。
System.IO.Directory.CreateDirectory(Server.MapPath("~/Document/userPicture/"));
}

//获取文件的扩展名称
string imgExtension = System.IO.Path.GetExtension(userPicture.FileName);
//拼接要保存的文件名称 ，根据自己的需求去定义。
string fileName = DateTime.Now.ToString(“yyyyMMddHHmmssffff”) + “_” + Guid.NewGuid() + imgExtension;
//拼接文件保存的路径
string filePath = Server.MapPath("~/Document/userPicture/") + fileName;

//保存上传的文件到硬盘
userPicture.SaveAs(filePath);

//判断文件是否存在
//System.IO.File.Exists(filePath);

//删除文件
//System.IO.File.Delete(filePath);

//文件名称保存到user对象
user.picture = fileName;

//把user对象保存到数据库中
myModel.S_User.Add(user);
myModel.SaveChanges();//myModel.SaveChanges() > 0 ,保存成功。
}