如何在Wordpress插件中添加媒体上传器 [英] How to add the media uploader in wordpress plugin

问题描述

我阅读了一些有关如何将媒体上传器集成到wordpress插件中的教程.我根据本教程制作媒体上传器. http://wordpress.org /support/topic/howto-the-media-library-in-to-a-plugin?replies = 4 我这样做，并且效果很好.当我多次尝试使用同一脚本多次媒体上载程序时，这是我尝试仅更改特定文本字段ID的小提琴. http://jsfiddle.net/UrXPe/1/ 仍然，当我单击上载时，一切都将做得完美.唯一的事情是，如果我单击insert into post，则图像的url出现在第二个浏览字段中.这是我确切面对的屏幕截图.

I read out some of the tutorial for how to integrate the media uploader in wordpress plugins. I do the media uploader based on the tutorial. http://wordpress.org/support/topic/howto-integrate-the-media-library-into-a-plugin?replies=4 I do this and it perfectly working. When i tried the same script again for multiple times of media uploader, Here is the fiddle i tried simply changed the id of the particular text field. http://jsfiddle.net/UrXPe/1/ Still when i click the upload all is to be to done perfect. only thing if i click insert into post it url of the image appear in the second browse field. Here is the screenshot what i face exactly.

当我在插入帖子后单击第一个上传字段(上传过程成功)时，相应的媒体URL出现在第二个字段中而不是第一个字段中.我不确定哪里有什么建议会很好.

When i click the first upload field (uploading process are success) after insert into post that corresponding media url is appear in the second field not in first. I am not sure where is the problem any suggestion would be great.

推荐答案

更新-向下滚动

经过大量的努力和研究以及一些自定义之后，我在紧凑的几行代码下进行了编码，以在wordpress的任何位置使用媒体上传器.只需将代码放在某个函数中，然后在任何需要的地方调用该函数即可. 上传/选择的文件的路径将被复制到文本框中，然后您可以使用它.

After too much of hard work and research and some customization I coded below compact few lines of code to use media uploader anywhere in wordpress. Just put code in some function and call that function wherever you want. The path of uploaded/selected file will be copied to text-box and then you can use it.

希望这对某人有帮助.！

Hope this helps someone.!

// jQuery
wp_enqueue_script('jquery');
// This will enqueue the Media Uploader script
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',
            // mutiple: true if you want to upload multiple files at once
            multiple: false
        }).open()
        .on('select', function(e){
            // This will return the selected image from the Media Uploader, the result is an object
            var uploaded_image = image.state().get('selection').first();
            // We convert uploaded_image to a JSON object to make accessing it easier
            // Output to the console uploaded_image
            console.log(uploaded_image);
            var image_url = uploaded_image.toJSON().url;
            // Let's assign the url value to the input field
            $('#image_url').val(image_url);
        });
    });
});
</script>

更新:仅用于添加.您可能需要在插件/主题文件中添加功能包装器.这是以下内容:

UPDATE: Just to add. You may need to add the function wrapper in your plugin/theme file. This is the following:

// UPLOAD ENGINE
function load_wp_media_files() {
    wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );

如果WP无法加载上传管理器，这将调用相关的JS文件和CSS文件.这也会删除控制台警告.

This will call the relevant JS files and CSS files if WP fails to load the upload manager. This also removes console warnings.

这篇关于如何在Wordpress插件中添加媒体上传器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！