Oi.
Eu antes de fazer o upload das imagens queria carregar um preview com as imagens para depois inserir a legenda da cada uma.
Então estive a tentar assim, e tudo ok para apenas uma foto
Código (HTML):
Mas eu queria fazer agora para várias fotos e não estou a conseguir, estava a tentar algo assim:
Código (HTML):
Alguém me pode ajudar?
Eu antes de fazer o upload das imagens queria carregar um preview com as imagens para depois inserir a legenda da cada uma.
Então estive a tentar assim, e tudo ok para apenas uma foto
Código (HTML):
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function preview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview_image')
.attr('src', e.target.result)
.width(100)
.height(120);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<meta charset=utf-8 />
<title>jQuery file upload</title>
</head>
<body>
<img id="preview_image" alt="" src="" width="100px" height="120px"> <br>
<input type="file" name="files" id="files" onchange="preview(this);" multiple>
</body>
</html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function preview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview_image')
.attr('src', e.target.result)
.width(100)
.height(120);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<meta charset=utf-8 />
<title>jQuery file upload</title>
</head>
<body>
<img id="preview_image" alt="" src="" width="100px" height="120px"> <br>
<input type="file" name="files" id="files" onchange="preview(this);" multiple>
</body>
</html>
Mas eu queria fazer agora para várias fotos e não estou a conseguir, estava a tentar algo assim:
Código (HTML):
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function preview(input) {
for(i=0; i<this.files.length; i++){
var reader = new FileReader();
reader.onload = function (e) {
$('#preview_image')
.attr('src', e.target.result)
.width(100)
.height(120);
};
reader.readAsDataURL(input.files[i]);
}
}
</script>
<meta charset=utf-8 />
<title>jQuery file upload</title>
</head>
<body>
<img id="preview_image" alt="" src="" width="100px" height="120px"> <br>
<input type="file" name="files" id="files" onchange="preview(this);" multiple>
</body>
</html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function preview(input) {
for(i=0; i<this.files.length; i++){
var reader = new FileReader();
reader.onload = function (e) {
$('#preview_image')
.attr('src', e.target.result)
.width(100)
.height(120);
};
reader.readAsDataURL(input.files[i]);
}
}
</script>
<meta charset=utf-8 />
<title>jQuery file upload</title>
</head>
<body>
<img id="preview_image" alt="" src="" width="100px" height="120px"> <br>
<input type="file" name="files" id="files" onchange="preview(this);" multiple>
</body>
</html>
Alguém me pode ajudar?