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？就像microsofts ajax.form得到一个updatetarget（我不想使用他们的ajax表单）

Answer 1

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

使用隐藏的iframe，有jquery form等emulate this functionality插件。所以基本上你会写下面的内容来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在评论部分指出的那样，还可以使用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。（归功于达林）

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

2 个答案: