4

我尝试在 wordpress 插件中添加多上传选项我在插件中重复了此代码（两次）只更改了 id 名称。

                    <script language="JavaScript">
jQuery(document).ready(function($) {
    jQuery('#upload_image_button').click(function() {
        formfield = jQuery('#upload_image').attr('name');
        tb_show('', 'media-upload.php?type=image&TB_iframe=true');
        return false;
    });

    window.send_to_editor = function(html) {
        imgurl = jQuery('img', html).attr('src');
        jQuery('#upload_image').val(imgurl);
        tb_remove();
    };

});
                    </script>
<input id="upload_image" style=" margin-left:303px;" type="text" size="36" name="upload_image_template" value="<?php echo get_option('upload_image_template'); ?>" />
                        <input id="upload_image_button" type="button" value="Browse" />

每当我尝试上传媒体框架来的图像并且上传过程成功完成时。但是 Insert Into Post 获取正确的 url 但粘贴在不同的输入框中。例如：

1) [text box1] [browse Button]
2) [text box2] [browse button]

当我使用文本框一上传图像时，[insert post]该图像路径显示在[text box 2] 我不确定是我的问题还是该脚本不支持多文件上传选项。

4

5 回答 5

16

以下是如何将 wordpress 多媒体上传器用于多个字段或多个字段的示例。JS代码和html代码是这样的

这个怎么运作

upload_image_button在此类函数触发器的基础上在每个上传按钮上添加类click以获取 wordpress 多媒体上传器，请参阅我已使用该prev()属性将前一个元素获取到单击的元素formfieldID=jQuery(this).prev().attr("id"); ，然后我已将上传器返回的图像 url 分配给formfieldID

 <input id="upload_image1" type="text" name="upload_image1" value="<?php echo $upload_image1;?>" />
    <input class="upload_image_button" type="button" value="Upload image 1" />

<input id="upload_image2" type="text"  name="upload_image2" value="<?php echo $upload_image2;?>" />
    <input class="upload_image_button" type="button" value="Upload image 2" />

<script type="text/javascript">
    //tb_show('', 'media-upload.php?TB_iframe=true');
    var upload_image_button=false;
    jQuery(document).ready(function() {

    jQuery('.upload_image_button').click(function() {
        upload_image_button =true;
        formfieldID=jQuery(this).prev().attr("id");
     formfield = jQuery("#"+formfieldID).attr('name');
     tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
        if(upload_image_button==true){

                var oldFunc = window.send_to_editor;
                window.send_to_editor = function(html) {

                imgurl = jQuery('img', html).attr('src');
                jQuery("#"+formfieldID).val(imgurl);
                 tb_remove();
                window.send_to_editor = oldFunc;
                }
        }
        upload_image_button=false;
    });


    })

</script>

还要确保您已包含上传者的必要文件JS和CSS文件，为此您必须添加一个操作

<?php
function my_admin_uploader_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}

function my_admin_uploader_styles() {
wp_enqueue_style('thickbox');
}
add_action('admin_print_scripts', 'my_admin_uploader_scripts');
add_action('admin_print_styles', 'my_admin_uploader_styles'); 
?>

注意：当您将上传器分配给您的输入字段时，还要注意一件事，上传器的控制现在分配给这些字段，因此当上传器被调用时，它会将图像 url 分配给您的文本字段，所以这是您的问题触发上传器您无法在帖子的内容区域中插入图像以实现此解决方案您必须将以前的控件存储在某个位置和完成上传器后，然后将上传器的控制重新分配给我拥有的上一个功能在我的 JS 代码中提供，请参阅下面它是如何工作的

 var oldFunc = window.send_to_editor;
                    window.send_to_editor = function(html) {

                    imgurl = jQuery('img', html).attr('src');
                    jQuery("#"+formfieldID).val(imgurl);
                     tb_remove();
                    window.send_to_editor = oldFunc;
                    }

我已经多次使用这种技术，它非常适合我

希望有意义

于 2013-07-19T20:25:15.397 回答
0

没那么难...

查看此修订历史以了解我是如何做到的...基本上我所做的是将其添加到我的插件中：

function wp_gear_manager_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_script('jquery');
}

function wp_gear_manager_admin_styles() {
wp_enqueue_style('thickbox');
}

add_action('admin_print_scripts', 'wp_gear_manager_admin_scripts');
add_action('admin_print_styles', 'wp_gear_manager_admin_styles');

后来这部分在我的 JavaScript 文件中：

