admin管理员组文章数量:1400681
hello, i need your help for my codes. I want to preview multiple images before upload and there are remove button in each images. But my code doesn't work when i'm using div targetting in each remove button.
the first, my codes is like THIS FIDDLE 1. and when i'm add some changes bee THIS FIDDLE 2
my HTML :
<body>
<header>
<h1>File API - FileReader</h1>
</header>
<article>
<label for="files">Select multiple files: </label>
<input id="files" type="file" multiple/>
<output id="result" />
</article>
and CSS :
body{
font-family: 'Segoe UI';
font-size: 12pt;
}
header h1{
font-size:12pt;
color: #fff;
background-color: #1BA1E2;
padding: 20px;
}
article
{
width: 80%;
margin:auto;
margin-top:10px;
}
.thumbnail{
height: 100px;
margin: 10px;
}
it's my javascripts :
window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event){
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Only pics
if(!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load",function(event){
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
"title='" + picFile.name + "'/> <a href='#' class='remove_pict'>X</a>";
output.insertBefore(div,null);
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else
{
console.log("Your browser does not support File API");
}
}
thanks for advance. any suggestions much be appreciated ^^
hello, i need your help for my codes. I want to preview multiple images before upload and there are remove button in each images. But my code doesn't work when i'm using div targetting in each remove button.
the first, my codes is like THIS FIDDLE 1. and when i'm add some changes bee THIS FIDDLE 2
my HTML :
<body>
<header>
<h1>File API - FileReader</h1>
</header>
<article>
<label for="files">Select multiple files: </label>
<input id="files" type="file" multiple/>
<output id="result" />
</article>
and CSS :
body{
font-family: 'Segoe UI';
font-size: 12pt;
}
header h1{
font-size:12pt;
color: #fff;
background-color: #1BA1E2;
padding: 20px;
}
article
{
width: 80%;
margin:auto;
margin-top:10px;
}
.thumbnail{
height: 100px;
margin: 10px;
}
it's my javascripts :
window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event){
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Only pics
if(!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load",function(event){
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
"title='" + picFile.name + "'/> <a href='#' class='remove_pict'>X</a>";
output.insertBefore(div,null);
});
//Read the image
picReader.readAsDataURL(file);
}
});
}
else
{
console.log("Your browser does not support File API");
}
}
thanks for advance. any suggestions much be appreciated ^^
Share Improve this question edited Aug 6, 2014 at 4:39 Vany Diah P asked Aug 6, 2014 at 4:03 Vany Diah PVany Diah P 6433 gold badges12 silver badges26 bronze badges 7- You need to display the images on your page and then tick each one you want to upload. – Tasos Commented Aug 6, 2014 at 4:09
- there's a button to choose multiple images. i just need a script to preview & delete each images... did u see my fiddles? – Vany Diah P Commented Aug 6, 2014 at 4:13
- the button is for uploading pics .. what you are asking is a double function button and i don't think it exists. You need 2 buttons, one to choose pics to preview, and one to upload. and when you preview you don't need to delete -- just create a container box for each pic with a tick button to choose the picture. – Tasos Commented Aug 6, 2014 at 4:20
- ok. but mmm actually what i want is like uploading images in facebook, when we add some photos, there's an "X"(remove) button in each thumbnails. and if the user don't want to upload certain images, he just click that "X" button. i'm sorry if my question doesn't clear. any suggestion? – Vany Diah P Commented Aug 6, 2014 at 4:32
- yes exactly, or you could do something like this. jsfiddle/mkdskd/Z2745/5 -- all you need is to stick an upload button and cycle though the pics – Tasos Commented Aug 6, 2014 at 4:39
2 Answers
Reset to default 4Image and delete anchor are children of div object. Put click event on each a, then delete the parent. So when user click the x mark, selected image will be deleted.
div.children[1].addEventListener("click", function(event){
div.parentNode.removeChild(div);
});
see demo at http://jsfiddle/L45LW/5/
$("#result").on( "click",".remove_pict",function(){
$(this).parent().remove();
});
This may be help you
本文标签： javascriptRemove button for each image thumbnail previewStack Overflow
版权声明：本文标题：javascript - Remove button for each image thumbnail preview - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744244425a2596941.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论