使用 jqueryform 插件上传

Question

我正在尝试使用 jqueryform 插件上传文件。我必须文件上传控件，但第二个无法上传？

<div>
    <h2>
        Upload test</h2>
    <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jqueryform.js" type="text/javascript"></script>
    <script src="../../Scripts/jblock.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function (event) {

            $(function () {
                $("#ajaxUploadForm").ajaxForm({
                    iframe: true,
                    dataType: "json",
                    beforeSubmit: function () {
                        $("#ajaxUploadForm").block({ message: ' Uploading Image' });
                    },
                    success: function (result) {
                        $("#ajaxUploadForm").unblock();
                        $("#ajaxUploadForm").resetForm();
                        //$.growlUI(null, result.message);
                        if (result.message != 'Success') {
                            alert(result.message);
                        }
                        else {

                        }
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        $("#ajaxUploadForm").unblock();
                        $("#ajaxUploadForm").resetForm();

                    }
                });
            });
        });
    </script>
    <form id="ajaxUploadForm" action="<%= Url.Action("Upload", "Home")%>" method="post"
    enctype="multipart/form-data">
    <input type="file" name="file" />

    <input type="file" name="file2" />

    <input id="ajaxUploadButton" type="submit" value="upload file" />
    </form>
</div>


  public ActionResult Index()
    {
        return View();
    }

    public FileUploadJsonResult Upload(HttpPostedFileBase file)
    {
        if (file == null)
        {
            return new FileUploadJsonResult { Data = new { message = "error" } };
        }

        if (file.ContentLength > 0)
        {
         //save file or something
        }

        return new FileUploadJsonResult { Data = new { message = string.Format("success") } };
    }


 public class FileUploadJsonResult : JsonResult
{
    public override void ExecuteResult(ControllerContext context)
    {
        this.ContentType = "text/html";
        context.HttpContext.Response.Write("<textarea>");
        base.ExecuteResult(context);
        context.HttpContext.Response.Write("</textarea>");
    }
}

Answer 1

您的表单上有两个文件输入，分别名为 file 和 file1。处理上传的控制器操作只有一个名为 file 的 HttpPostedFileBase 参数。因此，您可以添加第二个文件：

public FileUploadJsonResult Upload(
    HttpPostedFileBase file, 
    HttpPostedFileBase file1
)
{
    if (file == null || file1 == null)
    {
        return new FileUploadJsonResult { Data = new { message = "error" } };
    }

    if (file.ContentLength > 0)
    {
        //save file or something
    }

    if (file1.ContentLength > 0)
    {
        //save the second file or something
    }

    return new FileUploadJsonResult { Data = new { message = string.Format("success") } };
}

或者，如果您想处理多个文件，您可以在表单上为它们指定相同的名称：

<input type="file" name="files" />
<input type="file" name="files" />
<input type="file" name="files" />
<input type="file" name="files" />
<input type="file" name="files" />
...

然后您的控制器操作可以获取文件列表：

public FileUploadJsonResult Upload(IEnumerable<HttpPostedFileBase> files)
{
    if (files)
    {
        return new FileUploadJsonResult { Data = new { message = "error" } };
    }

    foreach (var file in files)
    {

        if (file.ContentLength > 0)
        {
            //save file or something
        }
    }

    return new FileUploadJsonResult { Data = new { message = string.Format("success") } };
}

您可以签出 以下博客文章介绍了在 ASP.NET MVC 中上传文件。