使用拖放HTML上傳圖片

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

此處演示

.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;
}