Javascript 拖放图像输入文件并在上载前预览

我想创建一个div-attach拖放功能，当有人单击它时，他们可以选择自己的图像

我已经编码了一些东西和它的代码 -单击div并选择您的图像 -上传前预览您的图像

你可以检查我的小提琴

css

javascript

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

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

        $('.uploader').html( '<img width="300px" height="350px" src="'+event.target.result+'"/>' );
    }
    reader.readAsDataURL(e.target.files[0]);
}

var-imageLoader=document.getElementById（'filePhoto'）；
imageLoader.addEventListener（'change'，handleImage，false）；
函数handleImage（e）{
var reader=new FileReader（）；
reader.onload=函数（事件）{
$（'.uploader'）.html（''）；
}
reader.readAsDataURL（e.target.files[0]）；
}

html

单击此处或将图像拖到此处进行预览并设置userprofile\u图片数据

你可以查一下

---

您可以通过一些css技巧来实现这一点。 输入元素接受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]);
}

// Edit for multiple images
// I didn't try but it should work.
// Also you need write some CSS code to see all images in container properly.
function handleImages(e) {
    $('.uploader img').remove();
    for(var i = 0; i < e.target.files.length; i++){
        var reader = new FileReader();
        reader.onload = function (event) {
            var $img = $('<img/>');
            $img.attr('src', event.target.result);
            $('.uploader').append($img);
        }
        reader.readAsDataURL(e.target.files[i]);
    }
}

var-imageLoader=document.getElementById（'filePhoto'）；
imageLoader.addEventListener（'change'，handleImage，false）；
函数handleImage（e）{
var reader=new FileReader（）；
reader.onload=函数（事件）{
$（'.uploader img'）.attr（'src'，event.target.result）；
}
reader.readAsDataURL（e.target.files[0]）；
}
//编辑多个图像
//我没有试过，但它应该会起作用。
//您还需要编写一些CSS代码来正确查看容器中的所有图像。
函数handleImages（e）{
$（'.uploader img'）.remove（）；
for（var i=0；ihtml

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


单击此处或将图像拖到此处进行预览并设置userprofile\u图片数据

我希望它有帮助。你可以检查，其他版本
谢谢你的工作！但我想了解它。你能告诉我如何接受拖放输入的详细信息吗？我查看了你的代码，但我不明白哪种技巧可以做到这一点？input元素通过拖放接受文件，但此属性支持一些浏览器，如chrome、firefox等。我输入了ut元素，并将输入元素的宽度和高度设置为uploader div。谢谢，nut它在firefox 55.0.2中不起作用。imageLoader.files在firefox中的拖放事件中没有发生更改。@EnginÜstün我尝试了您的示例，它在更改事件中工作正常。但不处理拖放错误无法指定to“files”，因为它是常量或只读属性。我使用的是angular 4。不适用于多个图像，它只显示最后一个图像。
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]);
}

// Edit for multiple images
// I didn't try but it should work.
// Also you need write some CSS code to see all images in container properly.
function handleImages(e) {
    $('.uploader img').remove();
    for(var i = 0; i < e.target.files.length; i++){
        var reader = new FileReader();
        reader.onload = function (event) {
            var $img = $('<img/>');
            $img.attr('src', event.target.result);
            $('.uploader').append($img);
        }
        reader.readAsDataURL(e.target.files[i]);
    }
}

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