如何fineUploader JS插件與WordPress

Question

我正在開發一個WordPress插件這就需要允許用戶上傳文件（在相同的形式1個或多個）集成。

我已經看到FineUploader插件（http://fineuploader.com/），這正是我所需要的，但我遇到了一些麻煩。最後一個是目前上傳我的文件，我總是得到「上傳錯誤」消息

在控制檯沒有錯誤。

我這個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不允許訪問此端點文件？

有人爲我或任何其他插件/方式來實現這個目標的任何幫助嗎？

我通過post ajax發送表單，我不知道如何以這種方式發送文件。

Answer 1

問題是上傳目錄，插件無法找到它。現在可以了。