I got this code from a website and applied to my code:
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)$/;
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.width="300";
img.height ="300";
img.src = e.target.result;
dvPreview.appendChild(img);
}
reader.readAsDataURL(file);
} else {
alert(file.name + " is not a valid image file.");
dvPreview.innerHTML = "";
return false;
}
}
}
}
};
It works properly, but I want some more style to be added to my code. Specially the padding and the object-fit css properties.
I tried to run:
img.objectFit="cover";
img.style.objectFit="cover";
img.css("object-fit","cover");
and a lot more possibilities that i could search and apply, but any of those worked out.
What is the right way to make this work?
var img = document.createElement('img');
img.width = '300';
img.height = '300';
img.style.padding = '20px';
img.style.objectFit = 'fill';
document.body.appendChild(img);
Related
I created a upload for multiples videos, and I'm showing in a thumbnail.
It's working ok until here, the problem is, I select for example 3 videos differently, but when loading my preview for all videos are the same.
HTML:
<div id="thumbnail"></div>
<input type="file" id="upload-file" accept="video/*" multiple/>
JavaScript:
$('div').on('click', '.closeDiv', function () {
$(this).prev().remove();
$(this).remove();
$('#upload-file').val("");
});
var fileDiv = document.getElementById("upload");
var fileInput = document.getElementById("upload-file");
fileInput.addEventListener("change", function (e) {
var filesVAR = this.files;
showThumbnail(filesVAR);
}, false);
function showThumbnail(files) {
debugger
for (var i = 0; i < files.length; i++) {
var file = files[i];
var thumbnail = document.getElementById("thumbnail");
var pDiv = document.createElement("div");
var video = document.createElement("video");
var div = document.createElement("div");
pDiv.setAttribute('class', 'pDiv');
thumbnail.appendChild(pDiv);
video.setAttribute('class', 'imgKLIK5');
pDiv.appendChild(video)
div.innerHTML = "Excluir";
div.setAttribute('class', 'closeDiv');
pDiv.appendChild(div)
video.file = file;
var reader = new FileReader()
reader.onload = (function (aImg) {
return function (e) {
var blobURL = URL.createObjectURL(file);
aImg.src = blobURL;
aImg.setAttribute("controls", "")
};
}(video))
var ret = reader.readAsDataURL(file);
var canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
video.onload = function () {
ctx.drawImage(video, 100, 100);
}
}
}
Check the image results (I selected 3 videos):
But the results:
just need to change the vars to lets and it works fine
$('div').on('click', '.closeDiv', function() {
$(this).prev().remove();
$(this).remove();
$('#upload-file').val("");
});
let fileDiv = document.getElementById("upload");
let fileInput = document.getElementById("upload-file");
fileInput.addEventListener("change", function(e) {
let filesVAR = this.files;
showThumbnail(filesVAR);
}, false);
function showThumbnail(files) {
debugger
for (let i = 0; i < files.length; i++) {
let file = files[i];
let thumbnail = document.getElementById("thumbnail");
let pDiv = document.createElement("div");
let video = document.createElement("video");
let div = document.createElement("div");
pDiv.setAttribute('class', 'pDiv');
thumbnail.appendChild(pDiv);
video.setAttribute('class', 'imgKLIK5');
pDiv.appendChild(video)
div.innerHTML = "Excluir";
div.setAttribute('class', 'closeDiv');
pDiv.appendChild(div)
video.file = file;
let reader = new FileReader()
reader.onload = (function(aImg) {
return function(e) {
let blobURL = URL.createObjectURL(file);
aImg.src = blobURL;
aImg.setAttribute("controls", "")
};
}(video))
let ret = reader.readAsDataURL(file);
let canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
video.onload = function() {
ctx.drawImage(video, 100, 100);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="thumbnail"></div>
<input type="file" id="upload-file" accept="video/*" multiple/>
I hope this helps
Hello I have the following code
function fileValidation() {
var fileInput = document.getElementById('filech');
var filePath = fileInput.value;
var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
if (!allowedExtensions.exec(filePath)) {
alert('error .jpeg/.jpg/.png/.gif ');
fileInput.value = '';
return false;
} else {
//Image preview
if (fileInput.files && fileInput.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('imagePreview').innerHTML = '<img src="' + e.target.result + '"/>';
};
reader.readAsDataURL(fileInput.files[0]);
}
}
}
<input id="filech" type="file" name="file_img[]" multiple onchange="return fileValidation()" />
<div id="imagePreview"></div>
To upload photos by
<input id="filech" type="file" name="file_img[]" multiple onchange="return fileValidation()" />
then show
<div id="imagePreview"></div>
I want to show all the pictures and not one
How to use the loop here and thank all
Well as you said you will need a loop, the easiest way would be to use a for loop, like this:
for (var i = 0; i < fileInput.files.length; i++) {
if (fileInput.files && fileInput.files[i]) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('imagePreview').innerHTML += '<img src="' + e.target.result + '"/>';
};
reader.readAsDataURL(fileInput.files[i]);
}
}
Note:
Note that I changed it to document.getElementById('imagePreview').innerHTML +=, so it keep printing all the iterated images, otherwise it will just override the preview with the last image content.
But the best practice is to create an img element on each iteration and append it to the preview div:
for (var i = 0; i < fileInput.files.length; i++) {
if (fileInput.files && fileInput.files[i]) {
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement("img");
img.src = e.target.result;
document.getElementById('imagePreview').appendChild(img);
};
reader.readAsDataURL(fileInput.files[i]);
}
}
Demo:
function fileValidation() {
var fileInput = document.getElementById('filech');
var filePath = fileInput.value;
var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
if (!allowedExtensions.exec(filePath)) {
alert('error .jpeg/.jpg/.png/.gif ');
fileInput.value = '';
return false;
} else {
//Image preview
for (var i = 0; i < fileInput.files.length; i++) {
if (fileInput.files && fileInput.files[i]) {
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement("img");
img.src = e.target.result;
document.getElementById('imagePreview').appendChild(img);
};
reader.readAsDataURL(fileInput.files[i]);
}
}
}
}
<input id="filech" type="file" name="file_img[]" multiple onchange="return fileValidation()" />
<div id="imagePreview"></div>
I'm using javascript to make a sort of vacation slideshow, where the main image changes depending on what link you're hovering over. I'm still new to javascript, and have spent the last two hours trying to figure out how to get the image to now display a caption underneath, I'd really love some help.
This is my js file:
var canadaOver = new Image();
canadaOver.src = 'images/canada.jpg';
var italyOver = new Image();
italyOver.src = 'images/italy.jpg';
var ukraineOver = new Image();
ukraineOver.src = 'images/ukraine.jpg';
var japanOver = new Image();
japanOver.src = 'images/japan.jpg';
var icelandOver = new Image();
icelandOver.src = 'images/iceland.jpg';
document.getElementById("canada").onmouseover = doMouseOver;
document.getElementById("italy").onmouseover = doMouseOver;
document.getElementById("ukraine").onmouseover = doMouseOver;
document.getElementById("japan").onmouseover = doMouseOver;
document.getElementById("iceland").onmouseover = doMouseOver;
function doMouseOver(evt) {
var anchor = evt.target || evt.srcElement;
var img = document.getElementById("destinations");
var textDiv = document.getElementById('caption');
if (anchor.id == "canada") {
img.src = canadaOver.src;
}
else if (anchor.id == "italy")
{
img.src = italyOver.src;
textDiv.innerHTML = imgText;
}
else if (anchor.id == "ukraine") {
img.src = ukraineOver.src;
textDiv.innerHTML = imgText;
}
else if (anchor.id == "japan") {
img.src = japanOver.src;
textDiv.innerHTML = imgText;
}
else if (anchor.id == "iceland") {
img.src = icelandOver.src;
textDiv.innerHTML = imgText;
}
}
My links are in a table next to the main image. I just can't figure out where the captions even go!
I think this is what you are looking for
https://jsfiddle.net/84cfy1Lf/
HTML
<body>
<section id="country-stuff">
</section>
</body>
SCRIPT
var countries = ['canada', 'italy', 'ukraine', 'japan', 'iceland'];
countries.forEach(function(country) {
var img = document.createElement('img');
img.id = country;
img.className = 'image';
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/CallingCodesWorld-Labeled.svg/500px-CallingCodesWorld-Labeled.svg.png' // swap for real image director: images/' + country +'.jpg';
var mouser = document.getElementById('country-stuff').appendChild(img);
mouser.addEventListener('mouseover', function(event) {
doMouseOver(event);
})
});
var caption = document.createElement('div');
caption.id = 'caption';
document.getElementById('country-stuff').appendChild(caption);
function doMouseOver(event) {
var anchor = event.target;
populateCountryText(anchor)
}
function populateCountryText(anchor) {
document.getElementById('caption').innerHTML = event.target.id;
return caption;
}
CSS
.image {
width: 150px;
}
With this function I am trying to show a lightbulb that switches on and off once the user clicks it.
(function () {
var FavData, ImageData, create_zip, fav, favData;
window.imageData = [];
saveButton = document.createElement("save_button");
saveButton.innerHTML = "save_button";
saveButton.onclick = function () {
var image = document.getElementById('save_button');
if (image.src.match("http://www.w3schools.com/js/pic_bulbon.gif")) {
image.src = "http://www.w3schools.com/js/pic_bulboff.gif";
} else {
image.src = "http://www.w3schools.com/js/pic_bulbon.gif";
}
};
}).call(this);
And my html:
<button id="save_button"><img src="image" width="100" height="180"></button>
with the id "save_button".
There are a few issue with your code. You are not creating element using a tag. After that you are not appending it to the body. And on the button click you have to take the image id to get the source and not the button.
Here is the fiddle of a working functionality.
http://jsfiddle.net/swaprks/9vyauhvf/
(function () {
var FavData, ImageData, create_zip, fav, favData;
window.imageData = [];
saveButton = document.createElement("button");
saveButton.id = "save_button"
img = document.createElement("img");
img.src = "http://www.w3schools.com/js/pic_bulbon.gif";
img.id = "save-btn-img";
saveButton.appendChild(img);
document.body.appendChild(saveButton);
saveButton.onclick = function () {
var image = document.getElementById('save-btn-img');
if (image.src.match("http://www.w3schools.com/js/pic_bulbon.gif")) {
image.src = "http://www.w3schools.com/js/pic_bulboff.gif";
} else {
image.src = "http://www.w3schools.com/js/pic_bulbon.gif";
}
};
}).call(this);
I'm having trouble with a simple file input.
I'm trying to get the width, height and dataURL of multiple images and save them to global variables, but all that's saved is "undefined".
When I tried to make a "demo-fiddle" the "onchange"-event doesn't even seem to fire.
can anyone help me out?
Here's the code of the demo-fiddle:
var WIDTH = [];
var HEIGHT = [];
var SRC = [];
$(window).load(function()
{
grabData();
displayImgs();
});
function grabData()
{
$("#fileInput").on("change",function(e)
{
var file = e.target.files;
for(var i = 0; i<file.length; i++)
{
var reader= new fileReader();
var img = new Image();
reader.onload = function(e)
{
SRC = e.target.result;
img.onload = function()
{
WIDTH = this.width;
HEIGHT = this.height;
}
}
reader.readAsDataURL(file);
console.log(WIDTH);
}
console.log(WIDTH);
});
}
function displayImgs()
{
/*display images*/
for(var i = 0; i<SRC.length; i++)
{
$("body").append("<img src="+SRC[i]+" width="+WIDTH[i]+" height="+HEIGHT[i]+">");
}
}
try below code, tested in fiddle and working - http://jsfiddle.net/02468Lr9/
var WIDTH = [];
var HEIGHT = [];
var SRC = [];
$(document).ready(function() {
grabData();
;
});
function grabData() {
$("#fileInput").on("change",function(e) {
var file = e.target.files;
for(var i = 0; i<file.length; i++) {
var reader= new FileReader();
var img = new Image();
reader.onload = function(e) {
SRC.push(e.target.result);
img.onload = function() {
alert(this.width);
WIDTH.push(this.width);
HEIGHT.push(this.height);
displayImgs();
}
img.src = e.target.result;
}
reader.readAsDataURL(file[i]);
}
});
}
function displayImgs()
{
/*display images*/
for(var i = 0; i<SRC.length; i++) {
console.log(WIDTH);
$("body").append("<img src="+SRC[i]+" width="+WIDTH[i]+" height="+HEIGHT[i]+">");
}
}
The log result is undefined because you log it outside the onload function, and for that it runs before the images load and the value is still undefined.