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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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 > )

                {

                    // 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>