Question

我有两个问题：

1。）我已将Fine Uploader放置在一个表单中，现在我想知道为什么我没有看到控制器中输入字段的填充内容。我怎么解决这个问题？

2.。）如何在上传过程开始之前进行字段验证？

我希望有人可以提供帮助！

这是我的代码：

型号：

public class UploadFileModel
{
    [StringLength(100)]
    [Display(Name = "* Title:")]
    public string Title { get; set; }

    [StringLength(300)]
    [Display(Name = "Description:")]
    public string Description { get; set; }
}

查看：

@model mowee.Models.UploadFileModel

<link href="~/Scripts/fineuploader/fineuploader-3.5.0.css" rel="stylesheet" />

@using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <fieldset>
        <legend>Video Upload</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.Title)
                @Html.TextBoxFor(m => m.Title, new { @Class = "action add", title = "Enter your video/movie title here." })
            </li>
            <li>
                @Html.LabelFor(m => m.Description)
                @Html.TextAreaFor(m => m.Description, new Dictionary<string, object> { { "rows", "3" } })
            </li>
        </ol>

        <div id="bootstrapped-fine-uploader"></div>
        <script src="~/Scripts/fineuploader/fineuploader-3.5.0.js"></script>
        <script>
            function createUploader() {
                var uploader = new qq.FineUploader({
                    element: document.getElementById('bootstrapped-fine-uploader'),

                    multiple: false,
                    validation: {
                        sizeLimit: 2147483648 //2GB
                    },
                    request: {
                        endpoint: '/Home/UploadFile'
                    },
                    text: {
                        uploadButton: '<div><i class="icon-upload icon-white"></i>* Upload Video</div>'
                    },
                    template: '<div class="qq-uploader span12">' +
                    '<pre class="qq-upload-drop-area span12"><span>{dragZoneText}</span></pre>' +
                    '<div id="btnUpload" class="qq-upload-button btn btn-success" style="width: 33%;">{uploadButtonText}</div>' +
                    '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
                    '<ul class="qq-upload-list" style="margin-top: 10px; text-align: center;"></ul>' +
                    '</div>',
                    classes: {
                        success: 'alert alert-success',
                        fail: 'alert alert-error',
                        dropActive: "cssClassToAddToDropZoneOnEnter"
                    }
                });
            }
            window.onload = createUploader;
        </script>
    </fieldset>
}

控制器：

[HttpPost]
[AllowAnonymous]
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult UploadFile(string qqfile, UploadFileModel myModel)
{
    if (ModelState.IsValid)
    {
        try
        {
            HttpPostedFileBase uploadFile = null;
            uploadFile = Request.Files[0];

            if (uploadFile != null && uploadFile.ContentLength > 0)
            {
                if (myModel.Title != null || myModel.Description != null)
                {
                   **//but UploadFileModel is null. WHY??????? Anyone an idea what i did wrong???
                   //write data to DB**
                }
            }
            else
            {
                ModelState.AddModelError("", "Please choose a video/movie.");
                return Json(new { success = false, message = "Please choose a video/movie." }, "application/json");
            }
        }
        catch (Exception ex)
        {
            ModelState.AddModelError("", "An error occured. Try again.");
            mailUtils.SendBugMail(ex, this.HttpContext);
            return Json(new { success = false, message = "An error occured during upload. Try again." }, "application/json");
        }
        return Json(new { success = true, VideoLink = @ViewBag.VideoLink, VideoTranscoded = @ViewBag.Transcoded }, "application/json");//"text/html");
    }
    return Json(new { success = false, message = "An error occured during upload. Try again." }, "application/json");
}

Answer 1

行。我想到了。可以使用setParams在回调'onSubmit'上设置参数：

                callbacks: {
                    onSubmit: function (id, fileName, responseJSON) {
                        uploader.setParams({
                            idxTitle: $('#titleId').val(),
                            idxAuthor: $('#authorId').val(),
                            idxEmail: $('#emailId').val()
                        });
                    },

它工作正常！

Answer 2

解决您的问题：

您应该真正了解MVC4 example中的Fine Uploader server-side examples repository。在此示例之后为您的服务器端代码建模，您应该没问题。我个人不是MVC4开发人员，但我知道我已经链接到工作的例子。
您可以使用onValidate和onValidateBatch回调来执行自己的验证任务。有关详细信息，请查看callbacks documentation。

表单中的精细上传器不会将模型数据提交到控制器中

2 个答案: