如何通过ajax上传文件答案

【问题标题】：How to upload file via ajax如何通过ajax上传文件
【发布时间】：2013-04-14 23:55:32
【问题描述】：

我有文件上传，它不使用表单上传文件，而是我想使用 ajax 上传文件。我尝试了以下方法，但无法传递文件。它是空的。请帮忙。下面是我的实现。

HTML 和 jQuery 函数

<div id="Upload">
    <input type="file" accept="application/x-shockwave-flash" id="virtualtourfile" enctype="multipart/form-data"/>
    <input type="button" value="Upload" id="btnUpload"/>
</div>

$('#btnUpload').click(function () {
            $.ajax({
                url: "uploadvideo",
                type:'POST',
                data: $("#virtualtourfile:file"),
                success: function (data) {

                }
            });
        });

控制器

public ActionResult UploadVideo(HttpPostedFileBase file)
        {
            return Json("", JsonRequestBehavior.AllowGet);
        }

【问题讨论】：

您可以使用 jQuery 文件上传。 blueimp.github.io/jQuery-File-Upload 提供演示、下载和文档。在服务器端，您的 MVC 代码可以像常规上传一样处理文件上传。
您是否在特定浏览器上遇到此问题？
@Pankaj Garg 没有。所有浏览器都一样。
您尝试添加contentType: 'application/json; charset=utf-8', 和data: JSON.stringify($("#virtualtourfile:file")), 吗？
@Pankaj Garg 是的，我做到了。它仍然为空。我认为不使用下面开发人员建议的插件是不可能的

标签： asp.net-mvc-3 jquery file-upload upload

【解决方案1】：

有几个选项。如果客户端浏览器支持HTML5 File API，您可以使用它将文件异步上传到服务器。如果您需要支持不支持此 API 的旧版浏览器，您可以使用文件上传组件，例如 Uploadify、Fine uploader、jquery form... 这些插件的优点是它们将测试浏览器，如果它支持 File API，它将使用它，否则它将回退到较旧的技术，例如隐藏 iframe 或 Flash 电影。

【讨论】：

【解决方案2】：

我使用了一些插件，发现 Kendo UI 上传插件不错，这里是一个链接，它是如何工作的：

http://demos.kendoui.com/web/upload/async.html

您可以在此处找到 Asp.Net MVC 3 的示例项目： http://www.kendoui.com/forums/ui/upload/upoad-with-mvc.aspx

        [HttpPost]
        public ActionResult Save(IEnumerable<HttpPostedFileBase> attachments)
        {
            // The Name of the Upload component is "attachments" 
            foreach (var file in attachments)
            {
                // Some browsers send file names with full path. This needs to be stripped.
                var fileName = Path.GetFileName(file.FileName);
                var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);

                file.SaveAs(physicalPath);
            }
            // Return an empty string to signify success
            return Content("");
        }

【讨论】：