Ich versuche, eine Audiodatei über das Formular AJAX hochzuladen.
Hier ist mein HTML-Code in der Profilbearbeitungsvorlage.
<form method="post" id="my_upload_form" action="" enctype="multipart/form-data">
<input type="file" name="file" id="my_file_input" accept="audio/*">
<input type="submit" class="btn-submit btn-sumary" value="upload audio file" name="submit" id="my_audio_submit">
<div id="my_error_report"></div>
</form>
Hier ist meine jQuery:
$('#my_upload_form').submit(function () {
var css = 'font:Helvetica; color:red; font-size:1.5em; padding:inherit;';
var html = '<strong><em> ' + '<p style="' + css + '">' + '*';
var endHtml = '</p></em></strong>';
var formData = new FormData();
var fileArray = jQuery('#my_file_input').prop('files');
if(fileArray.length > 0) {
var theTrack = fileArray[0];
formData.append("music", theTrack);
} else {
jQuery('#my_error_report').html( html + 'no track selected' + endHtml );
return false;
}
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
// async: false,
data: {
action : 'my_track_upload',
some_data : formData
},
// dataType: 'text'
}).success( function( data ) {
/* You win! */
alert('ajax was called success');
}).fail( function( data ) {
/* You lose, show error */
alert('ajax was called failure');
});
return false;
});
Zum Schluss ist hier mein Plugin-Code:
add_action('wp_ajax_my_track_upload', 'my_track_upload');
function my_track_upload()
{
die('hello');
}
Problem (weitere werden folgen): Warum wird die Seite aktualisiert? Ich gebe im jQuery-Ereignis 'submit' false zurück.
************************BEARBEITEN********************
Ich habe meinen Code wie folgt geändert und er funktioniert jetzt, obwohl ich nicht genau weiß, wo das Problem lag.
... ... ...
var theTrack = fileArray[0];
formData.append('action', 'musistic_track_upload');
formData.append("music", theTrack);
enter code here
... ... ...
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
data: formData,
enctype: 'multipart/form-data',
contentType: false,
processData: false,
datatype: "script",
beforeSend: function() {
jQuery('#my_error_report').html('');
}
}).complete(function( data ) {
jQuery('#my_error_report').html( html + data.responseText + endHtml );
jQuery('#my_audio_submit').val("Upload Audio File", function() {
jQuery(this).prop('disabled', false);
});
});
return false;
In meiner Abfrage AJAX fehlte eine wichtige Zeile. Ohne diese Option schlägt der Anruf fehl und die Seiten werden aktualisiert.
processData: false,
Versuchen Sie es mit preventDefault()
, eine jQuery-Funktion zum Verhindern von Standardaktionen, die vom Browser aufgerufen werden.
Rufen Sie zuerst einen Event-Handler auf, indem Sie Ihren Submitter starten. Sie können dies wie folgt tun:
$('#my_upload_form').submit(function (event) {
Nachdem Sie eine Übermittlung abgefangen und ein Ereignis damit ausgelöst haben, sollten Sie die Standardaktualisierung eines Browsers verhindern:
event.preventDefault();
Nun sieht Ihr Code wie folgt aus:
$('#my_upload_form').submit(function (event) {
event.preventDefault();
var css = 'font:Helvetica; color:red; font-size:1.5em; padding:inherit;';
var html = '<strong><em> ' + '<p style="' + css + '">' + '*';
var endHtml = '</p></em></strong>';
var formData = new FormData();
var fileArray = jQuery('#my_file_input').prop('files');
if(fileArray.length > 0) {
var theTrack = fileArray[0];
formData.append("music", theTrack);
} else {
jQuery('#my_error_report').html( html + 'no track selected' + endHtml );
return false;
}
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
// async: false,
data: {
action : 'my_track_upload',
some_data : formData
},
// dataType: 'text'
}).success( function( data ) {
/* You win! */
alert('ajax was called success');
}).fail( function( data ) {
/* You lose, show error */
alert('ajax was called failure');
});
});
Übrigens: Versuchen Sie immer, preventDefault()
über der Funktion zu platzieren. Sie sollte die Standardaktion verhindern, bevor etwas anderes getan wird.