Question

最近我开始学习ASP.NET MVC 4，我正在努力解决如何将图像/位图对象添加到我拥有的模型中并让用户从他的桌面上选择要上传的图像，这样我就可以将其保存到我的数据库稍后会在我的网站上显示。

在我的培训网站上，我正在做吉他销售网站，我有一个具有Id，标题，品牌和价格的模型。我所做的只是创建一个索引页面来显示数据库中的所有GutiarDataContext和一个创建页面，但我想创建一个选项来选择一个图像并将其保存到数据库中，当然在索引视图中显示它

我已经在互联网和这里找到了一些答案，但我无法理解他们在那里要解释的内容，所以如果有人能给我一个例子并解释它是如何工作的，那就太棒了！ / p>

谢谢：）

Answer 1

用于在数据库中存储图像：

在Asp.Net MVC中，我们必须使用HttpPostedFileBase来上传文件，如下所示： -

控制器：

[HttpPost]
public ActionResult Upload(UploadViewModel model, HttpPostedFileBase file)
{
 if (file != null)
 {
    int byteCount = file.ContentLength;   <---Your file Size or Length
    .............
    .............
 }
}

查看：

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
  <input type="file" name="file" />
  <input type="submit" value="OK" />
}

用于显示来自数据库的图像（我在这里采用假设的例子）

<img height="80" width="140" class="imgThumb" src="@Url.Action("LoadImg", "Image", new { id = m.ImgId })" alt="Loading..." />

public ActionResult LoadImg(int id)
{
byte[] image = null;
tblImage img = en.tblImages.FirstOrDefault(i => i.ImgId == id);
image = (byte[])img.ImgSrc;
return File(image, "image/png");
}

Answer 2

控制器代码

    public static byte[] GetImageFromUpload()
    {
        HttpPostedFileBase postedFile = null;

        if (HttpContext.Current.Request != null && HttpContext.Current.Request.Files.Count > 0)
            postedFile = new HttpPostedFileWrapper(HttpContext.Current.Request.Files["imageUpload"]);

        if (postedFile == null || postedFile.FileName == string.Empty) return null;

        using (Image img = Image.FromStream(postedFile.InputStream))
        {
            var file = new byte[postedFile.InputStream.Length];

            var reader = new BinaryReader(postedFile.InputStream);
            postedFile.InputStream.Seek(0, SeekOrigin.Begin);

            file = reader.ReadBytes((int)postedFile.InputStream.Length);

            return file;
        }
    }

LoadEmployeeImageToObject（）方法可用于将imege添加到Byte arry并使用session将其解析到服务器

    public static void LoadEmployeeImageToObject(byte[] photo , int employeeId)
    {
        if (HttpContext.Current.Request != null)
        {
            byte[] uploadedImageFromFileControl = GetImageFromUpload();
            bool removeImage = HttpContext.Current.Request["removeImage"] == "on";

            if (HttpContext.Current.Session["AjaxPhoto"] != null)
            {
                photo = (byte[])HttpContext.Current.Session["AjaxPhoto"];
            }
            else if (uploadedImageFromFileControl != null) photo = uploadedImageFromFileControl;
            else if (employeeId != 0) //load image from db
            {
                photo = photo;
            }
        }
    }

如果您正在使用此代码，则无需为数据库上的保存图像创建数据库列。请为保存图片ID添加一列。使用jS脚本下面的图像可以将图像保存在服务器文件系统上。（文件路径）

function uploadFile() {
    var fd = new FormData();
    fd.append("imageUpload", document.getElementById('imageUpload').files[0]);
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.open("POST", "/HumanResource/Employee/AjaxImageUpload");//controller path
    xhr.responseType = 'blob';
    xhr.send(fd);
    $('#divUploadStatus').show();
}

这个JS方法可以像你这样的patial view.chtml文件绑定

<div id="divUploadPanel">
    <label>
         Upload New Image:</label>
     <input type="file" id="imageUpload" name="imageUpload" onchange=" uploadFile(); " /><br />

这是父chtml文件的代码

    <div class="control-group">
        <label class="control-label" >Photo</label>
        <div class="controls">
            @Html.Partial("_EditorImagePanel", Model)
        </div>
    </div>

希望这会对你有所帮助。谢谢：）

带图像的模型 - 如何上传/显示

2 个答案: