通过表单发布带有 Sitecore 文件的 MVC 表单返回 Null

Question

对于可能的重复，我已经知道如何在上传之前预览我的图像，我的问题如下详述，当我提交表单时，图像被接收为空。

我正在尝试向 MVC 控制器提交一个表单，该控制器应该提交一个模型、一个字符串和一个图像文件，

我确保输入与控制器中的参数具有相同的名称

下面是表单初始化代码

@using (Html.BeginRouteForm(Sitecore.Mvc.Configuration.MvcSettings.SitecoreRouteName,
new
{
    calendar = System.Convert.ToString(Request.QueryString["calendar"]),
    ID = System.Convert.ToString(Request.QueryString["id"])
},
    FormMethod.Post, new { enctype = "multipart/form-data" }))
{

//Model Input

<input style="opacity: 0;" name="EventImage" type="file" accept="image/jpeg, image/jpg" id="ImageUpload" onchange="readURL(this);" />
}

还有控制器头

[HttpPost]
    [ValidateInput(false)]
    public ActionResult AddEvent(Event model, string calendar, HttpPostedFileBase EventImage)

EventImage 参数返回 null，我似乎无法弄清楚原因。 我认为 ID 可能导致问题，所以我将 name 属性更改为 ImageUpload 以及控制器中的 Parameter 但无济于事，因为该值仍然为 null。

附加信息：当用户上传图片时，我让他们在图片框中预览它，这可能是导致它的原因吗？

谢谢，

更新：

这里是 readURL 函数的代码

function readURL(input) {
if (input.files && input.files[0]) {
    var ImageCorrect = false;
    var file = input.files[0];
    var reader = new FileReader();        
    reader.onload = function (e) {
        // Concatenate our HTML image info 
        var ext = file.name.match(/\.([^\.]+)$/)[1];
        switch (ext) {
            case 'jpg':
            case 'jpeg':
            case 'JPG':
            case 'JPEG':
                {
                    if ((Math.round(file.size / 1024)) > 500) {
                        alert('Image is too Large');
                    }
                    else {
                        var image = new Image();
                        image.src = e.target.result;
                        image.onload = function () {
                            var width = parseInt(image.width);
                            if (width <= 500) {
                                $('#previewImage').attr('src', e.target.result);
                                $('#previewImage').show();                                   

                            }
                            else {
                                alert('Image width exceeds maximum width');
                            }
                        }
                    }
                }
                break;
            default:
                alert('Image type not allowed')
        }
    }
    reader.readAsDataURL(input.files[0]);
}
}

Answer 1

如果我正确理解了您的问题，您正在尝试将文件从表单提交到您的控制器，并且您在控制器中得到 null。

我以前做过，请检查以下内容：

cshtml（您可以将属性添加到事件图像中，例如 JS 调用...等）：

<div class="form-group">
    @Sitecore.Globalization.Translate.Text("EventImage")<br>
    @Html.TextBoxFor(m => m.EventImage, new { type = "file" })
</div>

型号：

[Display(Name = "Event Image")]
public HttpPostedFileBase EventImage { get; set; }

控制器签名：

[HttpPost]
[ValidateInput(false)]
public ActionResult AddEvent(Event model)

捕捉图像字段：

if (model.EventImage != null && model.EventImage.ContentLength > 0)
{
     var fileName = Path.GetFileName(model.EventImage.FileName);
     var tempPath = Server.MapPath("~/Temp/uploads");
     var path = Path.Combine(tempPath, fileName);
     if (!Directory.Exists(tempPath))
           Directory.CreateDirectory(tempPath);

     model.EventImage.SaveAs(path);

     Sitecore.Resources.Media.MediaCreatorOptions options = new Sitecore.Resources.Media.MediaCreatorOptions();
     options.FileBased = false;
     options.IncludeExtensionInItemName = false;
     options.KeepExisting = false;
     options.Versioned = false;
     options.Destination = "/sitecore/media library/Images/" + ItemUtil.ProposeValidItemName(Path.GetFileName(path));
     options.Database = Sitecore.Configuration.Factory.GetDatabase(MasterDatabase);

      // Now create the file
      Sitecore.Resources.Media.MediaCreator creator = new Sitecore.Resources.Media.MediaCreator();
      MediaItem mediaItem = creator.CreateFromFile(path, options);

      ImageField _eventImage = (ImageField)_event.Fields[EventImage];
                            _eventImage.MediaID = mediaItem.ID;
                            PublishItem(mediaItem);
}