Question

我正在使用dropzone.js创建个人资料图片上传器，我有点复制了布局offered by Facebook，但我想要它做的是当你放下图像时，它替换dropzone内的内容。

到目前为止我的演示：

enter image description here

到目前为止我的代码：

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，而不是图像），然后用“删除”按钮替换进度条，如果按下该按钮将从预览中删除图像（在左侧）并重置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;}

最终看起来像这样

enter image description here

并重置为删除时的最后状态

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

1 个答案: