Ich habe eine Datei in meiner Ansicht
<form id="upload" enctype="multipart/form-data">
<input type="file" name="fileUpload" id="fileUpload" size="23" />
</form>
und eine Ajax-Anfrage
$.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) {}
});
Die Request.Files enthalten jedoch keine Datei . Was ist los mit der Ajax-Anfrage?
jquery
asp.net-mvc
ajax
CoffeeCode
quelle
quelle
Antworten:
Laden Sie Dateien mit AJAX in ASP.Net MVC hoch
Die Dinge haben sich seit HTML5 geändert
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; }
Regler
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"); }
EDIT : Der HTML
<form id="uploader"> <input id="fileInput" type="file" multiple> <input type="submit" value="Upload file" /> </form>
quelle
Das Hochladen von AJAX-Dateien ist jetzt möglich, indem ein
FormData
Objekt an diedata
Eigenschaft von übergeben wird$.ajax
Anforderung übergeben wird.Da das OP speziell nach einer jQuery-Implementierung gefragt hat, können Sie Folgendes tun:
<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 }); }
Weitere Informationen zu FormData bei MDN
quelle
Sie können keine Dateien über Ajax hochladen. Sie müssen einen iFrame oder einen anderen Trick verwenden, um ein vollständiges Postback durchzuführen. Dies ist hauptsächlich auf Sicherheitsbedenken zurückzuführen.
Hier ist eine anständige Zusammenfassung, einschließlich eines Beispielprojekts mit SWFUpload und ASP.Net MVC von Steve Sanderson. Es ist das erste, was ich gelesen habe, damit dies mit Asp.Net MVC richtig funktioniert (ich war zu diesem Zeitpunkt auch neu bei MVC), hoffentlich ist es für Sie genauso hilfreich.
quelle
Ich habe ein Beispiel wie dieses auf vuejs Version: v2.5.2
<form action="url" method="post" enctype="multipart/form-data"> <div class="col-md-6"> <input type="file" class="image_0" name="FilesFront" ref="FilesFront" /> </div> <div class="col-md-6"> <input type="file" class="image_1" name="FilesBack" ref="FilesBack" /> </div> </form> <script> Vue.component('v-bl-document', { template: '#document-item-template', props: ['doc'], data: function () { return { document: this.doc }; }, methods: { submit: function () { event.preventDefault(); var data = new FormData(); var _doc = this.document; Object.keys(_doc).forEach(function (key) { data.append(key, _doc[key]); }); var _refs = this.$refs; Object.keys(_refs).forEach(function (key) { data.append(key, _refs[key].files[0]); }); debugger; $.ajax({ type: "POST", data: data, url: url, cache: false, contentType: false, processData: false, success: function (result) { //do something }, }); } } }); </script>
quelle
Wenn Sie ein Formular mit Ajax veröffentlichen, können Sie kein Bild mit der $ .ajax-Methode senden. Sie müssen die klassische xmlHttpobject-Methode zum Speichern des Bildes verwenden. Eine andere Alternative ist der Submit-Typ anstelle der Schaltfläche
quelle