How to display an image from a file input? [duplicate] - javascript

This question already has answers here:
Preview an image before it is uploaded
(29 answers)
Closed 8 years ago.
I would like to choose a file and display the image on the browser.
I tried inserting the direct image path and it worked.
The problem now is, how can I display the image from the <input type=file> ?
Here is what my code looks like:
function myFunction() {
var file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.onloadend = function {
var image = document.createElement("img");
image.src = "reader"
image.height = 200;
image.width = 200;
document.body.appendChild(image);
}
}
<input type=file name=filename id=file>
<button type=button onclick='myFunction()'>Display</button>

function myFunction() {
var file = document.getElementById('file').files[0];
var reader = new FileReader();
// it's onload event and you forgot (parameters)
reader.onload = function(e) {
var image = document.createElement("img");
// the result image data
image.src = e.target.result;
document.body.appendChild(image);
}
// you have to declare the file loading
reader.readAsDataURL(file);
}
http://jsfiddle.net/Bwj2D/11/ working example

be carrefull : reader.onloadend = function {
must be reader.onloadend = function() {
but why use a fileReader ?
For exemple my function to add pictures in my webSite =>
function createImageBase(src, alt) {
var image = document.createElement('img');
image.src = src;
image.alt = alt;
return image;
}
function addPicture(targetID, imageSRC){
var location = document.getElementById(targetID);
var image = createImageBase(imageSRC, imageSRC);
location.appendChild(image);
}
Then just call it like that :
Display

Related

Show Image Canvas Javascript after upload files with File Reader

So I'm trying to display image on canvas using File Reader. But it won't work. I don't know where the problem is.
var canvas = document.getElementById("ourCanvas"),
context = canvas.getContext('2d'),
uploadedFile = document.getElementById('uploaded-file');
window.addEventListener('DOMContentLoaded', initImageLoader);
function initImageLoader() {
uploadedFile.addEventListener('change', handleManualUploadedFiles);
function handleManualUploadedFiles(ev){
var file = ev.target.files[0];
handleFile(file);
}
}
function handleFile(file) {
var imageType = /image.*/;
if(file.type.match(imageType)){
var reader = new FileReader();
reader.onloadend = function(event) {
var tempImageStore = new Image();
tempImageStore.onLoad = function(ev){
canvas.height = ev.target.height;
canvas.width = ev.target.width;
context.drawImage(ev.target, 0, 0);
}
tempImageStore.src = event.target.result;
}
reader.readAsDataURL(file);
}
}
After I upload the file, image don't show on the Canvas, and does'nt show anything wrong in Console. Is there any problem with my code?

Why is image uploader not working on chrome?

I have a button where you can upload an image and insert it in a tag, it works on every browser but not on chrome. The first reader.onloadend is processed, I can log image and image.src.
var inputUpload = document.getElementById('buttonUpload');
inputUpload.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onloadend = () => {
//Initiate the JavaScript Image object.
var image = new Image();
image.src = reader.result;
console.log('image.src');
image.onloadend = function() { /* execution stops here */
var height = this.height;
var width = this.width;
if (height > 150 || width > 150) {
showAlert('Image dimensions must be within 150×150 pixels.');
} else {
// convert file to base64 String
const base64String = reader.result.replace('data:', '').replace(/^.+,/, '');
// display image
valueImg = "data:image/png;base64," + base64String;
updateImg(valueImg);
};
};
};
reader.readAsDataURL(file);
});
<button id="buttonUpload" type="button" class="d-inline btn-custom mx-0">
Upload
</button>
When I select the image file, it stops at image.loadend but I get no errors in the console

Js/Jquery how to remove previous image thumbnail when choose another image?

I'm doing an upload function that will allow the user to upload a chosen image to the server, and it is supposed to show a thumbnail of the current image. But when another image is chosen, it will add in the newer image thumbnail, and wouldn't remove the older image thumbnail.
So, how do I remove the previous image thumbnail and replace it with the newer one?
Here is my javascript code:
function previewFiles() {
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
// Make sure `file.name` matches our extensions criteria
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.height = 200;
image.title = file.name;
image.style.marginTop = '10px';
image.style.marginRight = '10px';
image.style.borderRadius = '3px';
image.style.marginBottom = '220px';
image.src = this.result;
preview.appendChild(image);
}, false);
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
}
And here is my HTML code:
<input type="file" id="browse" accept='.jpeg, .png, .jpg' onchange='previewFiles()' name="image" />
<div id='preview'></div>
Thanks in advance!
You need to remove all the children before adding new one.
reader.addEventListener("load", function () {
var image = new Image();
image.height = 200;
image.title = file.name;
image.style.marginTop = '10px';
image.style.marginRight = '10px';
image.style.borderRadius = '3px';
image.style.marginBottom = '220px';
image.src = this.result;
//removes all children (images)
preview.childNodes.forEach(c => preview.removeChild(c));
preview.appendChild(image);

check hight width of image using javascript for multiple file uploads

I am facing problem for checking height and width for multiple images upload
there is no option for check height & width for image file using:
document.getElementById('id').files;
So I need help to check height & width of multiple uploaded images using JavaScript
//html code
<input type='file' name='images[]' id='image' multiple>
//javascript code
$("#image").change(function () {
var this_image = $(this);
var img = document.getElementById('image').files;
var img_len = img.length;
for(var i=0;i<img_len;i++)
{
var this_img = document.getElementById('image').files[i];
var reader = new FileReader();
//Read the contents of Image File.
reader.readAsDataURL(document.getElementById('image').files[i]);
reader.onload = function (e) {
//Initiate the JavaScript Image object.
var image = new Image();
//Set the Base64 string return from FileReader as source.
image.src = e.target.result;
//Validate the File Height and Width.
image.onload = function () {
var height = this.height;
var width = this.width;
console.log(height+"---"+width);
};
}
});
Function for getting image width & height from File object:
function getImageSize(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.onload = function(e2) {
callback(img.width, img.height);
}
img.src = e.target.result;
};
reader.readAsDataURL(file);
};
For example, if the file upload input has the id 'inputFile', the following code will print to the console the size of all its images:
var files = document.getElementById('inputFile').files;
for (var i = 0; i < files.length; i++) {
getImageSize(files[i], function(width, height) {
console.log('Image: Width = ' + width + ', height = ' + height);
});
}
Note: it won't necessarily print the images sizes as their order!

Reading width of an image using file reader?

I'm having issues reading sizes with file reader. Have tried various browsers and files, width always comes back as 0.
var fileReader = new FileReader();
var img = new Image();
fileReader.onload = function(event) {
img.src = event.target.result;
console.log(img.width);
};
fileReader.onerror = function() {
//handle error
};
fileReader.readAsDataURL(file);
The file var is looped out from the following on a drag and drop event:
e.originalEvent.dataTransfer.files
I think you have an error while assigning binary data to Image.
Assigning image:
fileReader.onload = function(e) {
var img = new Image();
img.src = fileReader.result;
}
Demo:
document.getElementById('img').addEventListener('change', function(e) {
var file = this.files[0];
var fileReader = new FileReader();
var img = new Image();
fileReader.onload = function(event) {
img.src = fileReader.result;
img.onload = function() {
console.log(img.width);
}
document.getElementById('result').appendChild(img);
};
fileReader.readAsDataURL(file);
})
<input id="img" type="file">
<div id="result"></div>
see codepen demo or jsfiddle
maybe your image object is not loaded try this :
img.onload = function () {console.log(img.width)}

Categories