使用Wordpress defult media uploader并在jquery响应中获取上载链接退出很容易
<label for="upload_image">
<input id="upload_image" type="text" size="36" name="ad_image" value="http://" />
<input id="upload_image_button" class="button" type="button" value="Upload Image" />
<br />Enter a URL or upload an image
</label>
<?php
add_action(\'admin_enqueue_scripts\', \'my_admin_scripts\');
function my_admin_scripts() {
if (isset($_GET[\'page\']) && $_GET[\'page\'] == \'my_plugin_page\') {
wp_enqueue_media();
wp_register_script(\'my-admin-js\', WP_PLUGIN_URL.\'/my-plugin/my-admin.js\', array(\'jquery\'));
wp_enqueue_script(\'my-admin-js\');
}
}
?>
<script>
jQuery(document).ready(function($){
var custom_uploader;
$(\'#upload_image_button\').click(function(e) {
e.preventDefault();
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: \'Choose Image\',
button: {
text: \'Choose Image\'
},
multiple: true
});
//When a file is selected, grab the URL and set it as the text field\'s value
custom_uploader.on(\'select\', function() {
console.log(custom_uploader.state().get(\'selection\').toJSON());
attachment = custom_uploader.state().get(\'selection\').first().toJSON();
$(\'#upload_image\').val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
});
</script>