我试图使用这里提到的示例
How to do a ASP.NET MVC Ajax form post with multipart/form-data?
但我不断收到“失败”的错误信息框
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],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 forms plugin。
下面是示例:
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()。有关更多说明和下载示例代码,请参阅this blog。