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

本文关键字：显示 图像 模型 | 更新日期: 2023-09-27 18:16:09

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

在我的培训网站，我做一个吉他销售网站，我有一个型号，上面有Id、名称、品牌和价格。所有我所做的是创建一个索引页，以显示所有的GutiarDataContext从数据库和创建页面，但我想为创建选择一个图像，并将其保存到数据库，当然，在索引视图中显示它。

我已经在网上和这里找到了一些答案，但我真的不明白他们想要解释的是什么，所以如果有人能给我一个例子和解释它是如何工作的，那就太棒了!

谢谢:)

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

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

在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");
}

控制器代码 

    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;
        }
    }

loaddemployeeimagetoobject ()方法可用于将图像添加到字节数组中，并使用会话

将其解析到服务器
    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方法可以绑定到你的局部视图。像这样的html文件

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

这是父html文件

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

希望这对你有帮助。谢谢:)

相关文章：