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
时间: 2024-10-11 16:41:20