修改掉区:在另一个div中显示上传的图像

Question

我正在使用dropzone.js创建一个配置文件图像上传器,我有点复制了Facebook提供的布局,但我想要它做的是当你删除图像时,它取代了dropzone内的内容.

到目前为止我的演示:

图片链接

我的代码到目前为止:

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) {});
    });
}
};

所以我想要的是,当图像上传时,文本"从计算机上传照片"被替换为进度条,然后一旦上传完成,缩略图预览进入当前具有DP的div (这是div,而不是图像),然后用"删除"按钮替换进度条,如果按下该按钮将从预览中删除图像(在左侧)并重置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;}

最终看起来像这样

并且在移除时重置为最后状态