【轉】利用Ajax.BeginForm提交檔案

標籤：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提交檔案