前言
今天和大家分享关于 “图片上传并预览且保存在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,如果在其他目录,没有访问权限;
最后
好了今天的学习整理就到此结束了。欢迎指出不足,诚恳接受批评。