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

如果我理解你的问题，你试图将表格中的文件提交给你的控制器，你在控制器中就会出现空白。

我之前做过这个，检查以下内容：

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

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

1 个答案: