javascript - 使用拖放 HTML 上传图片

Question

您好，我的拖放有问题，我想在整个父亲的 div 上扩展输入的大小我不知道为什么，但输入设置在拖放 div 下。任何人都可以帮助我吗？

我做了一个 fiddle ，但它不起作用...... 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;
}