修改Dropzone:在另一个div中显示上传的图片

Question

我正在使用dropzone.js创建一个个人资料图片上传器，我在某种程度上复制了布局offered by Facebook，但我想让它做的是，当你放置图片时，它会替换dropzone中的内容。

到目前为止我的演示：

​

​

Image Link

到目前为止我的代码如下：

Dropzone.options.employeeImageDropzone = {
maxFiles: 1,
acceptedFiles: 'image/*',
addRemoveLinks: true,
dictDefaultMessage: '<strong>Upload a Photo</strong><br/><small class="muted">From your computer</small>',
paramName : 'empImage',
init: function() {
    this.on("success", function(file, responseText) {
        $('#nextStep').html('<a href="<?php echo 'employee?id='.$empID.'&step=3'; ?>" class="button form-button">Next</a>').css('display','block');
    });
    this.on("removedfile", function (file) {
        $.get("upload-image.php", {id: <?php echo $empID; ?>, get: "1"}).done(function(data) {});
    });
}
};

所以我想要的是，当图像上传时，文本"Upload a Photo from your computer“被替换为进度条，然后一旦上传完成，缩略图预览进入当前包含DP的div (即div，而不是图像)，然后用" remove”按钮替换进度条，如果按下该按钮，将从预览中删除图像(在左侧)，并重新设置dropzone以重新开始。

我被困在上传进度、图像预览和重置部分。我不确定要使用哪些函数，并且网站文档实际上并没有显示每个函数返回什么或如何使用它们。

我已经让表单正常工作了，它做了我需要它做的事情，它只是我需要帮助的格式和样式:)

Answer 1

我最终通过一些函数和一些CSS完成了这项工作

Javascript:

Dropzone.options.employeeImageDropzone = {
    maxFiles: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    dictDefaultMessage: '<strong>Upload a Photo</strong><br/><small class="muted">From your computer</small>',
    paramName : 'empImage',
    thumbnailWidth:'200',
    thumbnailHeight:'200',
    init: function() {
        this.on("success", function(file, responseText) {
            document.querySelector(".dz-progress").style.opacity = "0";
            $('#nextStep').html('<a href="<?php echo 'employee?id='.$empID.'&step=3'; ?>" class="button form-button">Next</a>');
        });
        this.on("thumbnail", function(file, dataUrl) {
            $('#dz-preview').html('<img src="'+dataUrl+'" width="200" height="200" alt="<?php echo $empNameFull; ?>">');
        });
        this.on("removedfile", function (file) {
            $.get("upload-image.php", {id: <?php echo $empID; if(isset($oldImage) && !empty($oldImage)) {echo ', old: "'.$oldImage.'" ';} ?>, get: "1"}).done(function(data) {});
            $('#nextStep').html('<a href="<?php echo 'employee?id='.$empID.'&step=3'; ?>">Skip this step</a>');
        });
        this.on("reset", function (file) {
            $('#dz-preview').html('<?php echo $previousData; ?>');                  
        });
    }
};

CSS:

#employee-image-dropzone.dropzone .dz-preview, #employee-image-dropzone .dropzone-previews .dz-preview {background:transparent;position:inherit;display:block;margin:0;vertical-align:middle;border:none;padding:0;margin-top:60px;text-align:center;}
#employee-image-dropzone.dropzone .dz-preview .dz-progress, #employee-image-dropzone .dropzone-previews .dz-preview .dz-progress {top:-25px;}
#employee-image-dropzone.dropzone .dz-preview .dz-details, #employee-image-dropzone.dropzone .dz-preview .dz-success-mark, #employee-image-dropzone.dropzone .dz-preview .dz-error-mark,  #employee-image-dropzone.dropzone .dz-preview .dz-error-message {display:none;}
#employee-image-dropzone.dropzone .dz-preview .dz-remove {border: 2px solid #F7931D;color: #F7931D;padding: 6px 20px !important;}

最后看起来像这样

​

​

并在删除时重置为最后一个状态