When the default photo is clicked it should make a user to select a file from his computer other than making an input type = "file" that makes the user to first click on browse button than select a file. A user should directly click on default photo and a file selection window should appear.
<html lang = "en">
<head>
<title>
Profile Click
</title>
<style>
#file{
display: none;
}
</style>
</head>
<body>
<script>
function pro1(){
document.prolis.getElementById("image") = document.prolis.getElementById("file");
}
</script>
<form name = "prolis">
<img src = "index.jpg" id = "image" onclick = "pro1()";>
<input type = "file" id = "file">
</body>
</html>
Mozilla Firefox console shows "TypeError: document.prolis.getElementById is not a function".
How should I make this function work?
This is my default image:
To make the image behave like an input file element, you can just call the input file .click() method when you click on the img.
This is how should be your code:
function pro1(){
document.getElementById("file").click();
}
Demo:
<html lang = "en">
<head>
<title>
Profile Click
</title>
<style>
#file{
display: none;
}
</style>
</head>
<body>
<script>
function pro1(){
document.getElementById("file").click();
}
</script>
<form name = "prolis">
<img src = "index.jpg" id = "image" onclick = "pro1()";>
<input type = "file" id = "file">
</body>
</html>
Note:
You just need to use document.getElementById("file") to access an element by its id.
if you want to select element by id you should do it like this:
document.getElementById('element_id')
If you want to select form element you should do it like this:
document.form_name.element_id
Create a click event for #file in your function
function pro1(e){
e.preventDefault();
document.getElementById('file')[0].click();
});
}
You can replace image automatically with newly selected image.
<div class="image-upload">
<label for="file-input">
<img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
</label>
<input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
</div>
<script>
function previewFile(input){
var file = $("input[type=file]").get(0).files[0];
if(file){
var reader = new FileReader();
reader.onload = function(){
$("#previewImg").attr("src", reader.result);
}
reader.readAsDataURL(file);
}
}
</script>
Related
So I have an input type file and textarea. I want to show the file name in textarea on input type file change. Here I have reached something, but this works only for the first time and when I write some text and want to select another file I don't get that file name in textarea.
<!DOCTYPE html>
<html>
<head>
<title>victory please</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
#list {
width: 500px;
height: 650px;
}
</style>
</head>
<body>
<input type="file" name="img[]" id="file">
<input type="submit" name="submit" id="submit">
<br><br>
<textarea id="list" name="list"></textarea>
<div id="demo"></div>
<script>
$('#file').change(function () {
var value = $('#file').val();
$('#list').append(value);
});
$('#submit').click(function() {
var a = getElementById('list').value;
getElementById('demo') = a;
});
</script>
</body>
</html>
You need to use .value or .innerHtml after write manually in textarea.
For example change this:
$('#list').append(value);
into:
$('#list').val($('#list').val()+value);
should works.
I follow Javascript - How to extract filename from a file input control and I have few problems with getting file name from input/upload file. I use this code to get file name from input file
var fileInput = document.getElementById('upload_file').files[0].name;
But when I change with another file, I still get my old file name and I need to refresh my browser to get latest file name. How to fix something like this?
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<input type="file" id="upload_file">
<br>
<h1 id="nama_file"></h1>
<script>
var fileInput = document.getElementById('upload_file').files[0].name;
//var filename = fileInput.files[0].name;
console.log(fileInput);
document.getElementById('nama_file').innerText = fileInput;
</script>
</body>
</html>
You need an event:
var filename = document.getElementById('filename');
document.getElementById('upload_file').addEventListener('change', function(e) {
filename.innerText = e.target.files[0].name;
});
<input type="file" id="upload_file">
<br>
<h1 id="filename"></h1>
You can add a event on every load and change the inner text of 'name_file' accordingly.
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<input type="file" id="upload_file">
<br>
<h1 id="nama_file"></h1>
<script>
var fileInput = document.getElementById('upload_file').files[0].name;
fileInput.addEventListener('change', () => {
document.getElementById('nama_file').innerText = fileInput;
});
console.log(fileInput);
</script>
</body>
</html>
I have a image from Php database and is in this format
<img src="data:image/jpeg;base64,{{base64_encode($file)}}"/>
//I am able to see the image in this tag
now an onclick function is used to edit the information attached as well as user can also change the image but for that I need to read this image and when clicked it should be pasted into a image tag with this id
<img style="max-width:400px;" src="" id="imgretprd">
I researched a bit and came to know about this code
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
But I am not sure how to use it.
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};
function loadImageFile() {
if (document.getElementById("uploadImage").files.length === 0) { return; }
var oFile = document.getElementById("uploadImage").files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}
</script>
</head>
<body onload="loadImageFile();">
<form name="uploadForm">
<table>
<tbody>
<tr>
<td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>
<td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
</tr>
</tbody>
</table>
<p><input type="submit" value="Send" /></p>
</form>
</body>
</html>
JS Bin
Here is a Demo from MDN, but I can't find the source web.
Maybe this can help you.
You can able to set image Attribute using Javascript like
var imageFile='Base64 String'
document.getElementsByTagName("img")[0].setAttribute("src",imageFile);
using Jquery
$("img").attr("src",imageFile);
Fiddle
You don't need FileReader at all. Copying an image source is as simple as assigning the src attribute from one to the other:
// for each clickable image, add a 'click' event listener
document.getElementById('clickable-image-id').addEventListener('click',function() {
// set the target source to this image source
document.getElementById('imgretprd').src = this.src;
});
or jQuery:
jQuery(function($) {
$('.clickable-images').click(function() {
$('#imgretprd').attr('src',$(this).attr('src'));
});
});
I am trying t load an image into div tag from a url which is obtained from a textbox.My current file is as follows..I don't know what else to be done
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
Using pure javascript you can load the image as follows. I am using the onChange event to detect whether url has been supplied to the textbox or not. On pressing Enter key, the image will be loaded in the div.
function addImage()
{
var url = document.getElementsByClassName("imageURL1")[0].value;
var image = new Image();
image.src = url;
document.getElementsByClassName("ImageContainer")[0].appendChild(image);
}
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1" onChange="addImage();">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
You can try something like this.
$(document).ready(function(){
$("#Submit").click(function(){
var image_url = $(".imageURL1").val();
$(".ImageContainer").html("<img src='"+image_url+"' width='200'>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="imageURL1">
<button id="Submit">Submit</button>
<div class="ImageContainer">
</div>
Js fiddle example -> http://jsfiddle.net/0kvxpnmv/
$('<img src="'+image_url+'">').load(function() {
$(this).appendTo('.ImageContainer');
});
JS Fiddle
Use php
index.php file
<form action="GetURL.php" method="post">
<input type="text" name="url">
<input type="submit">
</form>
Now when they click submit it will take you to the new page
GetURL.php
$image_url = $_REQUEST['url'];
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
<?php echo '<img src="{$image}"/>'; ?>
</div>
</body>
</html>
On this page you can see that in your imageContainer class you have the image url being posted with PHP
The best way to handle this from here would be to have the form on the same page as the image and have it post the url with ajax.
So you would type in the url to the textbox and when your done it refreshes the image url.
How about using a button to call a funtion that'll change the image src with url in the text box
HTML
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<button onclick="func()">Load image</button>
<div class="ImageContainer">
<img src="" id="imgContainer">
</div>
</body>
</html>
javascript
(function(){
var func = function(){
var url = $(".imageURL1").val()
$('#imgContainer').attr('src',url)
}
})();
Here's the jsFiddle with jQuery and without jQuery
Please see my code below, on the change event of the text input, it would create an jQuery img tag then add then use the URL from the input as the source and clear the contents of the output div. Once the image is loaded, it will replace the content of the output div.
$('.imageURL1').change(function() {
var $img = $('<img/>');
$img.attr('src', $(this).val());
$img.load(function() {
$('.ImageContainer').html(this);
});
});
This solution requires jQuery.
Working fiddle here.
So I'm trying to automatically update an image source using javascript but for some reason it won't work. The image is being retrieved from my php text generator (generates an image with text on it) the text is grabbed from a input box. I want it to automatically grab the text inside the inputbox then change the src of image to gen.php?text=Input_box_text_goes_here
here is my code:
<html>
<head>
<title>text generator</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
</head>
<body>
<script language=javascript type='text/javascript'>
setInterval(function () {
var str= document.form.letters.value;
$('#logo').src("gen.php?text="+str);
}, 10);
</script>
<img id="logo" name="logo" src="gen.php?text=default" />
<form name="form" action="">
Text: <input type="text" name="letters"/>
</form>
</body>
</html>
any help will be appreciated.
Change $('#logo').src("gen.php?text="+str); to $('#logo').attr("src", "gen.php?text="+str);.
try:
<script>
$(function(){
//reference the image
var img = $('#logo');
//use onkeyup instead of polling
$('input[name="letters"]').on('keyUp',function(){
//get the value every keystroke
var inputValue = $(this).val();
//apply the values to the image source
img.each(function(){
this.src = "gen.php?text="+inputValue;
});
});
});
</script>