利用Ajax.BeginForm提交文件

浏览数：44 / 时间：2015年06月09日

Ajax.BeginForm

 @using (Ajax.BeginForm("YourAction", "YourController", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()
    <input type="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);
                }
            }
        }
    }

【引者注.有时加入 [ValidateAntiForgeryToken]注解会出错，具体原因不明，可删除这行注释】

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>