Question

我有一个包含允许用户上传图片的代码的视图。我从一个我似乎无法找到的网站中提取代码。代码效果很好，但我的用户要求在提交页面之前查看图像的预览。

My View对我的图片和上传按钮有以下内容。

<div class="editor-field">
     @if (Model.ImageData == null || Model.ImageData.Length == 0) { 
         @:None
     }
     else { 
         <img width="150" height="150" alt="Item Image" src="@Url.Action("GetImage", "ItemManagement")" />
     }
  <div>Upload new image: <input type="file" name="Image" /></div>
</div>

我的BeginForm帮助器看起来像这样。

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

因此，当我的视图被回发后，我的控制器中的“添加操作”就像这样。

    [HttpPost]
    public ActionResult Add(ItemAddModel model, HttpPostedFileBase image) {
        if (!ModelState.IsValid) {
            return View(model);
        }

        if (image != null) {
            model.ImageMimeType = image.ContentType;
            model.ImageData = new byte[image.ContentLength];
            image.InputStream.Read(model.ImageData, 0, image.ContentLength);
        }
        _itemService.AddItem(model);
        return RedirectToAction("Index");
    }

就像我说的一切都很棒。但只有在表单提交并且我的用户再次打开页面后，他们才能看到他们上传的图像。我想添加一个更新按钮，它将获取图像并将其加载到图像控件中，而不会回发到服务器。在表单提交之前，我不想将图像存储在数据库中。

Answer 1

以下是我视图中的代码。其中重要的部分是提交按钮的名称设置为“UploadImageButton”。这与我的ViewModel中的属性匹配，该属性由我的控制器中的Action方法使用。此外，class =“style-name cancel”使我的客户端验证无法解雇。

<div class="editor-field">
    @if (Model.ImageData == null || Model.ImageData.Length == 0) { 
        @:None
    }
    else { 
        <img id="itemImage" width="150" height="150" alt="@Model.ItemName" src="@Url.Action("GetImage", "ItemManagement", new { Model.ItemID })" />
    }
    @FileUpload.GetHtml(initialNumberOfFiles: 1, allowMoreFilesToBeAdded: false, includeFormTag: false, addText: "Add Image", uploadText: "Upload Image") <br />  
    <input type="submit" name="UploadImageButton" value="Upload Image" class="style-name cancel" />      
</div>

在我的控制器中，我有这个代码来处理HTTP帖子。

[HttpPost]
public ActionResult Edit(ItemEditModel model) {
    //Determine which button caused our postback
    if (!model.UploadImageButton.IsNullOrEmpty()) {
        //The user is uploading an image, so we don't need it check validation or update the database.
        //Clear our errors here so we don't show the user any validation issues. That will happen when the Save button is clicked.
        foreach (var key in modelState.Keys.ToList().Where(key => modelState.Keys.Contains(key))) {
            modelState[key].Errors.Clear();
        }
        var image = WebImage.GetImageFromRequest(); //Get the image from the request

        Session[ItemImageSessionKey] = image; //Save our image to the session 

        LoadAttributesIntoViewBagForEditView(model);

        return View("Edit", model); //Return our view and model with the users edits (if any)
    }
    //Normal code to handle Form submit (Save) functionality.
}

现在允许我的用户上传图片，该图片会进行回发，但不会触发任何验证，并保持其他编辑处于上传时的状态。

Answer 2

您可以结帐following article。它使用了漂亮的valums ajax upload plugin。

Answer 3

如果你可以使用html5，你可以查看html5 file api

MVC 3图像上传

3 个答案: