小编web*_*ali的帖子

我想创建一个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/