javascript - Upload File path not shown in field using wp media uploader - Stack Overflow

admin管理员组

文章数量:1287956

I am using custom media upload in my plugin. In my previous (before 4.0) WordPress versions its working perfectly. When I upload audio or image file its upload successfully

and when i click on "Insert Into Post" the path of uploaded file shown in the text field.

But when I upgrade my WordPress into 4.4.2 and upload any file its upload successfully

and when I click on "Insert Into Post" the file path of uploaded file not shown in my text field.

In both WordPress's the code is 100% same.

Here is my HTML Code:

<input type="text" size="50" name="mp3" id="mp3" class="upload-url" />
<input id="st_upload_button" class="st_upload_button" type="button" name="upload_button" value="Upload">

And here is my Functions.php Code:

function pro_scripts_method() {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');

    wp_register_script( 'custom-js', plugin_dir_url( __FILE__ )."js/custom.js");
    wp_enqueue_script( 'custom-js' );
}
add_action('admin_enqueue_scripts', 'pro_scripts_method');

And here is my JS Code:

jQuery('.st_upload_button').click(function() {
    targetfield = jQuery(this).prev('.upload-url');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
    fileurl = jQuery(html).attr('href');
    //alert(fileurl);
    jQuery(targetfield).val(fileurl);
    tb_remove();
}

I alert fileurl variable but it gives me undefined value. So please help me for fix that problem

I am using custom media upload in my plugin. In my previous (before 4.0) WordPress versions its working perfectly. When I upload audio or image file its upload successfully

and when i click on "Insert Into Post" the path of uploaded file shown in the text field.

But when I upgrade my WordPress into 4.4.2 and upload any file its upload successfully

and when I click on "Insert Into Post" the file path of uploaded file not shown in my text field.

In both WordPress's the code is 100% same.

Here is my HTML Code:

<input type="text" size="50" name="mp3" id="mp3" class="upload-url" />
<input id="st_upload_button" class="st_upload_button" type="button" name="upload_button" value="Upload">

And here is my Functions.php Code:

function pro_scripts_method() {
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');

    wp_register_script( 'custom-js', plugin_dir_url( __FILE__ )."js/custom.js");
    wp_enqueue_script( 'custom-js' );
}
add_action('admin_enqueue_scripts', 'pro_scripts_method');

And here is my JS Code:

jQuery('.st_upload_button').click(function() {
    targetfield = jQuery(this).prev('.upload-url');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
    fileurl = jQuery(html).attr('href');
    //alert(fileurl);
    jQuery(targetfield).val(fileurl);
    tb_remove();
}

I alert fileurl variable but it gives me undefined value. So please help me for fix that problem

• javascript
• php
• jquery
• wordpress
• file-upload

Share Improve this question Follow edited Apr 14, 2016 at 15:01 deemi-D-nadeem asked Apr 11, 2016 at 10:21 deemi-D-nadeemdeemi-D-nadeem 2,51444 gold badges3939 silver badges7373 bronze badges 5

• Have you restarted the wamp or xamp sir. – Waqas_aamer Commented Apr 11, 2016 at 10:48
• I am working on my online server – deemi-D-nadeem Commented Apr 11, 2016 at 10:49
• I have the same problem in last week. My database connection was disconnected and wamp was not working properly. When i restarted it all was working fine then. – Waqas_aamer Commented Apr 11, 2016 at 10:50
• hmmmm but i am not working on local – deemi-D-nadeem Commented Apr 11, 2016 at 10:51
• bro my issue is not database. because I did'nt see file path when i click on "insert in post" the insertion of post is far far above step – deemi-D-nadeem Commented Apr 11, 2016 at 11:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3 +50

The change that new WordPress made to their media upload is the empty Link URL field.

But if you click file url button below that field and then click Insert Into Post your code works well :)

So we need a simple way to automatically put the file url value in the Link URL. I don't know about it whether there is a setting for that in wordpress or not but there is a simple code I wrote in jQuery to achieve it and it works really well for me.

What I'm really doing is:

When user hit the Insert into Post button. My jQuery check the parent of that Insert into Post button and find the file url value and insert it into Link URL field. That's it! Simple right?

jQuery('.savesend input[type=submit]').click(function(){  
         var url = jQuery(this).parents('.describe').find('.urlfile').data('link-url');
         var field = jQuery(this).parents('.describe').find('.urlfield');
         field.val(url);
     });

So try it out and let me know :)

Why aren't you using wp.media?

Try with this:

jQuery(document).ready(function($) {
    "use strict";

    $('.st_upload_button').on('click', function(e){
        e.preventDefault();
        var $input_field = $(this).prev();
        var custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Add Audio',
            button: {
                text: 'Add Audio'
            },
            multiple: false
        });
        custom_uploader.on('select', function() {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $input_field.val(attachment.url);
        });
        custom_uploader.open();
    });

});

This will open the media screen on button click, and put the url to the input field.

Their is a new version of the wordpress uploader since Wordpress 3.5. Maybe the way you did it is not available in Wordpress 4.0

You could find a basic tutorial here: http://www.webmaster-source./

jQuery(document).ready(function($){


    var custom_uploader;


    $('#upload_image_button').click(function(e) {

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });


});

<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Upload Image" />
    <br />Enter a URL or upload an image
</label>

//This part Should be in function.php (or similar)

add_action('admin_enqueue_scripts', 'my_admin_scripts');

function my_admin_scripts() {
    if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
        wp_enqueue_media();
        wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
        wp_enqueue_script('my-admin-js');
    }
}

本文标签： javascriptUpload File path not shown in field using wp media uploaderStack Overflow