ASP.NET MVC中，怎么使用jquery/ajaxForm上传文件

ajaxForm插件最好选择：jquery forms plugin.

以下为示例：

Ajax.BeginForm

 @using (Ajax.BeginForm("YourAction", "YourController", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()
    <input type="file" id="file" name="files"><br>
    <input type="submit" value="Upload File to Server">
}

或者

 @using (Html.BeginForm("YourAction", "YourController", new{ area = "YourArea" }, FormMethod.Post,new { enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()
    <input type="file" id="file" name="files"><br>
    <input type="submit" value="Upload File to Server">
}

Action Method

[HttpPost]
    [ValidateAntiForgeryToken]
    public void YourAction(IEnumerable<HttpPostedFileBase> files)
    {
        if (files != null)
        {
            foreach (var file in files)
            {
                // Verify that the user selected a file
                if (file != null && file.ContentLength > 0)
                {
                    // extract only the fielname
                    var fileName = Path.GetFileName(file.FileName);
                    // TODO: need to define destination
                    var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
                    file.SaveAs(path);
                }
            }
        }
    }

需要注意：

1，）如果是当前view页面不是~{/Area}/Views/Your/Your.cshtml页面，只能返回void,string,不可以ViewResult,JsonResult,ContentResult等。

1.1，）如果需要返回参数，可以把void 改成string。

1.2，）如果要返回对象，要把对象序列化为字符串，返回字符串；客户端提交时指定返回数据格式：$("#file")ajaxFrom({data:{},dataType:'json',...})。

Progress Bar

<div class="progress progress-striped">
       <div class="progress-bar progress-bar-success">0%</div>
</div>
<div id="status"></div>

Jquery & Form script

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

<script>
(function() {

var bar = $('.progress-bar');
var percent = $('.progress-bar');
var status = $('#status');

$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
}); 

})();       
</script>

 

参考：http://stackoverflow.com/questions/19042116/ajax-beginform-in-mvc-to-upload-files