MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】（八） ASP.NET MVC 图片上传到服务器

MVC图片上传、浏览、删除

 

1、存储配置信息

在web.config中，添加配置信息节点

<appSettings>
    <add key="UploadPath" value="D:\Uploads" />
</appSettings>

2、图片上传

html页面中

<div class="leftImage">
　　<input type="file" id="picAjax" class="customButton"/>
　　<span id="uploadInfo"></span>
　　<input type="button" id="submitPic" class="customButton" value="上传" />
</div>
<div class="rightImage">
　　<img id="selImg" src="" alt="" />
</div>

js中，选择图片事件

var picString = "";
$("#picAjax").change(function (e) {
　　var file = e.delegateTarget.files[0];
　　if (file.type == 'image/jpeg' || file.type == 'image/png') {
　　　　$("#uploadInfo").text("图片格式正确，请点击提交按钮");
　　　　var reader = new FileReader();
　　　　reader.readAsDataURL(file);
　　　　reader.onload = function (ret) {
　　　　　　picString = reader.result;
　　　　　　//预览图片
　　　　　　$("#selImg").attr({ "src": picString });
　　　　}
　　}
　　else {
　　　　$("#uploadInfo").text("请上传jpg或png格式的图片！" );
　　}
});

js中，上传图片事件

$("#submitPic").click(function () {
    if (picString != "") {
        $.ajax("../SavePicture", {
            type: "post",
            datatype: "json",
            data: {
                picString: picString,
                id: id
            },
            error: function () { },
            success: function (result) {
                if (result.suc == true) {
                    $("#uploadInfo").text("图片上传成功！");
                    $("#ImageList").empty();
                    ReadPicture();
                }
            }
        });
    }
});

C#中，保存图片

