Cách thêm trình tải lên phương tiện trong plugin wordpress

Question

Tôi đọc một số hướng dẫn về cách tích hợp trình tải lên phương tiện trong plugin wordpress. Tôi làm trình tải lên phương tiện dựa trên hướng dẫn. http://wordpress.org/support/topic/howto-integrate-the-media-library-into-a-plugin?replies=4 Tôi làm điều này và nó hoạt động hoàn hảo. Khi tôi đã cố gắng cùng một kịch bản một lần nữa cho nhiều lần của người tải lên phương tiện truyền thông, Đây là fiddle tôi đã cố gắng chỉ cần thay đổi id của trường văn bản cụ thể. http://jsfiddle.net/UrXPe/1/ Tuy nhiên, khi tôi nhấp vào tải lên, tất cả sẽ hoàn thành. điều duy nhất nếu tôi nhấp vào insert into post url của hình ảnh xuất hiện trong trường duyệt thứ hai. Đây là ảnh chụp màn hình những gì tôi phải đối mặt chính xác.

Khi tôi nhấp vào trường tải lên đầu tiên (quá trình tải lên thành công) sau khi chèn vào bài đăng mà url phương tiện tương ứng xuất hiện trong trường thứ hai không phải trước tiên. Tôi không chắc vấn đề nào sẽ là vấn đề tuyệt vời.

Answer 1

Tôi đang sử dụng phương pháp này để sử dụng trình tải lên phương tiện vào plugin tùy chỉnh của tôi. Có thể đây sẽ là trợ giúp.

trong tệp chủ đề chính (index.php) thêm các mục này.

wp_enqueue_style('thickbox'); // call to media files in wp 
wp_enqueue_script('thickbox'); 
wp_enqueue_script('media-upload'); 


// load script to admin 
function wpss_admin_js() { 
    $siteurl = get_option('siteurl'); 
    $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/js/admin_script.js'; 
    echo "<script type='text/javascript' src='$url'></script>"; 
} 
add_action('admin_head', 'wpss_admin_js'); 

Trong admin_script.js tập tin,

jQuery('#wpss_upload_image_button').click(function() { 
    formfield = jQuery('#wpss_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('#wpss_upload_image').val(imgurl); 
tb_remove(); 

jQuery('#wpss_upload_image_thumb').html("<img height='65' src='"+imgurl+"'/>"); 
} 

quản trị tập tin (admin_settings.php),

<div id="wpss_upload_image_thumb" class="wpss-file"> 
    <?php if(isset($record->security_image) && $record->security_image !='') { ?> 
     <img src="<?php echo $record->security_image;?>" width="65"/><?php } else { echo $defaultImage; } ?> 
</div> 
<input id="wpss_upload_image" type="text" size="36" name="wpss_upload_image" value="" class="wpss_text wpss-file" /> 
<input id="wpss_upload_image_button" type="button" value="Upload Image" class="wpss-filebtn" /> 

Chi tiết in my blog

Answer 2

CẬP NHẬT - di chuyển xuống

Sau quá nhiều công việc khó khăn và nghiên cứu và một số tùy biến tôi mã hóa dưới vài dòng compact của mã để sử dụng phương tiện truyền thông tải lên bất cứ nơi nào trong wordpress. Chỉ cần đặt mã trong một số chức năng và gọi hàm đó bất cứ nơi nào bạn muốn. Đường dẫn của tệp đã tải lên/được chọn sẽ được sao chép vào hộp văn bản và sau đó bạn có thể sử dụng nó.

Hy vọng điều này sẽ giúp ai đó.!

// 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> 

CẬP NHẬT: Chỉ cần thêm. Bạn có thể cần thêm trình bao bọc hàm trong tệp plugin/chủ đề của mình. Đây là:

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

Điều này sẽ gọi tệp JS và tệp JS có liên quan nếu WP không tải trình quản lý tải lên. Điều này cũng loại bỏ cảnh báo console.

Answer 3

Sử dụng này trong plugin tùy chỉnh của bạn

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

<?php 
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'); 
    } 
} 

?> 

<script> 
    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: true 
     }); 

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

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

    }); 


}); 
    </script>