드래그 앤 드롭으로 이미지 업로드

Question

안녕하세요. 드래그 앤 드롭에 문제가 있습니다. 전체 아버지의 div에서 입력 크기를 확장하고 싶습니다. 이유는 모르겠지만 입력이 드래그 아래에 설정되어 있습니다. 드롭 div. 누구든지 나를 도울 수 있습니까? https://jsfiddle.net/Porcy/jmbcdLbo/

 .uploader{ 
     text-align: center; 
     padding: 1em 0; 
     margin: 1em 0; 
     color: #555; 
     border: 2px dashed #888; 
     border-radius: 7px; 
     cursor: default; 
    } 
    #filePhoto{ 
     position: absolute; 
     opacity:0; 
     cursor:pointer; 
    } 

<div onclick="$('#filePhoto').click()" class="uploader"> 
         click here or drag here your images for preview and set userprofile_picture data 
         <input type="file" size="32" name="userprofile_picture" id="filePhoto" /> 
         </div> 


     var imageLoader = document.getElementById('filePhoto'); 
     imageLoader.addEventListener('change', handleImage, false); 

    function handleImage(e) { 
     var reader = new FileReader(); 
     reader.onload = function (event) { 

      $('#blah').attr('src',event.target.result); 
     } 
     reader.readAsDataURL(e.target.files[0]); 
    } 

Answer 1

이 CSS를

DEMO HERE

.uploader { 
    position: relative; 
    text-align: center; 
    padding: 1em 0; 
    margin: 1em 0; 
    color: #555; 
    border: 2px dashed #888; 
    border-radius: 7px; 
    cursor: default; 
} 

#filePhoto { 
    position: absolute; 
    opacity: 0; 
    cursor: pointer; 
    left: 0; 
    right: 0; 
    width: 100%; 
    top: 0; 
    bottom: 0; 
}