add image as div with javascript - javascript

I am trying to add an image as an element into my webpage. I am unable to do so. There are instructions on how to preview an image, but I was unable to find a solution.
What I want it to do is to add a div with an image into the webpage and keep loading it with different images. So after I add image 1, I would load image 2 under image 1 in the same webpage.
html body code:
<input type='file' id='getval' /><br/><br/>
<span onclick="readURL()" class="addBtn">Add</span>
<div id="myUL"></div>
javascript code:
<script type="text/javascript">
// grabs image
var file = document.createElement('image');
file.src = document.getElementById('getval').files[0];
// creates div & assigns id
var div = document.createElement('div');
div.id = 'item';
// adds file to div
file.type = 'image';
div.appendChild(file);
//adds item
document.getElementById("myUL").appendChild(div);
}
</script>
edit1*
I think adding the output of the code I want to display would be better inside the html document.
javascript generates html code inside document:
<div style="background-image":url("image");"><div>

You can use this script
count = 0;
function viewImage(){
var imagefile = document.querySelector('#image');
if (imagefile.files && imagefile.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var content = '<img id="temp_image_'+count+'" style="border: 1px solid; width: 107px;height:107px;" >';
document.querySelector('#all_images').innerHTML += content;
document.querySelector('#temp_image_'+count).setAttribute('src', e.target.result);
}; reader.readAsDataURL(imagefile.files[0]);
this.imagefile = imagefile.files[0];
count++;
}else{
console.log("Image not selected");
}
}
<div id="all_images">
</div>
<input id="image" name="image" type="file" onChange="viewImage()">

Here you go, although pay attention to the comment at line 3.
<script type="text/javascript">
var file = document.createElement("img");
file.setAttribute("src", document.getElementById('getval').files[0]); //You can use HTML5 File API here
file.setAttribute("height", "250");
file.setAttribute("width", "250");
var divTocreate = document.createElement('div');
divTocreate.id = 'item';
divTocreate.appendChild(file);
document.getElementById("myUL").appendChild(divTocreate);
</script>

Related

Why won't my program display the .png it receives from the user as a form input?

I have a program that uses a form to receive a .png file from the user, which is then dynamically set as an img. The form seems to allow me to select a file, but does not display that file. I was under the assumption that I could set the src for the img as the variable(wscimginput) associated with the user's file, but that does not seem to be working? Is there another way I should approach this?
Here's the piece of code dealing with the form and the image.
var wscimgform = document.createElement("form");
var wscimginput = document.createElement("input");
wscimgform.appendChild(wscimginput);
_wsc.appendChild(wscimgform);
wscimginput.setAttribute("id", "wscimginput");
wscimginput.setAttribute("type", "file");
wscimginput.setAttribute("accept", "image/*");
var wscimg = document.createElement("img");
_wsc.appendChild(wscimg);
wscimg.setAttribute("src", "wscimginput");
wscimg.setAttribute("position", "absolute");
wscimg.setAttribute("height", "80%");
wscimg.setAttribute("top", "20%");
This is adapted from the linked article without jQuery.
<html>
<head>
</head>
<body>
<div id="formDiv">
</div>
<script type="text/javascript">
var f = document.createElement("form");
var fi = document.createElement("input");
fi.setAttribute("id", "daFile");
fi.setAttribute("type", "file");
fi.setAttribute("accept", "image/*");
fi.addEventListener("change", showPreview);
f.appendChild(fi);
var i = document.createElement("img");
i.setAttribute("id", "daImg");
i.setAttribute("width", "200px");
i.setAttribute("height", "200px");
f.appendChild(i);
document.getElementById("formDiv").appendChild(f);
function showPreview(ev) {
if (ev.target.files && ev.target.files[0]) {
var r = new FileReader();
r.onload = function (e) {
document.getElementById("daImg").setAttribute("src", e.target.result);
}
r.readAsDataURL(ev.target.files[0]);
}
}
</script>
</body>
</html>

