码迷,mamicode.com
首页 > Web开发 > 详细

【转】利用Ajax.BeginForm提交文件

时间:2014-12-01 20:47:58      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   ar   color   os   sp   

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>

 

【转】利用Ajax.BeginForm提交文件

标签:des   style   blog   http   io   ar   color   os   sp   

原文地址:http://www.cnblogs.com/leon719/p/4135783.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!