等於在容器div內的圖像周圍填充

Question

我正在處理多個文件上傳系統。文件上傳工作正常。問題出現在我決定在文件讀取完成前顯示預覽div時。爲此，我創建了一個容器div裏面的for循環，並試圖在該容器中插入圖像。問題是容器內的圖像沒有相同的填充周圍。如何解決這個問題？

function handleDragOver(event) { 
 
    event.stopPropagation(); 
 
    event.preventDefault(); 
 
    event.dataTransfer.dropEffect = 'copy'; 
 
    document.getElementById('drop_zone').innerHTML = ""; 
 
} 
 

 
function handleDragLeave() { 
 
    document.getElementById('drop_zone').style.background = 'white'; 
 
} 
 

 
function handleFileSelect(event) { 
 
    event.stopPropagation(); 
 
    event.preventDefault(); 
 

 
    var files = event.dataTransfer.files; 
 

 
    for (var i = 0, file; file = files[i]; i++) { 
 
    if (i >= files.length) { 
 
     break; 
 
    } 
 
    (function(file) { 
 

 
     var reader = new FileReader(); 
 

 
     var container = document.createElement('div'); 
 
     reader.onloadstart = function() { 
 

 

 
     container.setAttribute('style', 'background:gray;text-align:center;padding:2px;width:100px;height:100px;margin:8px;float:left;border:1px solid gray;'); 
 
     document.getElementById('drop_zone').appendChild(container); 
 

 
     }; 
 

 
     reader.onloadend = (function(myfile) { 
 

 
     return function(event) { 
 

 
      var img = new Image(); 
 
      img.src = event.target.result; 
 
      img.width = 100; 
 
      img.height = 100; 
 
      container.style.background = 'white'; 
 
      container.style.width = ''; 
 
      container.style.height = ''; 
 
      container.appendChild(img); 
 

 

 
     } 
 

 
     })(file); 
 

 

 
     reader.readAsDataURL(file); 
 
    })(file); 
 

 

 

 

 
    } 
 

 

 
} 
 

 
function handleFileUpload() { 
 

 
    var dropZone = document.getElementById('drop_zone'); 
 
    dropZone.addEventListener('dragover', handleDragOver, false); 
 
    dropZone.addEventListener('dragleave', handleDragLeave, false); 
 
    dropZone.addEventListener('drop', handleFileSelect, false); 
 

 
} 
 
handleFileUpload();

<div id="drop_zone" style="width:95%;border:4px dotted gray;float:left;min-height:100px;text-align:center;line-height:100px;color:gray;font-size:25px;"> 
 
    Drop files here 
 

 
</div>

Answer 1

的#drop_zone的行高被設置爲100像素，其導致問題。

設置圖像的行高到line-height: 0;