拖放图像输入文件并在上传前预览 [英] drag drop images input file and preview before upload
问题描述
我想创建一个div附加拖放功能,当有人点击它时,他们可以选择他们的图像。
I want to create a div attach drag drop feature and when someone click it they can choose their image.
我已经编码了一些东西,它可以
- 点击div并选择你的图片
- 在上传前预览你的图像
I have coded something and its can - click div and choose your image - preview your image before upload
你可以检查我的小提琴
css
.uploader {width:300px;height:350px;background:#f3f3f3;border:2px dashed #e8e8e8;}
javascript
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技巧。
输入元素接受drop。
我更改了您的代码,如下所示:
You can do this with little css tricks. input element accepts drop. I changed your code like below:
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]);
}
}
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/
i hope it helps. You can check http://jsfiddle.net/ELcf6/4/, and other version http://jsfiddle.net/ELcf6/8/
这篇关于拖放图像输入文件并在上传前预览的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!