<script language="JavaScript">
jQuery(document).ready(function() {
jQuery('#upload_image_button').click(function() {
formfield = jQuery('#upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});

window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image').val(imgurl);
tb_remove();
}

});
</script>

这在我的html中：

<tr valign="top">
    <td>Upload Image</td>
    <td><label for="upload_image">
        <input id="upload_image" type="text" size="36" name="upload_image" value="<?php echo $gearimage; ?>" />
        <input id="upload_image_button" type="button" value="Upload Image" />
        <br />Enter an URL or upload an image for the banner.
        </label>
    </td>
</tr>

您只需将此代码复制并粘贴到您的插件中即可看到神奇之处。

于 2014-02-17T10:41:27.843 回答
0

在这里，为了编辑图像工作，也显示其他过滤器，希望它有所帮助。

pa_uploader = wp.media({ 
            title: 'Choose Images',
            multiple: true,
            //frame: 'select',
            library: {
                filterable: 'all',
                editable: true,
                contentUserSetting: false
            },
            states: [
                new wp.media.controller.Library({
                    id:         'library',
                    title:      'Select Images',
                    priority:   40,
                    // toolbar:    'gallery',
                    filterable: 'all',
                    multiple:   'add',
                    editable:   true,
                    contentUserSetting: false,
                    library:  wp.media.query( _.defaults({
                        type: 'image'
                    }, {} ) )
                }),
                new wp.media.controller.EditImage({model: {}})
            ]
        });
       // pa_uploader.states.add([
       //       new wp.media.controller.EditImage({model: {}})
       //   ]);

        pa_uploader.on('content:render:edit-image', function() {
            var controller = pa_uploader.modal.controller;
                image = pa_uploader.state().get('image'),
                view = new wp.media.view.EditImage( { model: image, controller: controller } ).render();

            pa_uploader.content.set( view );

            // after creating the wrapper view, load the actual editor via an ajax call
            view.loadEditor();
        });
        pa_uploader.on('select', function(e){
            // This will return the selected image from the Media Uploader, the result is an object
            var selected_images = pa_uploader.state().get('selection');

                });
            });

        });
于 2016-04-12T15:33:12.847 回答
0

M Khalid Junaid的回答很棒，但已经过时了。

请参阅有关 wp.media 的 codex 页面：https ://codex.wordpress.org/Javascript_Reference/wp.media 。

于 2016-11-16T23:56:02.613 回答
0

这是我基于Codex wp.media 示例的代码

Javascript 

var sfieldGroup= '.field-group';   // top level parent  

var wpMediaUploader = { 
            sBtnAdd : ".upload-custom-wp-media",
            sBtnRemove : ".remove-custom-wp-media",
            sMediaData: ".media-data",
            sInput : ".custom-wp-media"
        };

 function wpMedia() {
        $(wpMediaUploader.sBtnAdd).on("click", function (event) {
            event.preventDefault();

            var self = $(this);
            var fieldGroup = self.parents(sfieldGroup);

            // Create a new media frame
            var frame = wp.media({
                title: "Select or Upload Media Of Your Chosen Persuasion",
                button: {
                    text: "Use this media"
                },
                multiple: false  // Set to true to allow multiple files to be selected
            });

            frame.on("select", function () {
                var attachment = frame.state().get("selection").first().toJSON();

                switch(attachment.mime){
                    case "image/jpeg" :
                    case "image/png" :
                    case "image/bmp" :
                    case "image/gif" :
                        fieldGroup.find(wpMediaUploader.sMediaData)
                            .append("<img src=\"" + attachment.url + "\" alt=\"\" />");
                        break;
                }

                $("<p/>",{
                    text: attachment.filename
                }).appendTo(fieldGroup.find(wpMediaUploader.sMediaData));

                fieldGroup.find(wpMediaUploader.sInput).val(attachment.id);
                fieldGroup.find(wpMediaUploader.sBtnAdd).addClass("hidden");
                fieldGroup.find(wpMediaUploader.sBtnRemove).removeClass("hidden");

                frame.close();
            });

            frame.open();
        });


        $(wpMediaUploader.sBtnRemove).on("click", function (event) {
            event.preventDefault();

            var self = $(this);
            var fieldGroup = self.parents(sfieldGroup); 


            // Clear out the preview image
            fieldGroup.find(wpMediaUploader.sMediaData).html("");

            // Un-hide the add image link
            fieldGroup.find(wpMediaUploader.sBtnAdd).removeClass("hidden");

            // Hide the delete image link
            fieldGroup.find(wpMediaUploader.sBtnRemove).addClass("hidden");

            // Delete the image id from the hidden input
            fieldGroup.find(wpMediaUploader.sInput).val("");
        });
    }

HTML

<div class="field-group">
    <div class="media-data"></div>
    <p class="hide-if-no-js">
        <a class="button upload-custom-wp-media" href="javascript:void(0)">Upload Media</a>
        <a class="button remove-custom-wp-media hidden" href="javascript:void(0)">Remove Selected Media</a>
    </p>
    <input id="test" name="test" class="custom-wp-media" value="" type="hidden">
</div>

提示
如果您使用 console.log 框架，您将接触到 API :)

            var frame = wp.media({
                title: "Select or Upload Media Of Your Chosen Persuasion",
                button: {
                    text: "Use this media"
                },
                multiple: false  // Set to true to allow multiple files to be selected
            });
于 2017-03-20T21:02:37.603 回答