如何通过jQuery上传文件？

我想知道如何做到这一点像jQuery ajax。现在我有一个jQuery UI对话框弹出窗口，它有一个html输入文件。如何通过jQuery上传文件？

现在，当用户点击导入我想用jQuery做一个ajax post到服务器。

我不知道如何将文件传递给我的操作视图。

现在我把它做了充分的回传，所以我有这个

<% 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)

所以我不知道如何在HttpPostedFileBase通过使用jQuery和如何在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中使用.submit之前的ajax提交方法。

编辑

我怎么能更改文件上传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)) } };

来源

2010-01-07 chobo2

使用jQuery表单插件，您可以完成异步文件上传。退房下面的链接，

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

祝你好运！

来源

2010-01-07 22:42:07 morindo

如Dominic所示，使用jQuery Form plugin。您已经构建的表单应该已经正确工作。只需添加一个ID来标识它：

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

和使用jQuery形式发布的数据：

$(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作为响应。

来源

2010-01-07 22:58:06 LorenzCK

我只是到这里来问，为什么它不会返回JSON笑。我做了类似的事情，但Id id没有指定.submit。到目前为止，请参阅编辑。 – chobo2 2010-01-07 23:31:19

由于安全原因（它记录在jQuery Form网页上），JavaScript无法接受JSON作为上传文件的请求的数据格式。我建议你使用XML，这是_almost_就像使用jQuery的JSON一样简单......或者用换行符分隔纯文本中的值。我明确使用了.ajaxSubmit，因为我从我自己的项目的一些代码中拿了一些代码，在那里我使用了一些更多的东西。无论如何，这应该与您的代码实际上相同。 – LorenzCK 2010-01-08 00:01:45

那么这个XML是怎么样的。我发布了我转换为Json结果的字典集合，我怎样才能将它转换为XML。 – chobo2 2010-01-08 00:11:40

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

使用此返回喜欢你的字典

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

，并在回调函数来获取你的信息

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

来源

2010-01-07 23:08:38

什么是$ .growlUI（null，result.message）;？我不确定growlUI是什么，如果那是我需要的。我也必须将iframe设置为true吗？ – chobo2 2010-01-07 23:39:49

另外什么是在这个杰森关键和价值？它是数据还是消息？请参阅编辑。 – chobo2 2010-01-07 23:47:50

是的，iframe需要是真实的。 $ .growlUI没有必要，它只是一个特殊的动画通知。 – 2010-01-08 14:28:28

如何通过jQuery上传文件？

回答

相关问题