FineUploader 使用 Ajax 请求更新缩略图到服务器（使用 qq-file-id）答案

【问题标题】：FineUploader update thumbnail with Ajax request to server (using qq-file-id)FineUploader 使用 Ajax 请求更新缩略图到服务器（使用 qq-file-id）
【发布时间】：2017-07-04 21:47:16
【问题描述】：

由于我使用 FineUploader 上传非图像文档，因此我在服务器上创建了一个缩略图（预览），并希望在上传成功后将其添加到 UI。

由于我的 UI 具有多次上传功能，我需要知道要与预览关联的文件。

分析 HTML，我看到 UI 中呈现的每个文件都由一个 li 表示，代码如下：

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

如何调整 FineUploader 以在用于上传文件的 POST 请求中包含 qq-file-id 的值？在上面的示例中，我需要传递值“0”。

注意：我正在使用文件分块，所以我看到了两种解决方案：

在每个块上传请求中传递值
或在最后通过 assemble 请求传递它

【问题讨论】：

如果我提供一个提示，也许您可以回答您自己的问题：查看 setParams API 方法。

标签： javascript fine-uploader

【解决方案1】：

我最终实现的解决方案是添加一个 onComplete 回调，因为这将提供 FineUploader 内部文件 ID 作为参数。然后我可以使用 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 ...) %>");

【讨论】：

无需解析响应。传递给onComplete 的response 参数包含解析为对象的响应。