I have a mulitple input file and I will want to display the selected images in a div.
I tried with this code but it just shows me the first image
I try with this :
function readURL(input) {
var reader = new FileReader();
reader.onload = function(e) {
for (var i = 0; i <= input.files.length; i++) {
var imgId = $('<img />', {
id: 'show_bultin_paie-' + input.files[i].lastModified,
alt: 'MyAlt'
});
imgId.appendTo($('#imagediv'));
$(imgId).attr('src', e.target.result);
}
}
reader.readAsDataURL(input.files[0]);
}
}
$('#file_test').change(function(event) {
readURL(this);
});
You're not looping all the files, you're only reading the first one (reader.readAsDataURL(input.files[0]);). Use let instead of var since you're doing async stuff inside the loop.
function readURL(input) {
for (let i = 0; i < input.files.length; i++) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagediv').append("<img src='"+e.target.result+"'>");
}
reader.readAsDataURL(input.files[i]);
}
}
$('#file_test').change(function(event) {
readURL(this);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=file id=file_test multiple accept='image/png, image/jpg, .png, .jpg'>
<div id=imagediv></div>
Related
I have multiple images that need to be uploaded and in preview user should be able to select one of those images for their main image.My idea was to assign them an id with counted but that doesn't seem to work,they always have the same id of number of images that are uploaded. This is js a code that I am using
$(function() {
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML("<img height=' 50px' width='50px' class='img-id' id='" +i+"'>")).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
I think the problem here is because you declared i as a global variable, so when the onload method is called it is getting the i global value which is now equal to your array size.
Fix by declaring the var properly.
$(function() {
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (var i = 0; i < filesAmount; i++) {
let index = i;
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML("<img height=' 50px' width='50px' class='img-id' id='" + index + "'>"))
.attr('src', event.target.result)
.appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
I have 2 image fields and I want to display a preview before submitting the form. In the form below, it works by displaying multiple images, but I want each input to show its images separately as:
Input1
Input 1 images
Input 2
Input2 images
How do I do this?
<input id="fileupload" type="file" name="img_slide" multiple>
<div id="dvPreview">
<input id="fileupload2" type="file" name="img_capa" multiple>
<div id="dvPreview2">
<script>
window.onload = function () {
var fileUpload = document.getElementById("fileupload");
fileUpload.onchange = function () {
if (typeof (FileReader) != "undefined") {
var dvPreview = document.getElementById("dvPreview");
dvPreview.innerHTML = "";
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
for (var i = 0; i < fileUpload.files.length; i++) {
var file = fileUpload.files[i];
if (regex.test(file.name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
var img = document.createElement("IMG");
img.height = "100";
img.width = "100";
img.src = e.target.result;
dvPreview.appendChild(img);
dvPreview.appendChild(textbox);
}
reader.readAsDataURL(file);
} else {
alert(file.name + " is not a valid image file.");
dvPreview.innerHTML = "";
return false;
}
}
} else {
alert("This browser does not support HTML5 FileReader.");
}
}
};
I tried this and works for me. Code:
<pre>Please enter your files:<input class="fileupload" type="file" name="img_slide" multiple>
<div id="dvPreview"></div></pre>
<input class="fileupload" type="file" name="img_capa" multiple>
<div id="dvPreview2"></div>
window.onload = function () {
var fileUpload = document.getElementsByClassName("fileupload");
for(var i = 0; i < fileUpload.length; i++){
fileUpload[i].onchange = showImgOnChange;
}
}
var showImgOnChange = function () {
if (typeof (FileReader) != "undefined") {
var dvPreview = this.nextElementSibling;
dvPreview.innerHTML = "";
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
for (var i = 0; i < this.files.length; i++) {
var file = this.files[i];
if (regex.test(file.name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
var img = document.createElement("IMG");
img.height = "100";
img.width = "100";
img.src = e.target.result;
dvPreview.appendChild(img);
dvPreview.appendChild(textbox);
}
reader.readAsDataURL(file);
} else {
alert(file.name + " is not a valid image file.");
dvPreview.innerHTML = "";
return false;
}
}
} else {
alert("This browser does not support HTML5 FileReader.");
}
}
Now i will explain that code:
i use a single class for every input of that type. Using that class i get all the elements input and at every input i assign onchange the function showImgOnChange (just a trick to associate the same function on change to multiple elements). After that, in the function, to generalize this:
var dvPreview = document.getElementById("dvPreview");
I used this:
var dvPreview = this.nextElementSibling;
This takes the next element to the this element in the DOM. Otherwise you can associate a class to divs wich you would display the images and search for the next elements to this having that class.
Hope it helps
I want to select multiple images and convert them to Base64 strings. I pushed the files into one array. My requirement is that after converting into Base64 strings, I want to push them into an array. I am not able to convert the images to Base64 strings.
$("input[name=property_images]").change(function() {
var names = [];
for (var i = 0; i < $(this).get(0).files.length; ++i) {
names.push($(this).get(0).files[i].name);
}
console.log(names);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="file" name="property_images" multiple="multiple" />
change your function to store the base64 value
$(document).ready(function(){
$("input[name=property_images]").change(function() {
var imgBase64Arr = [];
var files = this.files;
for (var i = 0; i < files.length; i++) {
(function(i){
var FR = new FileReader();
FR.onload = function(e) {
imgBase64Arr.push( e.target.result );//adding base64 value to array
if(i === files.length -1)//after all files are porcessed
submitData(imgBase64Arr)
};
FR.readAsDataURL(files[i]);
})(i);
}
});
function submitData(imgBase64Arr){
console.log(imgBase64Arr);
}
});
Here we have single image to convert base64 string.
function readFile() {
if (this.files) {
for(i=0;i<this.files.length;i++)
{
var FR= new FileReader();
FR.onload = function(e) {
//document.getElementById("img").src = e.target.result;
//document.getElementById("b64").innerHTML = e.target.result;
//$("#b64").append("<div></div>").html(e.target.result);
$('<img src="'+e.target.result+'" />').appendTo('#show-image');
$('<p>'+e.target.result+'</p>').appendTo('#text-image');
};
FR.readAsDataURL( this.files[i] );
}
}
}
document.getElementById("inp").addEventListener("change", readFile, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inp" type='file' multiple>
<div id='show-image'></div>
<div id='text-image'></div>
I am trying to have a function which has functions that do the following.
One function to store the files i get with input into the parent functions loadedimages array(loadimages).
One function to show those files in the correct component(showLoadedImages).
And one function to make the correct img file appear on the correct component.
The last function is what i want it to be like(it does not work).
The other two seem ok.
The problem i have is how to make the last function work while using the loadedimages array. You can change what i store in the array , i wouldnt mind.
Here is the JS code:
function imgviewer() {
"use strict";
var loadedimages = [];
var lidivs = [];
function loadimages() {
var files = document.getElementById("images").files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
alert('THERE IS NO IMAGE IN THIS DIRECTORY.');
break;
}
loadedimages.push(file);
}
}
function showLoadedImages(elem) {
loadimages();
var ld = loadedimages;
//var files = getLoadedImages(); //filelist obj
for (var i = 0; i < ld.length; i++) {
var file = ld[i];
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement(
'span');
span.innerHTML = [
'<img class="tile" src="',
e.target.result,
'" title="', encodeURI(
file.name), '">'
].join('');
document.getElementById(elem).insertBefore(
span, null);
lidivs.push(span);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}
function showImage(index, elem) {
var chosenFile = loadedimages[index];
document.getElementById(elem).src = chosenFile;
}
document.getElementById('images').addEventListener('change', function(){
showLoadedImages("main");
}, false);
}
And some HTML
<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory name="myFiles"
multiple/>
<span id="list"></span>
</form>
<div id="sidebar1"><img id="willchange" src="images/railaythailand.jpg" width="1200" height="832" alt=""/></div>
<div id="main"></div>
When i call showLoadedImages("main") the images are shown in main div. I want to be able to click those images so that they appear on "willchange" .
This does what you asked for. There are a number of other issues with your code that you might want to address, starting with the images are not thumbnails at all (and shrunken images take just as long to load as the original), but perhaps I'm missing something.
"use strict";
var loadedimages = [];
var lidivs = [];
function loadimages() {
var files = document.getElementById("images").files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
continue;
}
loadedimages.push(file);
}
loadedimages.length || alert('THERE IS NO IMAGE IN THIS DIRECTORY.');
}
function showLoadedImages(elem) {
loadimages();
var ld = loadedimages;
//var files = getLoadedImages(); //filelist obj
for (var i = 0; i < ld.length; i++) {
var file = ld[i];
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement(
'span');
span.innerHTML = [
'<img data-index="',
lidivs.length,
'" class="tile" src="',
e.target.result,
'" title="', encodeURI(
file.name), '">'
].join('');
span.addEventListener("click", foo );
document.getElementById(elem).insertBefore(
span, null);
lidivs.push(span);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}
function showImage(index, elem) {
document.getElementById(elem).src = lidivs[index].children[0].src;
}
function foo(event) {
showImage(event.target.dataset.index, "willchange");
}
function show() {
showLoadedImages("list");
}
function init() {
document.getElementById("images").addEventListener("change", show, false);
}
document.addEventListener( "DOMContentLoaded", init, false );
<body>
<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory name="myFiles"
multiple/>
<span id="list"></span>
</form>
<div id="sidebar1"><img id="willchange" src="images/railaythailand.jpg" width="1200" height="832" alt=""/></div>
</body>
I'm trying to do thumbnails for the images uploaded. I want to create diferents classes for the thumbs, for this, I'm trying to use de i of the loop. But this assume just the final value. Why? Thanks
for (var i = 0; i < inp.files.length; i++) {
//create the thumbnails
var reader = new FileReader();
reader.onload = function (e) {
$('.thumbs').append('<div class="thumb_item" id="c'+ i +'"></div>');
$('<img />').attr({'src': e.target.result}).addClass('img_thumb').appendTo('.thumb_item:last');
};
reader.readAsDataURL(this.files[i]);
}
Why can't you apply the same technique pointed out in the comment?
reader.onload = (function(index)
{
return function (e)
{
$('.thumbs').append('<div class="thumb_item" id="c'+ index +'"></div>');
$('<img />').attr({'src': e.target.result}).addClass('img_thumb').appendTo('.thumb_item:last');
};
})(i);
Thanks for all, I solved this way:
for (var i = 0; i < inp.files.length; i++) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (theFile) {
var count = i;
return function (e) {
$('.thumbs').append('<div class="thumb_item" id="c'+ count +'"></div>');
$('<img />').attr({'src': e.target.result}).addClass('img_thumb').appendTo('.thumb_item:last');
};
})(i);
reader.readAsDataURL(this.files[i]);
}