How to load image on onload with javascript?

I am new with HTML and JavaScript. I am trying to load image using onload event through JavaScript.
My code is as below:
<script>
function createImage() {
('testimonialhulk').src='photo.jpg';
</script>
and the HTML is
<body onload="createImage()">
<div class="testimonialhulk">
</div>
</body>
</html>
I have to display image in div tag.
This works in my jsfiddle
<body onload="createImage();">
<div id="testimonialhulk">
Hello
</div>
</body>
Js:
function createImage()
{
var myElement = document.getElementById("testimonialhulk");
myElement.style.backgroundImage = "url('https://placehold.it/350x150')";
}
JS fiddle
https://jsfiddle.net/wuskc68d/1/
Try this
function createImage() {
var par = document.getElementsByClassName("testimonialhulk")[0];
var img = document.createElement('img');
img.src = 'put path here';
par.appendChild(img);
}
or use <div id="testimonialhulk">
document.getElementById('testimonialhulk')
.innerHTML = '<img src="imageName.png" />';

Unable to read data from multiple files using HTML FileReader

<input type="file" id="input" multiple onchange="handleFiles(event.target)">
<script language="javascript" type="text/javascript">
<!--
function handleFiles(input)
{
for (i = 0; i < input.files.length; i++)
{
var reader = new FileReader();
reader.onload = function()
{
alert(reader.result)
};
reader.readAsText(input.files[i]);
}
}
//-->
</script>
I am trying to display the contents of some files that I upload. It works fine if I select a single file, but if I select multiple files, only the content of one file is displayed, rest all are blank. What am I doing wrong?
You just need to amend it slighty to do the following:
<input type="file" id="input" multiple onchange="handleFiles(event.target)">
<script language="javascript" type="text/javascript">
function handleFiles(input)
{
for (var i = 0; i < input.files.length; i++) { //for multiple files
(function(file) {
var name = file.name;
var reader = new FileReader();
reader.onload = function(e) {
// get file content
var text = e.target.result;
alert(text)
}
reader.readAsText(file, "UTF-8");
})(input.files[i]);
}
}
</script>
Reference: https://stackoverflow.com/a/9815648/3088780
I think jquery help you easily
HTML:
<script src="jquery-2.2.0.min.js"></script>
<input type="file" multiple="multiple" />
<ul id="output">
</ul>
Jquery:
$('input:file[multiple]').change(
function(e){
console.log(e.currentTarget.files);
var numFiles = e.currentTarget.files.length;
for (i=0;i<numFiles;i++){
fileSize = parseInt(e.currentTarget.files[i].size, 10)/1024;
filesize = Math.round(fileSize);
$('<li />').text(e.currentTarget.files[i].name).appendTo($('#output'));
$('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last'));
}
});
reference from : https://stackoverflow.com/a/7719334/5566169

Reading in a text file to display in HTML

