使用手动触发器时fineuploader不起作用的预览

Question

当使用手动触发时，我无法使用fineuploader进行预览，我已经将缩略图放入了submit和submitted事件中，但什么都不起作用。我使用其中一个stackoverflow示例作为基础。我确信事件是在日志触发时触发的：

[FineUploader 4.1.0] Attempting to update thumbnail based on server response.
[FineUploader 4.1.0] Rendering template in DOM.
[FineUploader 4.1.0] Template rendering complete
[FineUploader 4.1.0] Received 1 files or inputs.
On submit
Calling draw thumbnail on id: 0 with filename: 2013-01-06 17.14.37.jpg
On submitted
Calling draw thumbnail on id: 0 with filename: 2013-01-06 17.14.37.jpg


$('#myFineUploaderContainer').fineUploader({
   debug: true,
   template: "qq-simple-thumbnails-template",
   thumbnails: {
          placeholders: {
            waitingPath: "/static//img/loading.gif",
            notAvailablePath: "/static//img/loading.gif"
          }},
   request: {
      endpoint: '/ajaxuploadmms',
   params: {
    'csrf_token': 'XXXXX',
    'csrf_name': 'csrfmiddlewaretoken',
    'csrf_xname': 'X-CSRFToken',
    },
   customHeaders: {
    'X-CSRFToken': 'XXXXX',
    'test': 'test',}},
   autoUpload: false,
   validation: {
                allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
            },
   showMessage: function(message) {
        // Using Bootstrap's classes
        $('#myFineUploaderContainer').append('<div class="alert alert-error">' + message + '</div>');
      }

}).on('upload', function(event, id, name) {
        var enteredMessage = $('#message').val();
    var group = $('.dropdown-menu li a').val();
    $(this).fineUploader('setParams', {'group': window.group,'message': enteredMessage, 'csrfmiddlewaretoken': 'XXXXX'}, id);
}).on('submit', function (event, id, filename) {
    console.log('On submit');
    console.log('Calling draw thumbnail on id: ' +id+ ' with filename: ' +filename );
    $(this).fineUploader("drawThumbnail", id, document.getElementById('picture'), 200, false);
}).on('submitted', function (event, id, filename) {
    console.log('On submitted');
        console.log('Calling draw thumbnail on id: ' +id+ ' with filename: ' +filename );
        $(this).fineUploader('drawThumbnail', id, document.getElementById('picture'), 200, false);

}).on('complete', function (event, id, name, response) {
        console.log('Complete callback called on id: '+id+'. Response was: '+JSON.stringify(response));
        //remove active class from progress bar. remove cancel button from filename
        $fileItem = $(this).fineUploader("getItemByFileId", id);
        $fileName = $(this).fineUploader("getName", id);
        if (response.success) {
            $fileItem.find(".progress").removeClass("active").removeClass("progress-info").removeClass("progress-striped").addClass("progress-success");
            $fileItem.find(".qq-upload-cancel").remove();
            $fileItem.find(".qq-upload-status-text").addClass("green-text");
            $fileItem.find(".qq-upload-status-text").html("- Completed");
        }

        if (response.error) {
            $fileItem.find(".progress").removeClass("active").removeClass("progress-info").removeClass("progress-striped").addClass("progress-danger");
            $fileItem.find(".bar").removeClass("bar-success").addClass("bar-danger");
            $fileItem.find(".qq-upload-cancel").remove();
            $fileItem.find(".qq-upload-status-text").addClass("red-text");
            $fileItem.find(".qq-upload-status-text").html("- Upload failed!");
            $("#fineUploader").prepend('<div id="flashMessage" class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button><p>Upload failed on <b>'+$fileName+'</b>! Please try uploading it again.</p></div>');
        }

        //check to see if there are any uploads happening still. if not, reload the page use getInProgress() API call
        $uploadingFiles = $(this).fineUploader("getInProgress");

        //close the modal if no uploads are in progress. refresh media index. pop up success banner.
        if ($uploadingFiles < 1) {
            //uploads_done();
        }

    });


$('#uploadSelectedFiles').click(function() {
   $('#myFineUploaderContainer').fineUploader('uploadStoredFiles');
});
});
  </script>

    <script type="text/template" id="qq-simple-thumbnails-template">
        <div class="qq-uploader-selector qq-uploader">
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span>Drop files here to upload</span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Upload a file</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list">
                <li>
                    <div class="qq-progress-bar-container-selector progress">
                        <div class="qq-progress-bar-selector progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
                    <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
                    <a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
                    <a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
                    <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>
        </div>
    </script>

</div>

编辑:我有chrome，这是支持的特性

qq.supportedFeatures
Object {uploading: true, ajaxUploading: false, fileDrop: false, folderDrop: false, chunking: false…}
ajaxUploading: false
canDetermineSize: false
chunking: false
deleteFileCors: false
deleteFileCorsXdr: false
deleteFileCorsXhr: false
fileDrop: false
folderDrop: false
folderSelection: true
imagePreviews: false
imageValidation: false
itemSizeValidation: false
pause: false
progressBar: false
resume: false
uploadCors: true
uploadCustomHeaders: false
uploadNonMultipart: false
uploadViaPaste: false
uploading: true
__proto__: Object

Answer 1

您的标记中没有ID为"picture“的元素，尽管您请求Fine Uploader将缩略图呈现给此元素。另外，您问题中的标记是无效的。你有一个结束的div而没有一个打开的div。