jQuery Ajax, Formular mit Eingabe-Typ-Datei senden und JSON

Ich habe ein Formular mit mehreren Eingaben und anderen Feld.jQuery Ajax, Formular mit Eingabe-Typ-Datei senden und JSON

Ich habe eine Schaltfläche speichern, und wenn ich auf, ich das Formular mit Ajax mit jQuery senden:

$.ajax({ 
     type:  "POST", 
     dataType: "json", 
     url:  $('#ajaxUrl').val(), 
     data:  "action=save&" + form.serialize() 
});

Also, wenn ich nur einfache Eingabe wie Text haben, wählen etc .. es ist in Ordnung. Aber wenn ich eine Eingabedatei habe, kann ich meine Datei nicht abrufen. $ _FILES ist immer leer.

Wie kann ich das so einfach wie möglich machen?

Edit: Ich möchte nicht ein Plugin verwenden :)

Quelle

2013-07-18 Clément Andraud

Mit [formData] (https://developer.mozilla.org/en-US/docs/Web/API/FormData)! – adeneo

möglich Duplikat von [Wie kann ich Dateien asynchron mit jQuery hochladen?] (Http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchron-with-jquery) – Martijn

@ Clément Andraud, nicht Sicher, ob dir das weiterhilft oder nicht, aber schau bitte unter http: //wordpress.stackexchange nach.com/questions/71170/how-do-ich-upload-import-form-input-files-via-ajax-funktion Sie können eine Idee bekommen. –

ich diesen jQuery plugin verwendet haben, die Fähigkeiten zu upload files hat.

HTML:

<form action="file-echo2.php" method="post" enctype="multipart/form-data"> 
    <input type="file" name="myfile"><br> 
    <input type="submit" value="Upload File to Server"> 
</form>

Javascrtipt:

$('form').ajaxForm({ 
    beforeSend: function() { 

    }, 
    uploadProgress: function(event, position, total, percentComplete) { 

    }, 
    success: function() { 

    }, 
    complete: function(xhr) { 

    } 
});

Quelle

2013-07-18 08:40:07 LeftyX

Ich würde den gleichen Kommentar wie für Streetpc's Antwort machen +1 –

form.serialize keine Dateieingänge verwalten. Sie müssen eine XMLHttpRequest mit formData wie adeneo schlägt, siehe example usage here. Für ältere Browser gibt es Lösungen, die iframe verwenden und das Formular mit dem iframe als Ziel POSTing. Einige jquery plugins werden all das für Sie tun, wie zum Beispiel JQuery-File-Upload (aber es gibt viele andere).

Quelle

2013-07-18 08:41:19

Unterstützung für FormData Start in IE10, deshalb werde ich auch vorschlagen, ein Plugin zu verwenden, die iframe für die Unterstützung älterer Browser verwenden. +1 –

Hum, mein Problem, ich arbeite an einem benutzerdefinierten CMS. Die Funktion zum Speichern eines neuen Inhalts ist bereits schreiben .. Also wenn ich nur dieses Skript bearbeiten kann und nicht alles neu schreiben ... ^^ –

Nun, wenn Sie die Unterstützung älterer Browser ablehnen können, können Sie nur Ihr Skript bearbeiten, um formData zu verwenden. Wenn du es nicht kannst (IE 8 & 9 ist ziemlich drastisch), fürchte ich, dass du ein bisschen weiter gehen musst. Aber einige Plugins werden all das Schweresheben erledigen, also sollte es nicht sehr kompliziert sein. –

Ich fand diese little "vanilla" framework durch Abfragen von "Using FormData Objects" auf Google.

AJAXSubmit(myForm);

nur auf

function ajaxSuccess(){/*here*/}

, wenn Sie auf ajaxSuccess console.log(), um die Antwort zu ändern, um die Daten zu über Server sehen kann:

durch verwendet. Es ist auf submittedData Eigentum.

Quelle

2014-06-03 07:04:48 marlo

Implementierung für ASP.NET MVC:

So starten Sie Ihre form Wrapper machen:

<form id="inputform"> 
    <input class="hide" type="file" name="file" id="file" /> 
</form>

Сreate ein Client-Handler senden:

$("#yourButton").bind('click', function() { 
    var data = new window.FormData($('#inputform')[0]); 
    $.ajax({ 
     xhr: function() { 
      return $.ajaxSettings.xhr(); 
     }, 
     type: "POST", 
     data: data, 
     cache: false, 
     contentType: false, 
     processData: false, 
     url: "@Url.Action("MethodName", "ControllerName")", 
     success: function() { }, 
     error: function() { }, 
    }); 
});

Do-Handler auf dem Server Seite (Controller):

public ActionResult MethodName(HttpPostedFileWrapper file) { 
    var img = Image.FromStream(file.InputStream); 
     .... 
     return ..; 
    }

Ich hoffe, das hilft Ihnen Zeit zu sparen;)

Quelle

2014-09-01 12:56:42 Sevenbi

jQuery Ajax, Formular mit Eingabe-Typ-Datei senden und JSON

Antwort

Verwandte Themen