javascript – 拖放图像输入文件并预览上传前

我想创建一个div附加拖放功能,当有人点击它,他们可以选择他们的形象.

我已经编码了一些东西,它的可以
– 点击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( '<img width="300px" height="350px" src="'+event.target.result+'"/>' );
    }
    reader.readAsDataURL(e.target.files[0]);
}

HTML

<div class="uploader" onclick="$('#filePhoto').click()">click here or drag here your images for preview and set userprofile_picture data</div>
            <input type="file" name="userprofile_picture"  id="filePhoto" style="display:block;width:185px;"  />

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

解决方法

你可以用很少的CSS技巧来做到这一点.
输入元素接受下降.
我改变了你的代码如下：

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',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

<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>

我希望它有帮助.您可以查看http://jsfiddle.net/ELcf6/4/和其他版本http://jsfiddle.net/ELcf6/8/

javascript – 拖放图像输入文件并预览上传前

解决方法

猜你在找的JavaScript相关文章