thumbnail FineUploader с запросом Ajax на сервер (с использованием qq-file-id)

Question

Поскольку я использую FineUploader для загрузки документов без изображения, я создаю миниатюру (предварительный просмотр) на сервере и хотел бы добавить ее в пользовательский интерфейс после успешной загрузки.

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

Анализируя HTML, я увидел, что каждый файл представлены в пользовательском интерфейсе представлен в литии со следующим кодом:

<li class="qq-file-id-0 qq-upload-success" qq-file-id="0"> ... </li> 

Как Tweak FineUploader включить значение Qq-файл-идентификатор в запрос POST, используемый для загрузки файла? В приведенном выше примере мне нужно будет передать значение «0».

Примечание: Я использую файл отрывов, так что я вижу два решения:

• либо передать значение с каждым запросом загрузки Кусок
• или передать его с запросом собрать в конце

Answer 1

Решение, которое я, наконец, реализовал, - это добавить обратный вызов onComplete, поскольку в качестве параметра будет указан внутренний идентификатор файла FineUploader. Затем я могу использовать вызов Ajax для изменения эскиза/предварительного просмотра.

1) При инициализации FineUploader, определяют OnComplete обратного вызова:

$("id").fineUploader({ 
callbacks: { 
    onComplete: function(the_id, name, response, xhr) { 
     var elementClass, element; 

     // check for errors during the upload process 
     try { 
      responseHash = jQuery.parseJSON(xhr.response); 
      errors = responseHash.errors; 
      errorText = errors.join(); 
     } 
     catch(err) { 
      errorText = ""; 
     } 

     if (errorText.length > 0) { 
      // append the error text if there are errors 
      elementClass = ".qq-file-id-" + the_id + " .qq-upload-status-text"; 
      element = $(elementClass); 
      element.append("<br />" + errorText); 
     } 
     else { 
      // the upload was successful since no errors are reported 
      if (responseHash.success) { 
       $.ajax({ 
        url: thumbnailLoadUrl, 
        type: "GET", 
        async: true, 
        data: { 
         qq-file-id-: the_id, 
         // whatever other data is required to update the thumbnail/preview 
        } 
       }); 
      } 
     } 
    } 
} 

});

2) в представлении (js.erb файл):

$('<%= "li.qq-file-id-#{@qqfileid} .qq-thumbnail-wrapper" %>').html("<%= escape_javascript(image_tag ...) %>");