jQuery ajax在asp.net mvc上传文件
在我看来，我有一个文件
<form id="upload" enctype="multipart/form-data"> <input type="file" name="fileUpload" id="fileUpload" size="23" /> </form> 和一个Ajax请求
$.ajax({ url: '<%=Url.Action("JsonSave","Survey") %>', dataType: 'json', processData: false, contentType: "multipart/mixed", data: { Id: selectedRow.Id, Value: 'some date was added by the user here :))' }, cache: false, success: function (data) {} });
但Request.Files中没有文件。 Ajax请求有什么问题？
在ASP.Net MVC中使用AJAX上传文件
HTML5以来的事情已经改变了
JavaScript的
document.getElementById('uploader').onsubmit = function () { var formdata = new FormData(); //FormData object var fileInput = document.getElementById('fileInput'); //Iterating through each files selected in fileInput for (i = 0; i < fileInput.files.length; i++) { //Appending each file to FormData object formdata.append(fileInput.files[i].name, fileInput.files[i]); } //Creating an XMLHttpRequest and sending var xhr = new XMLHttpRequest(); xhr.open('POST', '/Home/Upload'); xhr.send(formdata); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); } } return false; }
调节器
public JsonResult Upload() { for (int i = 0; i < Request.Files.Count; i++) { HttpPostedFileBase file = Request.Files[i]; //Uploaded file //Use the following properties to get file's name, size and MIMEType int fileSize = file.ContentLength; string fileName = file.FileName; string mimeType = file.ContentType; System.IO.Stream fileContent = file.InputStream; //To save file, use SaveAs method file.SaveAs(Server.MapPath("~/")+ fileName ); //File will be saved in application root } return Json("Uploaded " + Request.Files.Count + " files"); }
编辑 ：HTML
<form id="uploader"> <input id="fileInput" type="file" multiple> <input type="submit" value="Upload file" /> </form>
现在可以通过将FormData对象传递给$.ajax请求的data属性来实现AJAXfile upload。
作为OP特别要求jQuery的实现，在这里你去：
<form id="upload" enctype="multipart/form-data" action="@Url.Action("JsonSave", "Survey")" method="POST"> <input type="file" name="fileUpload" id="fileUpload" size="23" /><br /> <button>Upload!</button> </form>
$('#upload').submit(function(e) { e.preventDefault(); // stop the standard form submission $.ajax({ url: this.action, type: this.method, data: new FormData(this), cache: false, contentType: false, processData: false, success: function (data) { console.log(data.UploadedFileCount + ' file(s) uploaded successfully'); }, error: function(xhr, error, status) { console.log(error, status); } }); });
public JsonResult Survey() { for (int i = 0; i < Request.Files.Count; i++) { var file = Request.Files[i]; // save file as required here... } return Json(new { UploadedFileCount = Request.Files.Count }); }
MDN上FormData的更多信息
你不能通过ajax上传文件，你需要使用iFrame或其他一些欺骗手段来做完整的回发。 这主要是由于安全问题。
这里有一个体面的写作，包括 Steve Sanderson使用SWFUpload和ASP.Net MVC 的示例项目 。 这是我读到的第一件事情就是使用Asp.Net MVC（我当时也是MVC的新手）正确地工作，希望对您有所帮助。
如果使用ajax发布表单，那么你不能使用$ .ajax方法发送图像，你必须使用经典的xmlHttpobject方法来保存图像，其他的select使用提交types，而不是button