I am just working on a web site for fun and I was wondering if you could use JavaScript to read in a local text file and then display it HTML. So for example if I had a text file saved with my project then could I write a function in JavaScript that reads the entire file and then just displays all that text within on the web page?
I've looked around and tried to find something that will do this, but I don't think I fully understand. I have:
function readFile(fileName){
var fileRead = new ActiveXObject('Scripting.FileSystemObject');
text = fileRead.OpenTextFile(fileName, 1, false, 0);
while(!text.AtEndOfSteam){
text += text.ReadLine();
}
text.Close();
}
I don't know if this is will work or do what I want to do. So my question is, how do I use JavaScript to read in a text file, then display the contents of that text file on a webpage in HTML?
You have to use the File API.
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function (e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});
<input type="file" id="myFile">
<div id="output"></div>
EDIT
After reading your comment, i think this is what you want.
var output = document.getElementById("output");
$("a").on("click", function (e) {
e.preventDefault();
$.ajax(this.href).done(function(data) {
output.textContent = data;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
Link to file
<html>
<head>
<title>reading file</title>
</head>
<body>
<input type="file" id="myFile">
<hr>
<!--<div style="width: 300px;height: 0px" id="output"></div>-->
<textarea style="width:500px;height: 400px" id="output"></textarea>
<script>
var input = document.getElementById("myFile");
var output = document.getElementById("output");
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
var myFile = this.files[0];
var reader = new FileReader();
reader.addEventListener('load', function (e) {
output.textContent = e.target.result;
});
reader.readAsBinaryString(myFile);
}
});
</script>
</body>
</html>

Javascript- code getting executed before all elements are ready

I have this code in my web. This page takes multiple image files as input and displays them before uploading them to server.
<html>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<body>
<header>
<h1>File API - FileReader</h1>
</header>
<label for="files">Select multiple files: </label>
<input id="files" type="file" multiple/>
<div id='10' style=" width:100px; height:50px; background-color:#006633" onclick="submit_rr(event)">Click</div>
<output id="result" />
</body>
<script language="javascript" type="text/javascript" >
function submit_rr(event){
$('#files').click();
}
$("#files").change(function(){
show_selected(this);
});
function show_selected(input){
for(i = 0;i< input.files.length; i++) {
var reader = new FileReader();
reader.readAsDataURL(input.files[i]);
reader.onload = function (e) {
var img = new Image;
img.onload = function() {
if(img.width>=img.height){
ratio=img.height/img.width;
height=ratio*100;
height_rem=(100-height)/2;
var crt=document.createElement('div');
crt.id="main_some";
crt.className="ind_req_sty";
var Friend="Friend";
crt.innerHTML="<img id="+i+" width='100px' height='"+height+"px' src='"+e.target.result+"'/>";
document.getElementById('10').appendChild(crt);
}else{
ratio=img.width/img.height;
width=ratio*100;
var crt=document.createElement('div');
crt.id='main_req';
crt.className="ind_req_sty";
crt.innerHTML="<img id="+i+" height='100px' width='"+width+"' src='" + e.target.result +"'/>";
document.getElementById('10').appendChild(crt);
}
}
img.src=reader.result;
}
}
}
</script>
</html>
Problem is that, this script executes before all the elements are displayed. As a result only few images are displayed(say 4 out of 10 selected). I tried adding .ready() and .load() but that doesn't work. However if I add an alert('something') all images are displayed without any issue. is there a way I can delay execution so that all images are loaded. I have also tried setTimeout() without any luck. Thanks for your help
If you properly indent your code, you will set that $("#files).change(/*..*/) line is not inside the submit_rr function.
Wrap all your code with
$(function () {
/* your code here */
});
Basically what it does is, creating event handler on dom ready event and after that we are executing our script.
Also, this is a commonly asked question. If you believe the problem you are having is not unique to your case, do your research, if you still cannot find the answer, go ahead and ask.
The link at http://whathaveyoutried.com tells about developers' feelings on answering a repeatedly asked question.
Try putting your <script> tag before the closing </body> tag
Hi After searching .....
I found this works ...
function eecute(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'))
continue;
var upload_pic = new FileReader();
upload_pic.addEventListener("load",function(event){
var pic_u = event.target;
var img = new Image;
img.src=pic_u.result;
if(img.width>=img.height){
var div = document.createElement("cover");
div.innerHTML= "<div style='text-align: center; margin-top:8px; width:150px;margin-right:5px; height:150px;float:left'><img style='display:inline-block;' width='150' src='" + pic_u.result + "'/></div>";
output.insertBefore(div,null);
}else{
var div = document.createElement("cover");
div.innerHTML="<div style='text-align: center ;margin-top:8px;width:150px; margin-right:5px; height:150px;float:left'><img style='display:inline-block; margin:auto;' src='" + pic_u.result + "'height='150' /></div>";
output.insertBefore(div,null);
}
});
//Read the image
upload_pic.readAsDataURL(file);
}
}

Categories

Resources