如何将 fineUploader js 插件与 Wordpress 集成

Question

我正在开发一个 wordpress 插件，它需要允许用户上传文件（1 个或多个相同格式的文件）。

我看过 FineUploader 插件 (http://fineuploader.com/)，它完全符合我的需要，但我在使用它时遇到了一些问题。最后一个是正在上传我的文件，我总是收到 "upload error" 消息

控制台没有错误。

我正在为我的服务器尝试这个 endpoint.php 和端点-cors.php 文件：https://github.com/FineUploader/php-traditional-server

我的表格：

<?php
add_shortcode('sh_formulario_ideas', function(){

    //<editor-fold desc="IMPORT_JS/CSS" default-state="colapsed">
    wp_register_style("innovation-factory-fineuploader-css", plugins_url('/../js/jquery.fine-uploader/fine-uploader.min.css', __FILE__ ));
    wp_register_style("innovation-factory-fineuploader-css", plugins_url('/../js/jquery.fine-uploader/fine-uploader-gallery.min.css', __FILE__ ));
    wp_enqueue_style("innovation-factory-fineuploader-css");

    wp_register_style("innovation-factory-css", plugins_url('/../css/estilos.css', __FILE__ ));
    wp_enqueue_style("innovation-factory-css");

    wp_register_script('innovation-factory-iframe.xss.response-js', plugins_url('/../js/jquery.fine-uploader/iframe.xss.response.js', __FILE__ ), array('jquery'));
    wp_enqueue_script("innovation-factory-iframe.xss.response-js");

    wp_register_script('innovation-factory-fineuploader-js', plugins_url('/../js/jquery.fine-uploader/jquery.fine-uploader.min.js', __FILE__ ), array('jquery'));
    wp_enqueue_script("innovation-factory-fineuploader-js");


    /*** Mis estilos y scripts ***/
    wp_register_style("innovation-factory-css", plugins_url('/../css/estilos.css', __FILE__ ));
    wp_enqueue_style("innovation-factory-css");
    wp_enqueue_style('wp-jquery-ui-dialog');

    $ajax_url = admin_url('admin-ajax.php');
    wp_register_script('innovation-factory-js', plugins_url('/../js/scripts.js', __FILE__ ), array('jquery-ui-dialog'));
    wp_localize_script('innovation-factory-js', 'ajax_url', $ajax_url );    
    wp_enqueue_script("innovation-factory-js");
    //</editor-fold>

    $salida = "
        <div id='divDialog'></div>
        <div id='divFormulario'>
            <div class='label'>&#191;Quieres que tu aportaci&oacute;n sea publicada de forma an&oacute;nima?</div>

            <div class='two-cols separator'>
                <input type='radio' id='rdbAnonimo' name='rdbAnonimo' value='1' />
                <span class='etiquetas'><label for='rdbAnonimo'><span></span>S&iacute;</label></span>
            </div>

            <div class='two-cols'>
                <input type='radio' id='rdbNoAnonimo' name='rdbAnonimo' value='0' checked />
                <span class='etiquetas'><label for='rdbNoAnonimo'><span></span>No es necesario</label></span>
            </div>

            <div class='opcionales'>
                <div class='fieldset'>
                    <div class='etiquetas'><label for='txtNombre'>NOMBRE</label></div>
                    <input 
                        id='txtNombre'
                        name='txtNombre'
                        type='text' 
                        placeholder='Tu nombre o el de los compa&ntilde;eros que hab&eacute;is participado en la idea.' 
                        />
                </div>

                <div class='fieldset'>
                    <div><label>HOTEL</label></div>
                    <select id='slcHotel' name='slcHotel'>
                        <option value='0'>Escoge el hotel</option>
                        ".generarOptions(_TABLA_HOTELES_)."
                    </select>
                </div>
            </div>

            <div class='fieldset'>
                <div class='etiquetas'><label for='txtNombrePropuesta'>PONLE NOMBRE A TU PROPUESTA</label></div>
                <input 
                    id='txtNombrePropuesta'
                    name='txtNombrePropuesta'
                    type='text' 
                    placeholder='Un t&iacute;tulo que resuma a grandes rasgos la idea.' 
                    />
            </div>

            <div class='fieldset'>
                <div><label>&Aacute;REA DE APLICACI&Oacute;N</label></div>
                <select id='slcArea' name='slcArea'>
                    <option value='0'>¿Qu&eacute; parte de Petit Palace ayudar&iacute;a a mejorar?</option>
                    ".generarOptions(_TABLA_AREAS_)."
                </select>
            </div>

            <div class='fieldset'>
                <div class='etiquetas'><label for='txtDescripcion'>CU&Eacute;NTANOS TU IDEA</label></div>
                <textarea  
                    id='txtDescripcion'
                    name='txtDescripcion'
                    placeholder='Un resumen de tu idea, ¿qu&eacute; problem&aacute;tica soluciona? ¿Qu&eacute; nuevas formas de mejorar descubir&iacute;a?'></textarea>
            </div>


            <div class='fieldset'>
                <label>¿Tienes algún documento gráfico, foto, pdf, dibujo en una servielleta o algo que nos ayude a visualizar mejor tu idea? Súbelo aquí.</label>
                <div id='fineUploader'></div>
                ".plantillaGallery()."
            </div>

            <div>
                <button id='btnEnviar'>ENVIAR</button>
            </div>
        </div>
    ";

    return $salida;
});

function generarOptions($tabla){
    global $wpdb;
    $options_str = "";
    foreach($wpdb->get_results("SELECT id, nombre FROM "._PREFIJO_PLUGIN_.$tabla.";") as $hotel){
        $options_str .= "<option value='".$hotel->id."'>".$hotel->nombre."</option>";
    }   
    return $options_str;    
}

function plantillaGallery(){
    return "
    <script type='text/template' id='qq-template'>
        <div class='qq-uploader-selector qq-uploader qq-gallery' qq-drop-area-text='Drop files here'>
            <div class='qq-total-progress-bar-container-selector qq-total-progress-bar-container'>
                <div role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' class='qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar'></div>
            </div>
            <div class='qq-upload-drop-area-selector qq-upload-drop-area' qq-hide-dropzone>
                <span class='qq-upload-drop-area-text-selector'></span>
            </div>
            <div class='qq-upload-button-selector qq-upload-button'>
                <div>Arrastra aquí tu/s archivo/s</div>
            </div>
            <span class='qq-drop-processing-selector qq-drop-processing'>
                <span>Procesando archivos...</span>
                <span class='qq-drop-processing-spinner-selector qq-drop-processing-spinner'></span>
            </span>
            <ul class='qq-upload-list-selector qq-upload-list' role='region' aria-live='polite' aria-relevant='additions removals'>
                <li>
                    <span role='status' class='qq-upload-status-text-selector qq-upload-status-text'></span>
                    <div class='qq-progress-bar-container-selector qq-progress-bar-container'>
                        <div role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' class='qq-progress-bar-selector qq-progress-bar'></div>
                    </div>
                    <span class='qq-upload-spinner-selector qq-upload-spinner'></span>
                    <div class='qq-thumbnail-wrapper'>
                        <img class='qq-thumbnail-selector' qq-max-size='120' qq-server-scale>
                    </div>
                    <button type='button' class='qq-upload-cancel-selector qq-upload-cancel'>X</button>
                    <button type='button' class='qq-upload-retry-selector qq-upload-retry'>
                        <span class='qq-btn qq-retry-icon' aria-label='Reintentar'></span>
                        Reintentar
                    </button>

                    <div class='qq-file-info'>
                        <div class='qq-file-name'>
                        <span class='qq-upload-file-selector qq-upload-file'></span>
                        <span class='qq-edit-filename-icon-selector qq-edit-filename-icon' aria-label='Editar nombre de archivo'></span>
                        </div>
                        <input class='qq-edit-filename-selector qq-edit-filename' tabindex='0' type='text'>
                        <span class='qq-upload-size-selector qq-upload-size'></span>
                        <button type='button' class='qq-btn qq-upload-delete-selector qq-upload-delete'>
                            <span class='qq-btn qq-delete-icon' aria-label='Borrar'></span>
                        </button>
                        <button type='button' class='qq-btn qq-upload-pause-selector qq-upload-pause'>
                            <span class='qq-btn qq-pause-icon' aria-label='Pausar'></span>
                        </button>
                        <button type='button' class='qq-btn qq-upload-continue-selector qq-upload-continue'>
                            <span class='qq-btn qq-continue-icon' aria-label='Continuar'></span>
                        </button>
                    </div>
                </li>
            </ul>

            <dialog class='qq-alert-dialog-selector'>
                <div class='qq-dialog-message-selector'></div>
                <div class='qq-dialog-buttons'>
                    <button type='button' class='qq-cancel-button-selector'>Cerrar</button>
                </div>
            </dialog>

            <dialog class='qq-confirm-dialog-selector'>
                <div class='qq-dialog-message-selector'></div>
                <div class='qq-dialog-buttons'>
                    <button type='button' class='qq-cancel-button-selector'>No</button>
                    <button type='button' class='qq-ok-button-selector'>Sí</button>
                </div>
            </dialog>

            <dialog class='qq-prompt-dialog-selector'>
                <div class='qq-dialog-message-selector'></div>
                <input type='text'>
                <div class='qq-dialog-buttons'>
                    <button type='button' class='qq-cancel-button-selector'>Cancelar</button>
                    <button type='button' class='qq-ok-button-selector'>Ok</button>
                </div>
            </dialog>
        </div>
    </script>
    ";
}

还有我的js代码来初始化fineuploader

var fineUploader = $('#fineUploader');
//...
fineUploader.fineUploader({
    request:{
        endpoint: '/wp-content/plugins/innovation-factory/includes/php/endpoint-cors.php'
    }
});

在端点上，我也测试了“/wp-content/plugins/innovation-factory/includes/php/endpoint.php”，结果相同。

也许 wordpress 不允许访问此端点文件？

有没有人帮助我或任何其他人plugin/way来实现这个目标？

我正在通过 post ajax 发送表格，我不知道如何以这种方式发送文件。

Answer 1

问题出在上传目录，插件找不到。现在好了。

如何将 fineUploader js 插件与 Wordpress 集成

How to integrate fineUploader js plugin with Wordpress

wordpress

plugins

fine-uploader