修改刪除地區：在另一個div上顯示上傳的圖像

我使用dropzone.js創建了一個配置文件圖像上傳器，並且我有點複製了佈局offered by Facebook，但我想要它做的是當您放置圖像時，它取代了dropzone內的內容。修改刪除地區：在另一個div上顯示上傳的圖像

我至今演示：

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的c urrently有在它的DP（這是一個div，而不是圖像），然後用「刪除」按鈕替換進度條，如果按下該按鈕將從預覽中刪除圖像（在左側），並重置dropzone開始再次。

我卡住的地方是上傳進度，圖片預覽和重置部分。我不確定要使用哪些函數，並且網站文檔實際上並未顯示每個函數返回的內容或如何使用它們。

我有形式的工作和它做什麼，我需要它，它只是在格式和風格，我需要幫助:)

來源

2014-09-03 dpDesignz

我結束了一些功能和一些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

，並重置去年狀態

來源

2014-09-04 00:57:25 dpDesignz

修改刪除地區：在另一個div上顯示上傳的圖像

回答

相關問題