在日常的上传试题中我们常常会涉及到图片的上传，那么如何把图片上传到页面中呢？


下图是图片上传成功的样子，下面我们就来分析一下怎样写代码能实现这个效果

我们在控制器中创建一个方法，并给它一个参数file来接收页面传过来的数据
注：因为页面传过来的数据是文件，所以参数的类型必须是文件类型
public ActionResult UpEeditorFile(HttpPostedFileBase file) {
ReturnJson msg = new ReturnJson();实例化实体类ReturnJson，这里面有我们需要的字段
msg.State = false;记录返回值的状态
我们使用try catch来捕捉一下错误，防止这段代码出错导致后面的代码不能运行
try
{
第一步：我们首先要判断页面传输过来的数据不能为空，否则就提示用户“上传的文件为空”
if (file!=null)
{
第二步：获取文件类型 设置文件名称 检查文件目录是否存在
创建一个字符串类型的变量来获取文件类型
string fileExtension = Path.GetExtension(file.FileName);
通过当前时间创建文件名称可以保证文件名永远不会重复
string fileName = DateTime.Now.ToString(“yyyy-MM-dd”)
//表示全局唯一标识符 (GUID)
+ Guid.NewGuid()+ fileExtension;
检查目录是否存在,不存在就在项目中创建
if (!Directory.Exists(Server.MapPath("~/Document/Title/Temp/")))
{//创建目录/Document/ Title /Directory.CreateDirectory(Server.MapPath("~/Document/Title/Temp/"));
}
if (!Directory.Exists(Server.MapPath("~/Document/Title/Images/")))
{//创建目录/Document/ Title /Directory.CreateDirectory(Server.MapPath("~/Document/Title/Images/"));
}
最后通过代码实现的效果

           1     第三步：创建保存上传过来文件的路径
           2     string filePath = Server.MapPath("~/Document/Title/Temp/")+fileName;

若扩展名不为空则判断文件是否是指定图片类型 ,然后返回img，否则提示“只支持上传图片文件”
if (fileExtension!=null)
{
fileExtension = fileExtension.ToLower();//转小写字母
if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileExtension))
Contains()返回一个值，该值指示指定的子串是否出现在此字符串中，参数 value 要搜寻的字符串
{
将文件保存到指定路径
file.SaveAs(filePath);
创建保存img标签的字符串
string str = “<img “AutoResizeImage(150,150,this)” “+ “src=”/Document/Title/Temp/”+fileName+”"/>";
注：AutoResizeImage()是一个方法是用来设置传输过来图片的宽度和高度以免图片过大影响页面样式，此标签里保存的是最后的经过处理的图片，此处的“\”为转义
msg.State = true; 此时返回值为true
msg.Text = str;返回一个文本，也就是img标签
}
else
{
msg.Text = “只支持上传图片文件(gif,jpg,bmp,jpeg,png)”;
}
}
}
else
{
msg.Text = “上传的文件为空！”;
}
}
catch (Exception)
{
msg.Text = “上传数据异常！”;
}
return Json(msg, JsonRequestBehavior.AllowGet);
}
//1.7图片压缩
function AutoResizeImage(maxWidth, maxHeight, objImg) {
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth == 0 && maxHeight == 0) {
Ratio = 1;
} else if (maxWidth == 0) {//
if (hRatio < 1) Ratio = hRatio;
} else if (maxHeight == 0) {
if (wRatio < 1) Ratio = wRatio;
} else if (wRatio < 1 || hRatio < 1) {
Ratio = (wRatio <= hRatio ? wRatio : hRatio);
}
if (Ratio < 1) {
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;