Menu
Hi all i have an fileuplaod where user can select multiple images nad i want to show the preview for those selected images before upload...at present i manged it for the single image preview how can i provide preview for the multiple images selected
function readURL(input) {
var img = $(input).closest('div').find('img').first();
var imgid=$(img).attr('id');
if (input.files && input.files[0]) {
alert(input.files);
alert(input.files[0]);
var reader = new FileReader();
reader.onload = function (e) {
$("#"+imgid)
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
<input type="file" accept="gif|jpg|jpeg|png" name="files[]" multiple onchange="readURL(this);" />
<img src="http://placehold.it/140x140" class="img-rounded" id="thumbnailimage">
can any one help here please...
479
Ok, here is a really crude implementation
The basic idea is, get the files array, loop through it, use the File API to add images where the src value is that blob which js gives you to play with, rather than the path on the users machine.
var inputLocalFont = document.getElementById("image-input");
inputLocalFont.addEventListener("change",previewImages,false); //bind the function to the input
function previewImages(){
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
for(var i = 0; i < fileList.length; i++){
//get a blob to play with
var objectUrl = anyWindow.createObjectURL(fileList[i]);
// for the next line to work, you need something class="preview-area" in your html
$('.preview-area').append('<img src="' + objectUrl + '" />');
// get rid of the blob
window.URL.revokeObjectURL(fileList[i]);
}
}
I have a solution here's the link: http://maraustria.wordpress.com/2014/04/25/multiple-select-and-preview-of-image-of-file-upload/
<!DOCTYPE html>
<html>
<head>
<title>File API – FileReader as Data URL</title>
</head>
<body>
<header>
<h1>File API – FileReader</h1>
</header>
<article>
<label for=”files”>Select multiple files: </label>
<input id=”files” type=”file” multiple/>
<button type=”button” id=”clear”>Clear</button>
<output id=”result” />
</article>
</body>
</html>
Javascript
window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
$(‘#files’).live(“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’))
if(file.type.match(‘image.*’)){
if(this.files[0].size < 2097152){
// 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=’preview image’/>”;
output.insertBefore(div,null);
});
//Read the image
$(‘#clear, #result’).show();
picReader.readAsDataURL(file);
}else{
alert(“Image Size is too big. Minimum size is 2MB.”);
$(this).val(“”);
}
}else{
alert(“You can only upload image file.”);
$(this).val(“”);
}
}
});
}
else
{
console.log(“Your browser does not support File API”);
}
}
$(‘#files’).live(“click”, function() {
$(‘.thumbnail’).parent().remove();
$(‘result’).hide();
$(this).val(“”);
});
$(‘#clear’).live(“click”, function() {
$(‘.thumbnail’).parent().remove();
$(‘#result’).hide();
$(‘#files’).val(“”);
$(this).hide();
});
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;
float: left;
}
#clear{
display:none;
}
#result {
border: 4px dotted #cccccc;
display: none;
float: right;
margin:0 auto;
width: 511px;
}
http://jsfiddle.net/2xES5/28/
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
