前言
今天和大家分享关于 “图片上传并预览且保存在web站点下的目录文件夹”
a)同步提交（页面级提交）
前端代码
（1）通过form 表单；input type=“file” 标签类型为 file
<form id="form1" runat="server">
<div>
<input type="file" name="file" />
<input type="submit" value="上传" />
</div>
</form>
（2）将页面上的整个表单提交到服务端，并且刷新页面；
（3）如果包含文件，文件会被打包为字节流，上传到服务器；
（4）在后端中使用 Request 对象获取表单元素 input 标签；Request[“file”];这里面的 key值为input标签的name值。这里一定要注意！
（5）这个时候获取到的图片文件路径为 绝对路径
后端代码
string filePath = Request["file"];
if (filePath == null) return;
string filename = filePath.Substring(filePath.LastIndexOf("\\") + 1);
string fileEx = filePath.Substring(filePath.LastIndexOf(".") + 1);
string paths = filename.Substring(0, filename.IndexOf("."));
//合成站点下的站点下的images目录文件
string serverpath = Server.MapPath(@"~\images\") + filename;
//实例化并获取客户端上传的文件对象
System.Drawing.Image image = System.Drawing.Image.FromFile(filePath);
//保存图片至站点下的images目录文件
image.Save(serverpath);
image.Dispose();
（6） 使用字符串截取方法。获取文件(包括后缀)名称====> string filename = filePath.Substring(filePath.LastIndexOf("\") + 1);
（7） 使用字符串截取方法。获取文件的扩展名====> string fileEx = filePath.Substring(filePath.LastIndexOf(".") + 1);
（8） 使用字符串截取方法。获取文件(不包括后缀)名称====> string paths = filename.Substring(0, filename.IndexOf("."));
b)异步上传（通过ajax提交）
（1）一般情况下，访问webapi的时候上传数据使用的是JSON格式的数据传输方式；
（2）特殊情况下，如果要上传文件，使用FormData 对象来模拟form表单的提交；
（3）JS的FormData 对象会像同步提交 form 表单一样提交数据，就可以将文件也包含在FormData中一起提交；
前端
js代码
var form = new FormData();
form.append("file", $('#file')[0].files[0]);
$.ajax({
url: "/pages/WebAPI",
method: "post",
contentType: false,
processData: false,
dataType: false,
data: form,
success: function (result) {
//上传成功回调函数
}
});
（4）FormData的使用
var form = new FormData();
追加数据到formdata中；参数为数据名称和数据值的形式；
form.append(‘name’, value);
添加文件到formdata中；参数为名称和文件对象；这里的名称没有实际作用；但是又必须以 file 形式
form.append(‘file’, fileObj);
（5）大家可以看到这一条语句
form.append(“file”, $(’#file’)[0].files[0]); 中的
$(’#file’)[0].files[0]，那为什么会在 $(’#file’)加个[0]呢？
这一条语句代表的意思是获取 id 为file 标签的文件对象，那加个[0]是把 JQ语法转化成Javascript语法化
1） JQuery 中—— var fileObj = $(’#file’)[0].files[0];
2） JavaScript 中—— varfileObj=document.getElementById(‘file’).files[0];
所以.files[0] 属性是javascript里面的，所以JQ需要转化成JS使用。
>使用异步上传的注意点
（6）在使用FormData 对象上传数据的时候， 不允许get方式
（7）使用FormData 对象上传数据包含文件的时候， 直接使用 $.post()无效的
（8）使用FormData 对象上传数据包含文件的时候， 必须使用 $.ajax()方法
（9）提交方式必须为post。
$.ajax({
url: '',
method: 'post', //由于jq的版本问题，这个参数在有的地方也叫做type
dataType: 'json',
contentType: false, //必须是false
processData: false, //必须是false
success: function(){
}
})
图片预览
如果想图片预览，那么就简单多了
var file = $('#file')[0].files[0];
if (file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function (even) {
$('#file_img').attr("src", even.currentTarget.result);
}
}
后端代码
private string SaveImage()
{
string result = "";
if (!Directory.Exists(Server.MapPath("/images/Userimg")))
{
Directory.CreateDirectory(Server.MapPath("/images/Userimg"));
}
HttpPostedFile file = Request.Files[0];
if (!file.ContentType.Contains("image/"))
{
result = Newtonsoft.Json.JsonConvert.SerializeObject(new
{
Code = 10002,
Message = "传输文件格式不正确!"
});
}else{
Random ran = new Random();
String fileName ="img"+ran.Next(1000,9999).ToString();
String filesuffix = this.GetFileSuffix(file.ContentType);
String fullName = Path.Combine("/images/Userimg/", fileName + filesuffix);
file.SaveAs(Server.MapPath(fullName));
result = Newtonsoft.Json.JsonConvert.SerializeObject(new
{
Code = 10002,
Message = "传输文件格式不正确!"
});
}
return result;
}
/// <summary>
/// 获取图片文件的 扩展名
/// </summary>
/// <param name="mimeType"></param>
/// <returns></returns>
private string GetFileSuffix(string mimeType)
{
string suffix = string.Empty;
switch (mimeType)
{
case "image/png":
suffix = ".png";
break;
case "image/jpeg":
suffix = ".jpg";
break;
case "image/gif":
suffix = ".gif";
break;
default:
suffix = ".jpg";
break;
}
return suffix;
}
（1）判断将要上传的文件路径是否存在，如果不存在那么就创建。
（2）获取采用多部分MIME格式的由客户端上载的文件集合，也就是 HttpPostedFile file = Request.Files[0];
（3）判读当前文件对象的类型
（4）实现可以多次上传相同文件，避免产生没必要的错误，给他随机生成四位数字且重命名
（5）HttpPostedFile 可提供直接保存对象【SaveAs（）】，仅提供保存文件地址的参数就好了。
应用效果
那小项目一般将文件保存在站点目录文件中到底是为什么？
a)保证访问目录的正确性
b)保证文件的可访问性（最重要的原因）
c）当项目发布以后，访问文件的用户是IIS_USER，如果在其他目录，没有访问权限；
最后
好了今天的学习整理就到此结束了。欢迎指出不足，诚恳接受批评。