我正在使用 dropzone.js 创建个人资料图片 uploader , 我已经复制了布局 offered by Facebook ，但我想让它做的是，当您放下图像时，它会替换放置区内的内容。

到目前为止我的演示:

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

所以我想要的是当图片上传时，文本“从您的计算机上传照片”被进度条替换，然后一旦上传完成，缩略图预览进入当前有的div DP 在其中(这是一个 div，而不是图像)，然后用“删除”按钮替换进度条，如果按下该按钮将从预览(左侧)中删除图像并重置拖放区以重新开始。

我卡住的地方是上传进度、图像预览和重置部分。我不确定要使用哪些函数，而且网站文档实际上并未显示每个函数返回的内容或如何使用它们。

我的表单可以正常工作，它可以满足我的需要，只是格式和样式方面我需要帮助:)

最佳答案

我最终用一些函数和一些 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;}

最终看起来像这样

并在删除时重置为上次状态

关于javascript - 修改 Dropzone : Show uploaded image in another div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25654548/