这是我能够找到的解决方案,实际上我看到了很多常见的错误。
JS中没有正确附加文件dataFilter: function() 可以替换为dataType: \'json\'
.可替换为event.stopPropagation()
&;e.preventDefault()
.在HTML中添加空表单操作用于AJAX的PHP函数没有以die()结尾
HTML
<form id="form_import" name="form_import" method="post" enctype="multipart/form-data" action >
<input id="file_import" name="import_data" type="file" />
<br/>
<button id="btn_import" type="submit" >Import</button>
</form>
JavaScript
jQuery(document).ready(function($){
// PHP files could echo an Nonce. This however localizes scripts.
var importNonce = localizedData.import_nonce;
$(\'#form_import\').submit( function( event ) {
event.stopPropagation(); // Stop stuff happening
event.preventDefault(); // Totally stop stuff happening
var formData = new FormData();
var importFiles = $(\'#file_import\')[0].files;
// For EACH file, append to formData.
// NOTE: Just appending all of importFiles doesn\'t transition well to PHP.
jQuery.each( importFiles, function( index, value ) {
var name = \'file_\' + index;
formData.append( name, value )
});
formData.append( \'action\', \'ajax_file_import\' );
formData.append( \'_ajax_nonce\', importNonce );
jQuery.ajax({
url: ajaxurl,
type: \'POST\',
data: formData,
cache: false,
dataType: \'json\', // This replaces dataFilter: function() && JSON.parse( data ).
processData: false, // Don\'t process the files
contentType: false, // Set content type to false as jQuery will tell the server its a query string request
beforeSend: function( jqXHR, settings ){
// (OPTIONAL) Alt. AJAX concept.
// Removes the old IFrame if any.
var element = document.getElementById(\'import_IF\');
if ( element !== null ){
element.parentNode.removeChild( element );
}
// END (OPTIONAL).
},
success: function( data, textStatus, jqXHR ) {
console.log( \'Return from PHP AJAX function/method.\' );
// Do stuff with data.values
// (OPTIONAL) Alt. AJAX concept.
// Required for downloading in AJAX.
var paramStr = \'\';
paramStr += \'?_ajax_nonce=\' + data._ajax_nonce;
paramStr += \'&action=\' + data.action;
paramStr += \'&filename=\' + data.filename;
var elemIF = document.createElement("iframe");
elemIF.id = \'import_IF\'
elemIF.style.display = "none";
elemIF.src = ajaxurl + paramStr;
document.body.appendChild(elemIF);
elemIF.parentNode.removeChild(elemIF);
// END (OPTIONAL).
},
complete: function(jqXHR, textStatus){
console.log( \'AJAX is complete.\' );
// (OPTIONAL) Alt. AJAX concept.
// Clean up IFrame.
var element = document.getElementById(\'import_IF\');
if ( element !== null ){
element.parentNode.removeChild( element );
}
// END (OPTIONAL).
}
});// End AJAX.
});// End .submit().
});
PHP
<?php
class server {
public function __construct() {
// Example for adding script.
add_action( \'admin_enqueue_scripts\', array( $this, \'enqueue_example\' ) );
add_action( \'wp_ajax_ajax_file_import\', array( $this, \'ajax_import_example\' ) );
}
public funtion enqueue_example() {
wp_register_script(
\'example-js\',
FILE_URL,
array(),
VERSION,
false
);
wp_enqueue_script( \'example-js\' );
$data = array(
\'import_nonce\' => wp_create_nonce( \'ajax_file_import_nonce\' ),
);
wp_localize_script( \'example-js\', \'localizedData\', $data );
}
public function ajax_import_example() {
check_ajax_referer( \'ajax_file_import_nonce\' );
$raw_content = array();
$i = 0;
while ( isset( $_FILES[ \'file_\' . $i ] ) ) {
$file_arr = $_FILES[ \'file_\' . $i ];
$file_content = file_get_contents( $file_arr[\'tmp_name\'] );
$raw_content[] = json_decode( $file_content );
$i++;
}
$new_data = array();
// Do Stuff with new data.
update_option( \'example_database\', $new_data );
// (OPTIONAL) Add data to return to AJAX Success
$rtn_data = array(
\'action\' => \'apl_import\',
\'_ajax_nonce\' => wp_create_nonce( \'alt_ajax\' ),
);
echo json_encode( $rtn_data );
// END (OPTIONAL).
die();
}
}
?>