所以我一直在阅读WordPress前端的AJAX文件上传教程。目前我什么都没用。对我来说最有意义的是：http://theaveragedev.com/wordpress-files-ajax/
这是我的代码：
在我的模板文件示例中。php
<script>var ajax_url = "<?php echo admin_url(\'admin-ajax.php\'); ?>"</script>
<form id="file_form">
<?php wp_nonce_field(\'ajax_file_nonce\', \'security\'); ?>
<input type="hidden" name="action" value="my_file_upload">
<label for="file_upload">It\'s a file upload...</label>
<input type="file" name="file_upload">
<input type="submit" value="Go">
</form>
jQuery(document).ready(function(){
var form_data = {};
$(this).find(\'input\').each(function(){
form_data[this.name] = $(this).val();
});
$(\'#file_form\').ajaxForm({
url: ajax_url, // there on the admin side, do-it-yourself on the front-end
data: form_data,
type: \'POST\',
contentType: \'json\',
success: function(response){
alert(response.message);
}
});
});
function q_scripts(){
$src = get_template_directory_uri().\'/js/ajax-file-upload.js\';
wp_enqueue_script(\'my_ajax_file_uploader_thing\', $src, array(\'jquery\', \'jquery-form\'));
}
add_action(\'init\', \'q_scripts\');
function handle_file_upload(){
check_ajax_referer(\'ajax_file_nonce\', \'security\');
if(!(is_array($_POST) && is_array($_FILES) && defined(\'DOING_AJAX\') && DOING_AJAX)){
return;
}
if(!function_exists(\'wp_handle_upload\')){
require_once(ABSPATH . \'wp-admin/includes/file.php\');
}
$upload_overrides = array(\'test_form\' => false);
$response = array();
foreach($_FILES as $file){
$file_info = wp_handle_upload($file, $upload_overrides);
// do something with the file info...
$response[\'message\'] = \'Done!\';
}
echo json_encode($response);
die();
}
add_action(\'wp_ajax_my_file_upload\', \'handle_file_upload\');
EDIT
“未定义”问题现在已经消失了，因为我编辑了js文件，使其具有一个click事件，并更改了表单输入循环的选择器：jQuery(document).ready(function($){
$(\'#file_form :submit\').click(function() {
var form_data = {};
$(\'#file_form\').find(\'input\').each(function () {
form_data[this.name] = $(this).val();
});
console.log(form_data);
$(\'#file_form\').ajaxForm({
url: ajax_url, // there on the admin side, do-it-yourself on the front-end
data: form_data,
type: \'POST\',
contentType: \'json\',
success: function (response) {
alert(response.message);
},
error: function (response) {
console.log(\'error\');
}
});
return false;
});
});
我正在向控制台写入file对象，以便查看正在发生的情况。下面是一个例子：
Object {security: "e6db2a6eee", _wp_http_referer: "/chat?sessionappid=138", action: "my_file_upload", file_upload: "C:\\fakepath\\download.jpg", "": "Go"}