[HttpPost]
public ActionResult SavePicture(string picString,string id)
{
    var tmpArr = picString.Split(',');
    byte[] bytes = Convert.FromBase64String(tmpArr[1]);
    MemoryStream ms = new MemoryStream(bytes);
    ms.Write(bytes, 0, bytes.Length);
    var img = Image.FromStream(ms, true);

    var path = System.AppDomain.CurrentDomain.BaseDirectory;
    var imagesPath = System.IO.Path.Combine(path, @"Uploads\AgrCorporations\" + id + "\\");
    if (!System.IO.Directory.Exists(imagesPath))
        System.IO.Directory.CreateDirectory(imagesPath);
    string fileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", System.Globalization.DateTimeFormatInfo.InvariantInfo) + ".png";
    var bitImage = GetThumbnailImage(img,400,300);
    bitImage.Save(imagesPath + fileName);
    bool isOk = true;
    string msg = imagesPath + fileName;
    return Json(new { suc = isOk, msg = msg });
}

//图片压缩
public static Image GetThumbnailImage(Image srcImage, int width, int height)
{
    Image bitmap = new Bitmap(width, height);
    Graphics g = Graphics.FromImage(bitmap);

    //设置高质量插值法
    g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
    g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighSpeed;

    //在指定位置并且按指定大小绘制原图片的指定部分
    g.DrawImage(srcImage, new Rectangle(0, 0, width, width),
        new Rectangle(0, 0, srcImage.Width, srcImage.Height),
        GraphicsUnit.Pixel);

    return bitmap;
}

3、图片浏览和删除

html页面中

<div class="leftImage">
　　@Html.ListBoxFor(model => model.ImageList, (List<SelectListItem>)ViewBag.imageList, new { @class = "multipleList" })
　　<span id="deleteInfo"></span>
　　<input type="button" id="deletePic" class="customButton" value="删除" />
</div>
<div class="rightImage">
　　<img id="showImg" src="" alt="" />
</div>

js中，浏览和删除图片事件

@using Newtonsoft.Json;
var vData =@Html.Raw(JsonConvert.SerializeObject(ViewData));
var id = vData["id"];
var imgName = null;

$("#ImageList").on("change", function () {
    imgName = $("option:selected", this).val();
    var imgUrl = "../../Uploads/AgrCorporations/" + id + "/" + imgName;
    $("#showImg").attr({ "src": imgUrl });
});

$("#deletePic").click(function () {
    if (imgName == null) {
        $("#deleteInfo").text("没有选择任何图片！");
    }
    else {
        $.ajax("../DeletePicture", {
            type: "GET",
            datatype: "json",
            data: {
                id: id,
                imgName: imgName
            },
            error: function () { },
            success: function (result) {
                $("#deleteInfo").text(result.deleteInfo);
                $("#ImageList").empty();
                $("#showImg").attr({ "src": "" });
                ReadPicture();
            }
        });
    }
});

function ReadPicture() {
    $.ajax("../ReadPicture", {
        type: "GET",
        datatype: "json",
        data: {
            id: id
        },
        error: function () { },
        success: function (data) {
            $.each(data, function (i,item) {
                $("<option></option>").val(item["Value"]).text(item["Text"]).appendTo($("#ImageList"));
            })
        }
    });
}

C#中读取图片

public ActionResult ReadPicture(string id)
{
    //图片列表
    var path = System.AppDomain.CurrentDomain.BaseDirectory;
    var imagesPath = System.IO.Path.Combine(path, @"Uploads\AgrCorporations\" + id);
    var imageList = new List<string>();
    if (System.IO.Directory.Exists(imagesPath))
    {
        var files = System.IO.Directory.GetFiles(imagesPath, "*.*", SearchOption.TopDirectoryOnly).Where(s => s.EndsWith(".png") || s.EndsWith(".PNG") || s.EndsWith(".jpg") || s.EndsWith(".JPG"));
        var filesName = files.Select(p => System.IO.Path.GetFileName(p));
        var imagesURL = filesName.Select(p =>
        {
            return p;
        });
        var imagesQuery = from name in imagesURL
                            orderby name descending
                            select name;
        if (imagesQuery.ToArray().Length > 0)
        {
            imageList = imagesQuery.ToList();
        }
    }
    List<SelectListItem> ImageList = imageList.Select(p => new SelectListItem() { Text = p, Value = p }).ToList();

    ViewBag.imageList = ImageList;

    return Json(ImageList, JsonRequestBehavior.AllowGet);
}

C#中删除图片

public ActionResult DeletePicture(string id,string imgName)
{
    var path = System.AppDomain.CurrentDomain.BaseDirectory;
    var imagesPath = System.IO.Path.Combine(path, @"Uploads\AgrCorporations\" + id + "\\");
    var iFileName = imagesPath + imgName;
    FileInfo f = new FileInfo(iFileName);
    var deleteInfo = "";
    try { f.Delete(); deleteInfo = "删除成功！"; }
    catch { }

    return Json(new { deleteInfo = deleteInfo}, JsonRequestBehavior.AllowGet);
}

你说的Request.Files方法，是MVC提供的本地文件开放式直传，会把选择的文件直接传入服务器的指定目录。
我写的方法，是前端读取图片的文件流，转为base64字符串，通过上传接口将字符串传入后台，保存接口再对图片进行压缩、处理、重命名、复制等操作。
两种方法都可以实现，各有利弊吧，base64有最大长度限制。

ASP.NET MVC之文件上传【一】（八）

 

前言

这一节我们来讲讲在MVC中如何进行文件的上传，我们逐步深入，一起来看看。

Upload File（一）

我们在默认创建的项目中的Home控制器下添加如下：

        public ActionResult UploadFile()
        {
            return View();
        }

        [HttpPost]
        public ActionResult UploadFile(HttpPostedFileBase file)
        {
            var fileName = file.FileName;
            var filePath = Server.MapPath(string.Format("~/{0}", "File"));
            file.SaveAs(Path.Combine(filePath, fileName));
            return View();
        }

在 UploadFile 视图中添加上如下：

<form action="/Home/UploadFile" method="post" enctype="multipart/form-data">
    <input type="file" name="file" /><br />
    <input type="submit" value="提交" />
</form>

有关视图中我们就不必多说，只需明白如下两点：

（1）在后台利用HttpPostedFileBase来接收上传文件，该类为一个抽象类，但在ASP.NET Web Form却没有此类，此类的出现是为了更好的进行单元测试。

（2）在视图中文件类型的name要和后台接收文件的参数一致。

接下来我们进行演示看看结果：

 上述我们简单的上传了一个Excel文件，下面我们通过强类型视图以及模型验证来强化上传。

Upload File（二）

我们创建如下BlogModel类：

    public class BlogModel
    {
        [Display(Name = "博客名称")]
        [Required(ErrorMessage = "请输入你的博客名称！")]
        public string BlogName { get; set; }

        [Display(Name = "博客地址")]
        [Required(ErrorMessage = "请输入你的博客地址！")]
        public string BlogAddress { get; set; }

        [Display(Name = "博客图片")]
        [Required(ErrorMessage = "请上传你的博客图片！")]
        [ValidateFile]
        public HttpPostedFileBase BlogPhoto { get; set; }
    }

上述未有验证文件的特性，只能自定义文件特性，如下：

    public class ValidateFileAttribute : ValidationAttribute
    {
        public override bool IsValid(object value)
        {
            int MaxContentLength = 1024 * 1024 * 4;
            string[] AllowedFileExtensions = new string[] { ".jpg", ".gif", ".png", ".pdf" };

            var file = value as HttpPostedFileBase;

            if (file == null)
                return false;
            else if (!AllowedFileExtensions.Contains(file.FileName.Substring(file.FileName.LastIndexOf('.'))))
            {
                ErrorMessage = "请上传你的博客图片类型: " + string.Join(", ", AllowedFileExtensions);
                return false;
            }
            else if (file.ContentLength > MaxContentLength)
            {
                ErrorMessage = "上传图片过大，不能超过4兆 : " + (MaxContentLength / 1024).ToString() + "MB";
                return false;
            }
            else
                return true;
        }
    }

我们可以任意设置上传的文件大小，我们设置为40兆，在配置文件中我们知道 maxRequestLength = 4096 默认是4兆，当然我们可以改变其默认设置。

    <httpRuntime targetFramework="4.5" executionTimeout="1100"  maxRequestLength="40960" />

此时我们接着在控制器中修改上述上传的方法：

        [HttpPost]
        public ActionResult UploadFile(BlogModel bModel)
        {
            if (ModelState.IsValid)
            {
                var fileName = bModel.BlogPhoto.FileName;
                var filePath = Server.MapPath(string.Format("~/{0}", "File"));
                bModel.BlogPhoto.SaveAs(Path.Combine(filePath, fileName));
                ModelState.Clear();
            }
            return View();
        }

我们接下来看看效果：

咋回事，出状况了看来是我们的文件过大的原因，看了下该文件有接近45兆，而我们却设置的是40兆，于是乎继续在配置文件中去修改文件大小，但是结果还是一样。我们继续仔细看看该结果的提示，根据提示去找到配置文件下的节点再试试，我们在 syste.webServer 节点下设置为2G：

    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="2147483647">
        </requestLimits>
      </requestFiltering>
    </security>

结果就好使了，查了查也有遇到类似问题的人，貌似只有给个结果，却没有给解释，为什么在 httpRuntime 中设置不行，但是有些这样设置是正确的，这是什么原因？最终找到了答案：

（1）在IIS 5和IIS 6中，默认文件上传的最大为4兆，当上传的文件大小超过4兆时，则会得到错误信息，但是我们通过如下来设置文件大小。

<system.web>
  <httpRuntime maxRequestLength="2147483647" executionTimeout="100000" />
</system.web>

（2）在IIS 7中，默认文件上传的最大为28.6兆，当超过其默认设置大小，同样会得到错误信息，但是我们却可以通过如下来设置文件上传大小。

<system.webServer>
  <security>
    <requestFiltering>
      <requestLimits maxAllowedContentLength="2147483647" />
    </requestFiltering>
  </security>
</system.webServer>

【类推的话，个人觉得可能是在IIS 7+以上都是通过如上述IIS 7来设置文件上传大小】

虽然我们在服务器端对其进行验证，但是我们觉得这样还是不能保险，我们继续在客户端对其上传的图片类型和大小进行验证。

（1）利用强类型视图给出视图代码：

<style type="text/css">
    .field-validation-error {
        color: red;
    }
</style>
<form id="uploadFileSub" action="/Home/UploadFile" method="post" enctype="multipart/form-data">
    <fieldset>
        <legend></legend>
        <ul class="lifile">
            <li>
                @Html.LabelFor(m => m.BlogName)<br />
                @Html.TextBoxFor(m => m.BlogName, new { maxlength = 50 })
                @Html.ValidationMessageFor(m => m.BlogName)
            </li>
            <li>
                @Html.LabelFor(m => m.BlogAddress)<br />
                @Html.TextBoxFor(m => m.BlogAddress, new { maxlength = 200 })
                @Html.ValidationMessageFor(m => m.BlogAddress)<br />
            </li>
            <li>
                @Html.LabelFor(m => m.BlogPhoto)
                @Html.TextBoxFor(m => m.BlogPhoto, new { type = "file" })
                @Html.ValidationMessageFor(m => m.BlogPhoto)
                <span id="warning" style="color:red;font-size:large;"></span>
            </li>
            <li>
                <input type="submit" value="提交" />
            </li>
        </ul>

    </fieldset>
</form>

（2）利用脚本获取上传文件大小：

    function GetFileSize(fileid) {
        var fileSize = 0;
        fileSize = $("#" + fileid)[0].files[0].size;
        fileSize = fileSize / 1048576;
        return fileSize;
    }

（3）根据上传的路径获取文件名称：

    function getNameFromPath(strFilepath) {
        var objRE = new RegExp(/([^\/\\]+)$/);
        var strName = objRE.exec(strFilepath);

        if (strName == null) {
            return null;
        }
        else {
            return strName[0];
        }
    }

（4）当更换文件时触发Change事件对其文件类型和文件大小进行验证：

        $("#BlogPhoto").change(function () {
            var file = getNameFromPath($(this).val());
            if (file != null) {
                var errors = $(document).find(".field-validation-error");
                $.each(errors, function (k, v) {
                    if ($(v).attr("data-valmsg-for") === "BlogPhoto") {
                        $(v).hide();
                    }
                });
                var extension = file.substr((file.lastIndexOf('.') + 1));
                switch (extension) {
                    case 'jpg':
                    case 'png':
                    case 'gif':
                    case 'pdf':
                        fileTypeBool = false;
                        break;
                    default:
                        fileTypeBool = true;
                }
            }
            if (fileTypeBool) {
                $("#warning").html("只能上传扩展名为jpg,png,gif,pdf的文件！");
                return false;
            }
            else {
                var size = GetFileSize('BlogPhoto');
                if (size > 4) {
                    fileSizeBool = true;
                    $("#warning").html("上传文件已经超过4兆！");
                } else {
                    fileSizeBool = false;
                }
            }
        });

（5）当点击提交按钮时对其进行文件进行验证：

        $("#uploadFileSub").submit(function () {
            $("input[type='text']").each(function (k, v) {
                if ($(v).length) {
                    $(v).siblings("span").hide();
                }
            });
            if (fileTypeBool || fileSizeBool) {
                return false;
            }
        });

【注意】上述对于验证不是太完整，但是基本的架子已经给出。

接下来我们来完整的演示整个过程。

上述我们一直是利用的纯HTML代码，当然也可以利用MVC的扩展方法来进行，如下（最终渲染的还是表单，本质上是一致的，就不做过多探讨了）

@using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ 

 <input type="file" id="file" name="file" />
 <input type="submit" value="提交" />
}

结语

这一节我们比较详细的讲述了在MVC中如何进行文件的上传，但是我们还有一点未曾讲到，则是利用流来将如我们上述的图片转换成字节来插入到数据库中。有关上传可以参考园友Insus.NET对此利用流来上传。

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/molixiangshi/article/details/80259082
今天在做项目中需要做一个功能是：把个人图片上传到服务器中，并把路径保存到数据库中！自己摸索着做了出来，但不是很完善，先记录下来，后台获取到前端传过来的文件进行上传！

后台代码：

/// <summary>
/// 把图片上传到服务器并保存路径到数据库
/// </summary>
/// <returns></returns>
public string SaveImage()
{
string result = "";
HttpPostedFileBase imageName = Request.Files["image"];// 从前台获取文件
string file = imageName.FileName;
string fileFormat = file.Split('.')[file.Split('.').Length - 1]; // 以“.”截取，获取“.”后面的文件后缀
Regex imageFormat = new Regex(@"^(bmp)|(png)|(gif)|(jpg)|(jpeg)"); // 验证文件后缀的表达式（自己写的，不规范别介意哈）
if (string.IsNullOrEmpty(file) || !imageFormat.IsMatch(fileFormat)) // 验证后缀，判断文件是否是所要上传的格式
{
result = "error";
}
else
{
string timeStamp = DateTime.Now.Ticks.ToString(); // 获取当前时间的string类型
string firstFileName = timeStamp.Substring(0, timeStamp.Length - 4); // 通过截取获得文件名
string imageStr = "Images/StudentImage/"; // 获取保存图片的项目文件夹
string uploadPath = Server.MapPath("~/" + imageStr); // 将项目路径与文件夹合并
string pictureFormat = file.Split('.')[file.Split('.').Length - 1];// 设置文件格式
string fileName = firstFileName + "." + fileFormat;// 设置完整（文件名+文件格式）
string saveFile = uploadPath + fileName;//文件路径
imageName.SaveAs(saveFile);// 保存文件
// 如果单单是上传，不用保存路径的话，下面这行代码就不需要写了！
string image = imageStr + fileName;// 设置数据库保存的路径

result = "success";
}
return result;
}

html代码比较简单，使用的是easyui 1.5.4 版本的框架：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" charset="utf-8" />
<link rel="stylesheet" href="~/Content/jquery-easyui-1.5.4.4/themes/default/easyui.css" />
<link rel="stylesheet" href="~/Content/jquery-easyui-1.5.4.4/themes/icon.css" />
<link rel="stylesheet" href="~/Content/jquery-easyui-1.5.4.4/demo/demo.css" />
<script src="~/Content/jquery-easyui-1.5.4.4/jquery.min.js"></script>
<script src="~/Content/jquery-easyui-1.5.4.4/jquery.easyui.min.js"></script>
</head>
<body>

<div id="student_sdlg" class="easyui-dialog" style="width:530px;height:350px;padding:10px 20px;" closed="false"
buttons="#student-dlg-buttons" closable="false">
<form id="student_sfm" method="post" enctype="multipart/form-data">
<table cellspacing="8">
<tr>
<td>图　　片：</td>
<td colspan="3">
<input id="image" name="image" class="easyui-filebox" style="width:387px;" data-options="buttonText:'浏　览'" />
</td>
</tr>
</table>
</form>
</div>

<div id="student-dlg-buttons">
<a href="javascript:saveStudent();" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
</div>

<script>

// 保存图片
function saveStudent() {
$("#student_sfm").form("submit", {
url: "/Teacher/Teacher/SaveImage", // 上传图片链接
success: function (result) {
if (result == "success") {
$.messager.alert("系统提示", "保存成功！");
resetForm();
} else if (result == "error") {
$.messager.alert("系统提示", "保存失败！");
return;
}
}
})
}

// 清空表单数据
function resetForm() {
$("#student_sfm").form('clear');
}
</script>
</body>
</html>
到这里图片上传功能到这里就结束了，