如何使用jQuery上传文件？

Question

我想知道如何使用jQuery ajax来实现这个功能。目前，我有一个jQuery UI对话框弹出框，并在上面放置了一个html输入文件。

现在当用户点击导入时，我想用jQuery进行ajax提交到服务器。

然而我不确定如何将文件传递给我的操作视图。

目前我已经完成了一个完整的带有以下内容的后台提交：

<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" }))
{%>
    <br />
    <p><input type="file" id="file" name="file" size="23 accept="text/calendar"></p><br />
    <p><input type="submit" value="Upload file" /></p>        

<% } %> 

然后在我的控制器中：

  public ActionResult Import(HttpPostedFileBase file)

我不确定如何使用jQuery传递HttpPostedFileBase，并如何在jQuery中设置enctype = "multipart/form-data"。

编辑

好的，jQuery表单插件似乎是正确的选择。

$('#frm_ImportCalendar').livequery(function()
{
    var options = {
        dataType: 'json',
        success: function(response)
        {
            alert(response);
        }
    };

    $(this).ajaxForm(options);
});

我想知道为什么我的JSON不起作用，但有人提到它不能直接使用。我正在查看另一个链接，在那里有人能够使用JSON。

但我不确定为什么在Lck中在使用ajax提交方法之前要使用.submit。

编辑

如何更改文件上传的JSON结果以返回我的字典数组？

        Dictionary<string, string> result = new Dictionary<string, string>();
        result.Add("Msg", "Success!!");
        result.Add("Body", calendarBody);

// how can I change this?
    return new FileUploadJsonResult { Data = new { message = string.Format("{0} uploaded successfully.", System.IO.Path.GetFileName(file.FileName)) } };

- chobo2

Answer 1

使用jQuery表单插件，您可以实现异步文件上传。请查看以下链接，

jQuery表单插件 - 代码示例 - 文件上传 http://jquery.malsup.com/form/#file-upload 祝好运！

- morindo

Answer 2

根据Dominic的建议，使用jQuery表单插件。您已经构建的表单应该已经正常工作。只需添加一个ID来标识它：

<% using (Html.BeginForm("Import", "Controller", FormMethod.Post, new { id = "asyncForm", enctype = "multipart/form-data" }))

并使用jQuery Form来提交数据：

$(document).ready(function(){
    $('#asyncForm').submit(function(){
        $(this).ajaxSubmit({
            beforeSubmit: function(){
                //update GUI to signal upload
            }
            data: { additional = 'value' },
            dataType: 'xml',
            success: function(xml){
                //handle successful upload
            }
        });
    });
});

请注意，上传文件的表单中的返回数据类型不能为JSON。在您的控制器方法中使用XML或HTML作为响应。

- LorenzCK

---

我刚想来问为什么它不会返回JSON，哈哈。我做了类似的事情，但我没有指定.submit。请参见编辑以查看我目前的进展。 - chobo2

JavaScript出于安全原因无法接受JSON作为上传文件请求的数据格式（在jQuery Form网页上有记录）。我建议您使用XML，它与jQuery一起使用几乎和JSON一样简单...或者使用以换行符分隔的纯文本值。我明确使用了.ajaxSubmit，因为我从自己项目的一些代码示例中获取了该示例，在该示例中我对表单进行了更多处理。无论如何，这应该与您的代码几乎相同。 - LorenzCK

这个XML会是什么样子呢？我发布了我转换为Json结果的Dictionary Collection，如何将它转换为XML呢？ - chobo2

你可以从这里获取XmlResult类：https://dev59.com/VnVC5IYBdhLWcg3w9GLM 这也适用于你的示例中的字典。 - LorenzCK

Answer 3

我能够使用jQuery表单插件和自定义的JsonResult类，如此处所述，通过AJAX上传文件。

使用这个来返回类似于你的字典的东西

return new FileUploadJsonResult { Data = new { Msg = "Success!!", Body = calendarBody } };

并在回调函数中获取您的消息

success: function(result) {
  $("#ajaxUploadForm").unblock();
  $("#ajaxUploadForm").resetForm();
  alert(result.Msg);
}

- Alpha Codemonkey

---

$.growlUI(null, result.message); 是什么？我不确定 growlUI 是什么，也不知道是否需要它。另外，我是否需要将 iframe 设置为 true？ - chobo2

另外，这里的jason键和值是什么？它是数据还是消息？请参见编辑。 - chobo2

是的，iframe需要为true。$.growlUI并不是必需的，它只是一种特殊的动画通知。 - Alpha Codemonkey

我遇到了一个jQuery错误：“$（“#ajaxUploadForm”）.ajaxForm不是一个函数？” - user603007