使用jqueryform插件上传

时间:2011-06-22 03:16:26

标签: c# asp.net-mvc-2 jquery-forms-plugin

我正在尝试使用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>");
    }
}

1 个答案:

答案 0 :(得分:2)

您的表单上有两个文件输入,分别名为filefile1。处理上载的控制器操作只有一个名为HttpPostedFileBase的{​​{1}}参数。所以你可以添加第二个:

file

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

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" />
...

您可以查看有关在ASP.NET MVC中上传文件的following blog post