Загрузка PDF с помощью медиапроигрывателя

Вопрос или проблема

<script type="text/javascript">

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

        var formfield;

        $('.upload_button').click(function() {
            $('html').addClass('Image');
            formfield = $(this).prev('.upload_image'); // .attr('name');
            tb_show('', 'media-upload.php?type=image&TB_iframe=true');
            return false;
        });

        // пользователь вставляет файл в пост. запускайте пользовательский код только если пользователь начал процесс с помощью вышеописанного метода
        // window.send_to_editor(html) - это то, как wp обычно обрабатывает полученные данные

        window.original_send_to_editor = window.send_to_editor;
        window.send_to_editor = function(html){

            if (formfield) {
                fileurl = jQuery('img',html).attr('src');

                $(formfield).val(fileurl);
                tb_remove();
                formfield = '';
                $('html').removeClass('Image');

            } else {
                window.original_send_to_editor(html);
            }
        };

    });


</script>

(function( $ ) {
        $( '#uploadpdf' ).on( 'click', function() {
            tb_show('Загрузить pdf', 'media-upload.php?type=file&TB_iframe=1');

            window.send_to_editor = function( html ) 
            {

                fileurl = $(html).attr('href'); 

                if(/\.pdf\b/.test(fileurl)){
                    $('#pdf').val(fileurl);

                }else{
                    alert('Некорректный pdf файл');
                }
                tb_remove();

            }

            return false;
        });


    })(jQuery);
</script>

Ответ или решение

Для загрузки файлов PDF через медиа-загрузчик в WordPress, перейдем к сравнению вашего исходного кода, предназначенного для загрузки изображений, с обновленным кодом, который сможет обрабатывать PDF-файлы. Давайте рассмотрим решение и ответим на дополнительные вопросы.

Шаг 1: Изменение кода для загрузки PDF

В вашем текущем коде, используемом для загрузки изображений, вы пытаетесь изменить код так, чтобы он работал и с PDF-файлами. Вот обновленный код, который можно использовать:

<script type="text/javascript">
(function( $ ) {
    var formfield;

    $('#upload_pdf_button').on('click', function() {
        $('html').addClass('PDF');
        formfield = $(this).prev('.upload_pdf'); // Получаем поле ввода для ссылки
        tb_show('Загрузить PDF', 'media-upload.php?type=file&amp;TB_iframe=true');
        return false;
    });

    window.original_send_to_editor = window.send_to_editor;
    window.send_to_editor = function(html) {
        if (formfield) {
            var fileurl = $(html).attr('href'); // Получаем ссылку на файл

            if (/\.pdf$/i.test(fileurl)) { // Проверяем, что файл имеет расширение PDF
                $(formfield).val(fileurl); // Записываем ссылку в поле ввода
                tb_remove(); // Закрываем окно
                formfield = '';
                $('html').removeClass('PDF');
            } else {
                alert('Это не PDF файл. Пожалуйста, загрузите файл с расширением .pdf.');
            }

        } else {
            window.original_send_to_editor(html);
        }
    };
})(jQuery);
</script>

Объяснение изменений

1. Использование type=file: Измените ссылку на медиа-загрузчик так, чтобы его тип был задан как file. Это позволяет загружать не только изображения, но и другие типы файлов, такие как PDF.

2. Получение URL файла: Вместо jQuery для изображений, вам нужно использовать html.attr('href') для получения URL загруженного файла. Это позволит использовать ссылки на PDF.

3. Проверка расширения файла: Добавлена проверка на наличие .pdf в названии файла с использованием регулярного выражения, чтобы предотвратить загрузку неподходящих файлов.

Шаг 2: Изменение текста кнопки "Вставить"

Для изменения текста по умолчанию на кнопке "Вставить", вы можете использовать JavaScript:

$(document).ready(function() {
    // Изменить текст кнопки "Вставить"
    $('body').on('click', '.insert', function() {
        $(this).text('Использовать этот файл');
    });
});

Полное интегрированное решение

Ваш конечный код должен выглядеть следующим образом:

<script type="text/javascript">
(function( $ ) {
    var formfield;

    $('#upload_pdf_button').on('click', function() {
        $('html').addClass('PDF');
        formfield = $(this).prev('.upload_pdf'); 
        tb_show('Загрузить PDF', 'media-upload.php?type=file&amp;TB_iframe=true');
        return false;
    });

    window.original_send_to_editor = window.send_to_editor;
    window.send_to_editor = function(html) {
        if (formfield) {
            var fileurl = $(html).attr('href'); 

            if (/\.pdf$/i.test(fileurl)) {
                $(formfield).val(fileurl); 
                tb_remove();
                formfield = '';
                $('html').removeClass('PDF');
            } else {
                alert('Это не PDF файл. Пожалуйста, загрузите файл с расширением .pdf.');
            }

        } else {
            window.original_send_to_editor(html);
        }
    };

    // Изменить текст кнопки "Вставить"
    $('body').on('click', '.insert', function() {
        $(this).text('Использовать этот файл');
    });

})(jQuery);
</script>

Заключение

Теперь у вас есть полностью функционирующий код для загрузки PDF-файлов в WordPress. Подобный подход позволяет избежать проблем с типами файлов и улучшает пользовательский интерфейс при помощи изменения текста кнопки. Используйте предложенный код и, если возникнут дополнительные вопросы, не стесняйтесь обращаться за помощью.