如何在WordPress插件中使用多媒体上传器？ [英] How can I use Multi Media Uploader in the WordPress Plugins?

问题描述

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

I try to add the multi uploading options in the wordpress plugins I repeated this code in the plugin(two times) only changing the id name.

                    <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但粘贴在不同的输入框中。
例如：

Whenever I try to upload a image that media frame comes and the uploading process are did successfully. But Insert Into Post fetch the correct url but pasted in different input box. For example:

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

当我使用文本框一上传图像 [插入帖子] 该图像路径显示在 [文本框2]
我不确定问题是我的还是那个脚本不支持多文件上传选项。

When I upload image with Text Box One that [insert post] that image path is shown in [text box 2] I am Not Sure Whether the Problem is mine or that script didn't support multi file upload option.

推荐答案

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

Here is the example how you can use the wordpress multimedia uploader for more than one field or as many fields. The JS code and html code looks like this

在每个上传按钮上添加 upload_image_button 类，基于此类点击函数触发器来获取wordpress多媒体上传器，请参阅我已使用 prev（）属性将前一个元素获取到单击的 formfieldID = jQuery（this）.prev（ ）.attr（id）; 然后我将上传者返回的图片网址分配给 formfieldID

Add upload_image_button class on each upload button on the basis of this class click function triggers to fetch the wordpress multimedia uploader , see i have used the prev() property to get the previous element to the clicked one formfieldID=jQuery(this).prev().attr("id"); and then i have assigned the image url returned by uploader to 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 上传者的文件，你必须添加一个动作

Also make sure you have included the necessary JS and CSS files of the uploader for this you have to add an action

<?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代码中提供的上一个函数，见下面
工作原理

Note: Also take care of one thing when you assign the uploader to you input fields the control of uploader now assigns to the fields so when ever uploader will be called it assigns the image url to your text field , so this is the problem when you triggers the uploader you are unable to insert the images in the content area of the post for this solution you have to store the previous control in some where and when you are done with uploader then reassign the control of uploader to the previous function which i have provided in my JS code see below how it works

 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;
                    }

我已多次使用此技术，它对我来说非常适合

I have used this technique many times and it works perfect for me

希望有意义

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