使用拖放HTML上传图片

Question

Hi I have a problem with the drag and drop, I want to extend the size of input at the entire father's div I don't know why but the input is set under the drag and drop div. Anyone can help me?

I made a fiddle but it doesn't work... 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

Try this 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;
}