Как я могу использовать Multi Media Uploader в плагинах WordPress?

Вот пример того, как вы можете использовать мультимедийный загрузчик wordpress для нескольких полей или столько же полей. Код JS и html-код выглядят следующим образом:

Как это работает

Добавьте класс upload_image_button в каждую кнопку загрузки на основе этого триггера функции upload_image_button класса, чтобы получить загрузчик мультимедиа 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; } 

Я использовал эту технику много раз, и она отлично работает для меня

Надеюсь, что это имеет смысл

Это было не так сложно …

Посмотрите эту историю изменений, чтобы увидеть, как я это сделал … В основном, что я сделал, добавлял это в мой плагин:

 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'); And later this part: <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> <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> 

Вы можете просто скопировать и вставить этот код в свой плагин и посмотреть волшебство.

Здесь, чтобы отредактировать изображение для работы, также чтобы показать другой фильтр, надеюсь, что это поможет.

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

Ответ от М Халида Джунайда велик, но устарел.

См. Страницу codex о wp.media: https://codex.wordpress.org/Javascript_Reference/wp.media .

Вот мой код, основанный на Codex wp.media Example

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