上传之前拖放图像输入文件和预览

我想创建一个div附加拖放function，当有人点击它时，他们可以选择他们的图像。

我编写了一些东西，它可以 – 点击div并选择你的图像 – 在上传之前预览你的图像

你可以检查我的小提琴

CSS

.uploader {width:300px;height:350px;background:#f3f3f3;border:2px dashed #e8e8e8;} 

JavaScript的

  var imageLoader = document.getElementById('filePhoto'); imageLoader.addEventListener('change', handleImage, false); function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { $('.uploader').html( '' ); } reader.readAsDataURL(e.target.files[0]); } 

HTML

 
click here or drag here your images for preview and set userprofile_picture data
  

你可以查看http://jsfiddle.net/ELcf6/

Answer 1

你可以用很少的CSS技巧来做到这一点。 input元素接受drop。 我改变了你的代码，如下所示：

CSS

 .uploader { position:relative; overflow:hidden; width:300px; height:350px; background:#f3f3f3; border:2px dashed #e8e8e8; } #filePhoto{ position:absolute; width:300px; height:400px; top:-50px; left:0; z-index:2; opacity:0; cursor:pointer; } .uploader img{ position:absolute; width:302px; height:352px; top:-1px; left:-1px; z-index:1; border:none; } 

JavaScript的

 var imageLoader = document.getElementById('filePhoto'); imageLoader.addEventListener('change', handleImage, false); function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { $('.uploader img').attr('src',event.target.result); } reader.readAsDataURL(e.target.files[0]); } 

HTML

 
 click here or drag here your images for preview and set userprofile_picture data    

我希望它有所帮助。 你可以查看http://jsfiddle.net/ELcf6/4/ ，以及其他版本http://jsfiddle.net/ELcf6/8/