Use Media Uploader in Plugin

时间:2015-09-23 作者:Interactive

我想向插件添加媒体上载程序。

我已经找到并阅读了This

它确实显示了媒体上传器,让我选择一个图像,但当它上传时,给了我一些糟糕的错误:Error occurred during upload. Try again later.<这可能有点小偏差,因为我翻译了它。

我不知道如何在这里寻找真正的错误<谁能告诉我怎么找到它吗?

<?php
wp_enqueue_script(\'jquery\');
wp_enqueue_media();
?>
<div>
    <label for="image_url">Image</label>
    <input type="text" name="image_url" id="image_url" class="regular-text">
    <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">

</div>
<script type="text/javascript">
jQuery(document).ready(function($){
      $(\'#upload-btn\').click(function(e) {
             e.preventDefault();
             var image = wp.media({ 
             title: \'Upload Image\',
             multiple: false
      }).open()
      .on(\'select\', function(e){
     var uploaded_image = image.state().get(\'selection\').first();
     console.log(uploaded_image);
     var image_url = uploaded_image.toJSON().url;
     $(\'#image_url\').val(image_url);
 });
});
});
</script>
如果可能,我想向媒体上载程序添加一个项目:
选择一个文件夹将文件上载到其中
不是由正在上载的人创建,而是由我在上载之前创建的文件夹创建

M

---------------------------------------更新:奇怪的事情发生了,我已经禁用了WP\\u调试功能,现在一切都正常了。如果我设置为true 没有错误。。。

2 个回复
最合适的回答,由SO网友:dev 整理而成

尝试使用此代码:

define("ME_URL", rtrim(WP_PLUGIN_URL,\'/\') . \'/\' . basename(dirname(__FILE__)));
define("ME_DIR", rtrim(dirname(__FILE__), \'/\'));
    
function my_admin_scripts() {
    wp_enqueue_script(\'media-upload\');
    wp_enqueue_script(\'thickbox\');
}
    
function my_admin_styles() {
    wp_enqueue_style(\'thickbox\');
}
    
add_action(\'admin_print_scripts\', \'my_admin_scripts\');
add_action(\'admin_print_styles\', \'my_admin_styles\');
<td>
    <img src="<?php echo esc_attr( get_the_author_meta( \'profileimage\', $user->ID ) ); ?>" id="ppimage">
    <input type="text" name="profileimage" id="profileimagetxt" value="<?php echo esc_attr( get_the_author_meta( \'profileimage\', $user->ID ) ); ?>" class="regular-text" /><br />
    <input type="button" id="profileimage" value="Upload Image">
    <span class="description"><?php _e("profileimage"); ?></span>
</td>
</tr>
<script type="text/javascript">
    $ = jQuery.noConflict();
    $(document).ready(function($){
      $(\'#profileimage\').live(\'click\',function() {
        formfield = $(\'#upload_image\').attr(\'name\');
        tb_show(\'\', \'media-upload.php?type=image&amp;TB_iframe=true\');
        return false;
      });
    
      window.send_to_editor = function(html) {
        imgurl = $(\'img\',html).attr(\'src\');
        $(\'#profileimagetxt\').val(imgurl);
        $(\'#ppimage\').attr(\'src\',imgurl);
        tb_remove();
      }
    });
</script>
希望对您有用:)

SO网友:Rohit Kaushik

您可以尝试此代码,这里是带有插件的参考路径。http://blog.adlivetech.com/use-wordpress-media-upload-custom-code/

<?php
if ( isset( $_POST[\'submit_image_selector\'] ) && isset( $_POST[\'image_attachment_id\'] ) ) :
        update_option( \'media_selector_attachment_id\', absint( $_POST[\'image_attachment_id\'] ) );
    endif;
    wp_enqueue_media();
    ?><form method=\'post\'>
        <div class=\'image-preview-wrapper\'>
            <img id=\'image-preview\' src=\'<?php echo wp_get_attachment_url( get_option( \'media_selector_attachment_id\' ) ); ?>\' width=\'200\'>
        </div>
        <input id="upload_image_button" type="button" class="button" value="<?php _e( \'Upload image\' ); ?>" />
        <input type=\'hidden\' name=\'image_attachment_id\' id=\'image_attachment_id\' value=\'<?php echo get_option( \'media_selector_attachment_id\' ); ?>\'>
        <input type="submit" name="submit_image_selector" value="Save" class="button-primary">
    </form>
<?php
$my_saved_attachment_post_id = get_option( \'media_selector_attachment_id\', 0 );
    ?><script type=\'text/javascript\'>
        jQuery( document ).ready( function( $ ) {
            // Uploading files
            var file_frame;
            var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
            var set_to_post_id = <?php echo $my_saved_attachment_post_id; ?>; // Set this
            jQuery(\'#upload_image_button\').on(\'click\', function( event ){
                event.preventDefault();
                // If the media frame already exists, reopen it.
                if ( file_frame ) {
                    // Set the post ID to what we want
                    file_frame.uploader.uploader.param( \'post_id\', set_to_post_id );
                    // Open frame
                    file_frame.open();
                    return;
                } else {
                    // Set the wp.media post id so the uploader grabs the ID we want when initialised
                    wp.media.model.settings.post.id = set_to_post_id;
                }
                // Create the media frame.
                file_frame = wp.media.frames.file_frame = wp.media({
                    title: \'Select a image to upload\',
                    button: {
                        text: \'Use this image\',
                    },
                    multiple: false // Set to true to allow multiple files to be selected
                });
                // When an image is selected, run a callback.
                file_frame.on( \'select\', function() {
                    // We set multiple to false so only get one image from the uploader
                    attachment = file_frame.state().get(\'selection\').first().toJSON();
                    // Do something with attachment.id and/or attachment.url here
                    $( \'#image-preview\' ).attr( \'src\', attachment.url ).css( \'width\', \'auto\' );
                    $( \'#image_attachment_id\' ).val( attachment.id );
                    // Restore the main post ID
                    wp.media.model.settings.post.id = wp_media_post_id;
                });
                    // Finally, open the modal
                    file_frame.open();
            });
            // Restore the main ID when the add media button is pressed
            jQuery( \'a.add_media\' ).on( \'click\', function() {
                wp.media.model.settings.post.id = wp_media_post_id;
            });
        });
    </script>