Preview de uma imagem Carregada para o UpLoad
Ola pessoal tudo certo ... tenho um problema com um script que pode ajudar muita gente
ele da um preview das imagens carregadas em um form de upload ele funciona mas só da o preview
de uma imagem quando carrega ... se eu colocar o formulário em multiple ele exibe todas as imagens selecionadas
antes de fazer o upload para o banco de dados, mas se eu deixar a seleção normal ou seja
uma imagem por vez, ele não carrega o restante das imagens, apenas a primeira, vou por o
código abaixo completo funcionando com o multiple se alguém ai conseguir me ajudar a mudar ele
para exibir cada imagem carregada separadamente eu agradeço e vai ajudar muita gente também
<html>
<head>
<style type="text/css">
.thumb-image{
float:left;width:100px;
position:relative;
padding:5px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="wrapper" style="margin-top: 20px;">
<input id="fileUpload" multiple="multiple" type="file"/>
<div id="image-holder"></div>
</div>
<script language="JavaScript">
$("#btnCLear").on('click',function(){
$("#image-holder").html("");
});
$("#fileUpload").on('change', function () {
//Obtendo contagem dos arquivos selecionados
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
//loop para cada arquivo selecionado para uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("Seu navegador não tem suporte ao FileReader.");
}
} else {
alert("Selecione apenas arquivos de imagem.");
}
});
</script>
</body>
</html>
No meu caso ele ficaria assim
<html>
<head>
<style type="text/css"></style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="wrapper" style="margin-top: 20px;">
<input id="fileUpload" type="file"/>
<div id="image-holder"></div>
</div>
<div id="wrapper" style="margin-top: 20px;">
<input id="fileUpload" type="file"/>
<div id="image-holder"></div>
</div>
<div id="wrapper" style="margin-top: 20px;">
<input id="fileUpload" type="file"/>
<div id="image-holder"></div>
</div>
<div id="wrapper" style="margin-top: 20px;">
<input id="fileUpload" type="file"/>
<div id="image-holder"></div>
</div>
<div id="wrapper" style="margin-top: 20px;">
<input id="fileUpload" type="file"/>
<div id="image-holder"></div>
</div>
<div id="wrapper" style="margin-top: 20px;">
<input id="fileUpload" type="file"/>
<div id="image-holder"></div>
</div>
<div id="wrapper" style="margin-top: 20px;">
<input id="fileUpload" type="file"/>
<div id="image-holder"></div>
</div>
<script language="JavaScript">
$("#btnCLear").on('click',function(){
$("#image-holder").html("");
});
$("#fileUpload").on('change', function () {
//Obtendo contagem dos arquivos selecionados
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
//loop para cada arquivo selecionado para uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("Seu navegador não tem suporte ao FileReader.");
}
} else {
alert("Selecione apenas arquivos de imagem.");
}
});
</script>
</body>
</html>Discussão (0)
Carregando comentários...