如何在WordPress插件中使用多媒体上传器？

Question

我尝试在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] 我不确定问题是我的还是该脚本不支持多文件上传选项.

Answer 1

以下是如何将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;
                    }

我已多次使用这种技术,它对我来说非常适合

希望它有意义