但我不断收到“失败”错误消息框
Index.cshtml
<script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> <h2>Files Upload</h2> <script type="text/javascript"> $(function() { $("#form0").submit(function(event) { var dataString; event.preventDefault(); var action = $("#form0").attr("action"); if ($("#form0").attr("enctype") == "multipart/form-data") { //this only works in some browsers. //purpose? to submit files over ajax. because screw iframes. //also, we need to call .get(0) on the jQuery element to turn it into a regular DOM element so that FormData can use it. dataString = new FormData($("#form0").get(0)); contentType = false; processData = false; } else { // regular form, do your own thing if you need it } $.ajax({ type: "POST", url: action, data: dataString, dataType: "json", //change to your own, else read my note above on enabling the JsonValueProviderFactory in MVC contentType: contentType, processData: processData, success: function(data) { //BTW, data is one of the worst names you can make for a variable }, error: function(jqXHR, textStatus, errorThrown) { //do your own thing alert("fail"); } }); }); //end .submit() }); </script> <div id="uploadDiv"> @Html.Action("Files", "Home") </div> @using (Ajax.BeginForm("Files", "Home", new AjaxOptions { UpdateTargetId = "uploadDiv", HttpMethod = "Post" }, new { enctype = "multipart/form-data", @id="form0"})) { <div> <div>Upload new file: <input type="file" name="file" /></div> <input type="submit" value="Save" /> </div> } <br />
控制者
public PartialViewResult Files(HttpPostedFileBase file) { IEnumerable<string> files; if ((file != null) && (file.ContentLength > 0)) { string fileName = file.FileName; string saveLocation = @"D:\Files"; string fullFilePath = Path.Combine(saveLocation, fileName); try { file.SaveAs(fullFilePath); FileInfo fileInfo = new FileInfo(fullFilePath); file.InputStream.Read(new byte[fileInfo.Length], 0, file.ContentLength); } catch (Exception e) { TempData["FileUpload"] = e.Message; return PartialView(); } files = Directory.GetFiles(@"D:\Files\"); return PartialView(files); } else { files = Directory.GetFiles(@"D:\Files\"); return PartialView(files); } }
Files.cshtml
@model IEnumerable<string> @foreach (string f in Model) { <p>@f</p> }
Global.asax
ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
更好的方法是使用jquery表单插件。
这是示例:
Html.BeginForm
@using (Html.BeginForm("YourAction", "YourController")) { @Html.AntiForgeryToken() <input type="file" name="files"><br> <input type="submit" value="Upload File to Server"> }
行动方法
[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); } } } }
进度条
<div class="progress progress-striped"> <div class="progress-bar progress-bar-success">0%</div> </div>
jQuery和表单脚本
<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,只需将其转换为Html.BeginForm()。