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方法之前使用了.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)) } };

Answer 1

使用jQuery Form Plugin，您可以完成异步文件上传。请查看以下链接

jQuery表单插件 - 代码示例 - 文件上载 http://jquery.malsup.com/form/#file-upload

祝你好运！

Answer 2

根据Dominic的建议，使用jQuery Form plugin。您已经构建的表单应该已经正常工作。只需添加一个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
            }
        });
    });
});

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

Answer 3

我能够使用jQuery Form plugin和自定义的JsonResult类通过AJAX上传文件，如here所述。

使用此选项返回类似词典

的内容

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

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

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

如何通过jQuery上传文件？

3 个答案: