用户使用jQuery选择文件后如何直接上传文件？

Question

嗨，我在获取附加到表单的文件以在 jquery .post() 上提交时遇到了一些问题。

我想要做的是，用户选择一个文件/使用 jquery .post() 提交的表单。如果我只是在整个表单上做一个.submit()，我就可以正常工作，但由于网站上的其他内容，我不想使用它。这是我现在使用的代码。这样做是使用一个按钮作为文件输入，然后我立即在选择功能上进行提交。

$('.upload').file().choose(function (e, input) {                
            input.attr('name', 'firstPicture');
            input.hide();

            $(input).appendTo('#myForm');

            $('#hiddenDiv').show();

            $.post("/Home/UploadSingelFile", $("#myForm").serialize());
            return false;
        });

我的操作是正确的public ActionResult UploadSingelFile(HttpPostedFileBase firstPicture)

当我像上面那样做时发生的事情是 firstPicture 输入为空，但就像我说的那样，如果我提交它就可以了。

如果这是不可能的，我会考虑做一个.submit()，但是我需要返回一个局部视图，我将如何在返回时将该局部视图更新为一个 div？就像 microsoft 的 ajax.form 有一个 updatetarget（我不想使用他们的 ajax 表单）

Answer 1

使用 jQuery 发送 AJAX 请求时，您只需向服务器发送 application/x-www-form-urlencoded 请求，而要上传文件，您需要使用 multipart/form-data 请求。

有一些插件，如jquery form 其中emulate this functionality 使用隐藏的iframe。所以基本上你将编写以下内容来 ajaxify 包含文件输入的表单：

$(function() {
    $('#myForm').ajaxForm(function(result) {
        // do something with the results when the form is submitted
    });
});

然后当你需要提交表单时：

$('#myForm').ajaxSubmit();

或者只是当用户按下提交按钮时。

还有其他插件，例如Uploadify 和Plupload，可以让yoiu 实现相同的功能（例如Uploadify 使用Flash，而Plupload 会检测客户端支持的内容：Flash、Silverlight，如果不支持则可能回退到隐藏的 iframe 以模拟文件上传）。

但您可能会忘记使用$.post 上传文件。

---

更新：

正如@Can Gencer 在 cmets 部分中指出的那样，还有可以使用的 Ajax upload plugin。

Answer 2

为了补充 Darin 的回答，我在使用 Ajax upload script 之前已经这样做了，而且效果很好，我认为这是我们当时尝试的最轻量级的解决方案。它适用于所有浏览器，不需要任何闪光灯或 Silverlight。

您需要做的就是创建一个这样的 div：

<div id="file-uploader"></div>

并像这样初始化上传器：

var uploader = new qq.FileUploader({
    // pass the dom node (ex. $(selector)[0] for jQuery users)
    element: document.getElementById('file-uploader'),
    // path to server-side upload script
    action: '/Home/UploadSingelFile'
});

这应该为您提供您在操作方法中需要的HttpPostedFile 参数。要在之后更新视图，您可以使用不同的回调，例如：

onSubmit: function(id, fileName){},
onProgress: function(id, fileName, loaded, total){},
onComplete: function(id, fileName, responseJSON){},
onCancel: function(id, fileName){},

更新：

要在 ASP.NET MVC 端获取上传的文件，还需要做一些工作。请参阅此问题的答案：MVC3 Valums Ajax File Upload。 （感谢达林）