Dies ist mein HTML-Code, den ich dynamisch mithilfe der Drag & Drop-Funktion generiere.
<form method="POST" id="contact" name="13" class="form-horizontal wpc_contact" novalidate="novalidate" enctype="multipart/form-data">
<fieldset>
<div id="legend" class="">
<legend class="">file demoe 1</legend>
<div id="alert-message" class="alert hidden"></div>
</div>
<div class="control-group">
<!-- Text input-->
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" placeholder="placeholder" class="input-xlarge" name="name">
<p class="help-block" style="display:none;">text_input</p>
</div>
<div class="control-group"> </div>
<label class="control-label">File Button</label>
<!-- File Upload -->
<div class="controls">
<input class="input-file" id="fileInput" type="file" name="file">
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<button class="btn btn-success">Button</button>
</div>
</div>
</fieldset>
</form>
Dies ist mein JavaScript-Code:
<script>
$('.wpc_contact').submit(function(event){
var formname = $('.wpc_contact').attr('name');
var form = $('.wpc_contact').serialize();
var FormData = new FormData($(form)[1]);
$.ajax({
url : '<?php echo plugins_url(); ?>'+'/wpc-contact-form/resources/js/tinymce.php',
data : {form:form,formname:formname,ipadd:ipadd,FormData:FormData},
type : 'POST',
processData: false,
contentType: false,
success : function(data){
alert(data);
}
});
}
formData();
Append-Methode verfügt über einen optionalen dritten Parameter für eine Datei.Antworten:
Für eine korrekte Verwendung der Formulardaten müssen Sie zwei Schritte ausführen.
Vorbereitungen
Sie können FormData () Ihr gesamtes Formular zur Verarbeitung übergeben
oder genaue Daten für FormData () angeben
Formular senden
Eine Ajax-Anfrage mit jquery sieht folgendermaßen aus:
Danach wird eine Ajax-Anfrage gesendet, wie Sie das reguläre Formular mit senden
enctype="multipart/form-data"
Update: Diese Anforderung kann nicht ohne
type:"POST"
Optionen funktionieren , da alle Dateien per POST-Anforderung gesendet werden müssen.Hinweis:
contentType: false
Nur ab jQuery 1.6 verfügbarquelle
getCsrfToken
?$('form')
, wird das jQuery-Objekt zurückgegeben. Wir benötigen hier jedoch ein reguläres js-Objekt ohne jQuery-Funktionalität. Deshalb erhalten wir reguläre Objekte mit[0]
Notation. Anstelle dieser Konstruktion können Sie auch anrufendocument.getElementById()
oder simulieren.Ich kann oben keinen Kommentar hinzufügen, da ich nicht genug Ruf habe, aber die obige Antwort war fast perfekt für mich, außer ich musste hinzufügen
Typ: "POST"
zum .ajax Anruf. Ich kratzte mir ein paar Minuten am Kopf, um herauszufinden, was ich falsch gemacht hatte. Das ist alles, was ich brauchte, und es ist ein Vergnügen. Das ist also der ganze Ausschnitt:
Volle Anerkennung für die Antwort über mir, dies ist nur eine kleine Änderung. Dies ist nur für den Fall, dass jemand anderes stecken bleibt und das Offensichtliche nicht sehen kann.
quelle
jQuery mit CodeIgniter-Datei hochladen:
Sie können verwenden.
oder
Beides wird funktionieren.
quelle
quelle
quelle
quelle
Tatsächlich zeigt die Dokumentation, dass Sie
XMLHttpRequest().send()
einfach multiforme Daten senden können, falls jquery nicht funktioniertquelle
Verwenden Sie besser das native Javascript, um das Element anhand der folgenden ID zu finden: document.getElementById ("yourFormElementID") .
quelle
Guten Morgen.
Ich hatte das gleiche Problem beim Hochladen mehrerer Bilder. Die Lösung war einfacher als ich es mir vorgestellt hatte: Fügen Sie [] in das Namensfeld ein.
Ich habe keine Änderungen an FormData vorgenommen.
quelle