so so new at this and are trying to get a schooljob done, but I have got stuck..
This code is going to work like this. a user is going to be able to upload images, it will be stored in a database, a thumbnail is to be shown on the site and will be enlarged onclick.
my question. I get the picture to show on the page, but how do I make it as thumbnail? JQuery? Fancybox? I havn´t gotten the hang of how to implement it.
Please help!
Current code is:
<script type='text/javascript'>
function main()
{
var inputFileToLoad = document.createElement("input");
inputFileToLoad.type = "file";
inputFileToLoad.id = "inputFileToLoad";
document.body.appendChild(inputFileToLoad);
var buttonLoadFile = document.createElement("button");
buttonLoadFile.onclick = loadImageFileAsURL;
buttonLoadFile.textContent = "Load Selected File";
document.body.appendChild(buttonLoadFile);
}
function loadImageFileAsURL()
{
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];
if (fileToLoad.type.match("image.*"))
{
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var imageLoaded = document.createElement("img");
imageLoaded.src = fileLoadedEvent.target.result;
document.body.appendChild(imageLoaded);
};
fileReader.readAsDataURL(fileToLoad);
}
}
}
main();
</script>
</body>
</html>
If you only have a copy of the image (the original), then you can adjust the image size with CSS Dimension Properties. This question shows how to create a thumbnail gallery.
No php, no fancybox, but this works:
insert the following into the body:
<div id="div1">
<img id="img1" height="100px" width="100px" />
</div>
replace the following 4 lines:
// var imageLoaded = document.createElement("img");
// imageLoaded.src = fileLoadedEvent.target.result;
// document.body.appendChild(imageLoaded);
// };
with the following 2 lines:
document.getElementById("img1").src = fileLoadedEvent.target.result;
}
Related
I'm using this awesome tutorial to preview multiple image before upload.
Now I need to put some information, file name & file size.
Below is the sample:
And the JS:
function previewImages()
{
var preview = document.querySelector('.gallery');
if(this.files)
{
[].forEach.call(this.files, readAndPreview);
}
function readAndPreview(file)
{
if (!/\.(jpe?g|png|gif)$/i.test(file.name))
{
return alert(file.name + " is not an image");
}
var reader = new FileReader();
reader.addEventListener("load", function() {
var image = new Image();
image.width = 150;
image.height = 150;
image.title = file.name;
image.src = this.result;
preview.appendChild(image);
});
reader.readAsDataURL(file);
}
}
document.querySelector('#uploadFile').addEventListener("change", previewImages);
HTML:
<span class="btn btn-default btn-file">
Browse <input type="file" name="uploadFile" id="uploadFile" multiple="multiple"/>
</span>
<div class="gallery" style="display: flex; flex-wrap: wrap;"></div>
I know to get the file size and file name is using this: file.size & file.name.
But now how to put that information on my code?
And 1 more how to add delete button for each image and function to delete it?
I made some suggestions in a comment, but perhaps they weren't helpful. Here's a more complete answer.
Here's a simplified JSFiddle which adds some text under the image. I've just faked a placeholder image to simplify things and focus on the question you asked.
You really only need to do a few things:
1) Create an HTML element to hold your new text. If you don't add this, it won't style well under the <img>. You could add an empty container inside your gallery for text, but going by the name "gallery", it is intended for multiple pictures, so it doesn't make sense to add a bunch of empty placeholders.
You can create an element with (you could use any element of course):
var info = document.createElement("div");
2) Add text to that element. You can do that in several ways, maybe best is:
var text = document.createTextNode('your text');
info.appendChild(text)
3) Add your new element to the DOM, specifically after your new image:
preview.appendChild(info);
Putting it all together (JSFiddle), with some simplification:
var preview = document.querySelector('.gallery'),
image = new Image(),
info = document.createElement("div");
image.width = 150;
image.height = 150;
image.title = 'Foo Title';
image.src = 'https://via.placeholder.com/150';
info.appendChild(document.createTextNode(image.title));
info.appendChild(document.createElement("br"));
info.appendChild(document.createTextNode(image.width + ' x ' + image.height + 'px'));
preview.appendChild(image);
preview.appendChild(info);
I am building a small web-tool where editors can write content by using buttons to add paragraphs and images. I store the elements with an id ((number of element) starting at 0 and incremented for every new element) and load with a button in order to a div "preview" where the content is supposed to be displayed as in the web page later on.
My issue is that, for a reason I don't understand, the image is always displayed below all the paragraphs instead of being in order. Presumably there is an easy fix, but I am very new to HTML, CSS and JS and couldn't find the solution online.
Sorry if this is a stupid mistake or the solution was already posted somewhere.
Javascript handling the preview rendering:
// Preview current document status
document.getElementById("previewButton").addEventListener("click", function() {
// Clear
document.getElementById("preview").innerHTML = "";
// Add all elements properly
var section = document.getElementById("preview");
var id = "preview";
for (var counter = 0; counter < element_counter; counter++) {
var type = document.getElementById(counter).nodeName;
// If text element
if (type === "TEXTAREA") {
var paragraph = document.createElement("p");
var text = document.getElementById(counter).value;
paragraph.setAttribute("id", id + counter);
paragraph.setAttribute("class", "flow-text");
paragraph.append(text);
section.appendChild(paragraph);
}
// If image element
if (type === "INPUT") {
var file = document.getElementById(counter).files[0];
var reader = new FileReader();
reader.onload = function(e) {
var image = document.createElement("img");
image.setAttribute("id", id + counter);
image.setAttribute("src", e.target.result);
image.setAttribute("class", "materialboxed responsive-img");
section.appendChild(image);
}
reader.readAsDataURL(file);
}
}
});
This might work. I can't test though without your code. However basically the principle at work is to isolate some of the vars so they represent distinct instantiations. And then immediately add the image element to the DOM. The reader.onload is expected to run asynchronously still.
enter code here if (type === "INPUT") {
(function() {
var file = document.getElementById(counter).files[0];
var reader = new FileReader();
var image = document.createElement("img");
image.setAttribute("id", id + counter);
image.setAttribute("class", "materialboxed responsive-img");
section.appendChild(image);
reader.onload = function(e) {
image.setAttribute("src", e.target.result);
}
reader.readAsDataURL(file);
}());
}
My basic task is select image and display it,without saving it in database.
For this
1.I have made a select tag in html,through which I can upload the image.
2.I have made a blank image tag in which at there is no image source,alternate is upload image.
3.select tag has onchange javascript event handler which calls javascript function changeimage.
<script>
function changeimage()
{
document.form_name.imagetag.src=document.form_name.filetag.value;
}
</script>
In above Code
form_name : Is the name of my form
<form name = "form_name">
imagetag : Is the name of my Img tag
<Img src=" " name = "imagetag">
filetag : Is the name of my
<input type="file" name = "filetag" onchange="changeimage()">
I have save file using php extension.And when I try to print the value of filetag it shows "C:\fakepath\image.png",display this address for all image.
I have save my php file in www location.
I am using window 7,wamp server and chrome latest version.
You may want to checkout this solution (where my code derives from). It involves a little bit of jQuery but if you truly must write it out in pure JS, here you go.
Note: I modified your tags to conform to the JS below. Also try to stay away from writing any inline scripts. Always good to keep your HTML and JS loosely coupled.
var fileTag = document.getElementById("filetag"),
preview = document.getElementById("preview");
fileTag.addEventListener("change", function() {
changeImage(this);
});
function changeImage(input) {
var reader;
if (input.files && input.files[0]) {
reader = new FileReader();
reader.onload = function(e) {
preview.setAttribute('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
<input type="file" id="filetag">
<img src="" id="preview">
You can also use the Image() constructor. It creates a new HTML Image Element.
Example -
document.getElementById("filetag").addEventListener("change", function(e) {
let newImg = new Image(width, height);
// Equivalent to above -> let newImg = document.createElement("img");
newImg.src = e.target.files[0];
newImg.src = URL.createObjectURL(e.target.files[0]);
output.appendChild(newImg);
});
Reference - https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
You need one input tag to upload file and a image tag to render on the site.
The HTML and Javascript should look like
const renderFile = () => {
const render = document.querySelector('img')
const file = document.querySelector('input[type=file]').files[0]
const reader = new FileReader();
reader.addEventListener('load' , ()=> {
render.src = reader.result;
}, false)
if(file){
reader.readAsDataURL(file);
}
}
<input type = 'file' onchange = 'renderFile()' >
<br>
<br>
<img src = "" alt='rendered image' id='rendered-image' >
Simply on every upload the web page will show the image uploaded
You can Style the height and width of the image according to the need
In the code below I have an image in C Directory and I want to display the image on window load using JavaScript. I tried but image is not displaying.
<div id="thmbDiv"></div>
Script:
window.onload=function() {
var thumbContainer = document.getElementById("thmbDiv");
var thumbnail = document.createElement("img");
thumbnail.onload=function() {
thumbContainer.appendChild(thumbnail);
}
thumbnail.src = "C:\Hello\Search\Image0529.jpg";
}
Try
<div id="thmbDiv"><img id="imageTag" src=""></div>
window.onload=function() {
var thumbnail = document.getElementById("imageTag");
thumbnail.src="C:\Hello\Search\Image0529.jpg";
}
Is it possible to assign a Javascript image object directly to the DOM? Every example I've seen has the image object being loaded and then the same file name assigned to an HTML element and my understanding is that the actual image data is coming from the browser cache in the filing system.
I want to guarantee that the image is loaded so I want to load it into a Javascript image object have the data in memory and then add it directly to the page.
Is this possible?
Cheers, Ian.
You can create the image element and append it directly to the DOM once it has loaded:
var image = new Image();
image.onload = function(){
document.body.appendChild(image);
};
image.src = 'http://www.google.com/logos/2011/guitar11-hp-sprite.png';
example: http://jsfiddle.net/H2k5W/3/
See:
<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>
Reference:
http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317
if (document.images) {
var preload_image_object = new Image();
var image_urls = new Array();
image_urls[0] = "http://mydomain.com/image0.gif";
image_urls[1] = "http://mydomain.com/image1.gif";
image_urls[2] = "http://mydomain.com/image2.gif";
image_urls[3] = "http://mydomain.com/image3.gif";
var i = 0;
for(image_url in image_urls) {
preload_image_object.src = image_url;
}
}