function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#documentUpload')
.attr('src', e.target.result)
};
reader.readAsDataURL(input.files[0]);
}
}
<html>
<head></head>
<body>
<ul>
<li>
<input type='file' onchange="readURL(this);" />
<img id="documentUpload" src="#" alt="first image" />
</li>
<li>
<input type='file' onchange="readURL(this);" />
<img id="documentUpload" src="#" alt="second image" />
</li>
</ul>
</body>
</html>
> Blockquote
" In example , click on any choose image button but image will be displayed in first case only . I changed the id in both case and in javascript as well but it didnt work.
code above is solution to how to display image in html "
The problem is ID require be unique. In this example, I add an attribute called document-up, and it works. It's possible in this case select more than one element using attributes or classes.
function readURL(input,option) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
if (option == 1){
$("#documentUpload1")
.attr('src', e.target.result)
} else {
$("#documentUpload2")
.attr('src', e.target.result)
}
};
reader.readAsDataURL(input.files[0]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<ul>
<li>
<input id="input1" type='file' onchange="readURL(this,1);" />
<img id="documentUpload1" document-up src="#" alt="first image" />
</li>
<li>
<input id="input2" type='file' onchange="readURL(this,2);" />
<img id="documentUpload2" document-up src="#" alt="second image" />
</li>
</ul>
</body>
</html>
Here's an approach that will work for an arbitrary number of images and an arbitrary number of images per file-picker.
All you need to is wrap the #previewHolder div with a form and handle its submission.
function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}
function allByTag(tag,parent){return (parent == undefined ? document : parent).getElementsByTagName(tag)}
// useful for HtmlCollection, NodeList, String types
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need
// callback gets data via the .target.result field of the param passed to it.
function loadFileObject(fileObj, loadedCallback){var a = new FileReader();a.onload = loadedCallback;a.readAsDataURL( fileObj );}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
byId('addBtn').addEventListener('click', onAddBtnClicked, false);
}
/* html below function needs to create - we dont bother with the img here, since we create as needed when file/s picked */
/*
<div class='item'>
<img height='100px' width='100px'/><br>
<input type='file'/>
</div>
*/
function onAddBtnClicked(evt)
{
var wrapper = newEl('div');
wrapper.className = 'item';
// var img = newEl('img');
// img.style.height = '100px';
// wrapper.appendChild(img);
var input = newEl('input')
input.type = 'file';
// input.multiple = 'true'; // file-inputs are single-selection only be default.
input.addEventListener('change', onFileChanged, false);
input.name = 'inputFiles[]'; // all inputs to get same name. Name to include [] so php can retrieve all files
wrapper.appendChild(input);
byId('previewHolder').appendChild(wrapper);
}
function onFileChanged(evt)
{
var numFiles = this.files.length;
var itemWrapper = this.parentNode;
var fileInput = this;
if (numFiles == 0)
{
// no files chosen, so remove this preview/file-picker element
var previewHolder = itemWrapper.parentNode;
previewHolder.removeChild(itemWrapper);
}
else
{
// remove all/any existing images
while (allByTag('img', itemWrapper).length != 0)
itemWrapper.removeChild( allByTag('img', itemWrapper)[0] );
forEach(this.files, loadAndPreviewImage);
function loadAndPreviewImage(fileObj)
{
loadFileObject(fileObj, onFileObjLoaded);
function onFileObjLoaded(evt) //.target.result;
{
var img = newEl('img');
img.style.height = '100px';
img.src = evt.target.result;
itemWrapper.insertBefore(img, fileInput);
}
}
}
}
.item
{
border: solid 1px black;
border-radius: 6px;
padding: 4px;
}
.button:hover
{
background-color: #b0ffb0;
cursor: pointer;
}
<div id='previewHolder' style='width: 200px'>
<div class='button' id='addBtn' style='text-align:center;padding: 4px'><svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 32 32">
<g transform="translate(0 -1020)" stroke="#00c03b" fill="none">
<circle cx="16" cy="1036" r="14.5" stroke-width="2.998"/>
<path d="m8 1036h16" stroke-linecap="round" stroke-width="3"/>
<path d="m16 1044v-16" stroke-linecap="round" stroke-width="3"/>
</g>
</svg></div>
</div>
Related
So I'm trying to implement a preview button so that when my users clicks on the upload button image they could have a preview but the thing is that it is not working, I wonder why ?? A brief description : I have a js function that creates new elements and append it to a p tag date. It is in this function that is going to create the preview image code
// code for creating new elements
function createElements(){
const userQuestions = document.querySelector('#userQuestions');
userQuestions.insertAdjacentHTML(
'beforeend', '<div class="uploader" onclick="$(\'#filePhoto\').click()"><p id="bg-text">No image</p></div><input type="file" name="userprofile_picture" id="filePhoto" style="display:block;width:185px;" /></center><div class="grid-container">'
);
}
///Code to preview image
function handleImage(e) {
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
var reader = new FileReader();
reader.onload = function (event) {
$('.uploader').html( '<img width="300px" height="350px" src="'+event.target.result+'"/>' );
}
reader.readAsDataURL(e.target.files[0]);
}
.uploader {width:50%;height:35%;background:#f3f3f3;border:2px dashed #0091ea;}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="userQuestions"></div>
<button type="button" onclick="createElements()">add elements</button>
</body>
</html>
If you run the snippet above you can see that the button is woeking but the preview is not showing. Could someone help me?
HTML:
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label>Company Logo</label>
<input type="file" class="form-control" value="" name="companyLogo" id="companyLogo" accept="image/*" />
</div>
</div>
<div id="displayImage">
<img id="imgData" src="#" alt="your image" height="150px" width="150px" />
</div>
</div>
JavaScript:
$("#companyLogo").change(function(e) {
if(e.target.value === "") {
$("#displayImage").hide();
} else {
$("#displayImage").show();
}
readURL(this);
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$("#imgData").attr("src", e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
Short n simple
No need to create an element on click.
Just add an image tag and set a default image like no image selected or something like that.
The following code will help you
<input type="file" name="myCutomfile" id="myCutomfile"/>
<img id="customTargetImg" src="default.jpg" width="400" height="250">
$("#myCutomfile").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#customTargetImg').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
Take advantage of jQuery -- particularly using
event handlers
delegated event handlers for dynamically-created elements
tree traversal methods.
$(function() {
var userQuestions = $('#userQuestions');
// create onclick event handler for your button
$('#addElements').click(function() {
// IDs must be unique - since you can have an arbitrary number of filePhoto, use a class instead
userQuestions.append(
'<div class="uploader"><p id="bg-text">No image</p></div><input type="file" name="userprofile_picture" class="filePhoto" /><div class="grid-container"></div>'
);
});
// create delegated onclick event handler for your .uploader
userQuestions.on('click', '.uploader', function() {
// you only want to target the file input immediately after it
$(this).next('[type=file]').click();
});
// create delegated onchange event handler for your .filePhoto
userQuestions.on('change', '.filePhoto', function() {
// find related uploader
var uploader = $(this).prev('.uploader');
// check file was given
if (this.files && this.files.length) {
var reader = new FileReader();
reader.onload = function(event) {
uploader.html('<img width="300px" height="350px" src="' + event.target.result + '"/>');
}
reader.readAsDataURL(this.files[0]);
}
});
});
.uploader {
width: 50%;
height: 35%;
background: #f3f3f3;
border: 2px dashed #0091ea;
}
.filePhoto {
display: block;
width: 185px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="userQuestions"></div>
<!-- added ID attribute -->
<button type="button" id="addElements">add elements</button>
</body>
</html>
Edit
This answer is a non-jQuery solution based off your comment.
// code for creating new elements
function createElements() {
// no need to document.querySelector if the selector is an ID
const userQuestions = document.getElementById('userQuestions');
// you want to use onclick/onchange attributes here as they are dynamically created
userQuestions.insertAdjacentHTML(
'beforeend', '<div class="uploader" onclick="selectFile(this)"><p id="bg-text">No image</p></div><input type="file" name="userprofile_picture" onchange="handleImage(this)" />'
);
}
// trigger click on file input that follows the uploader
function selectFile(uploader) {
uploader.nextSibling.click();
}
///Code to preview image
function handleImage(input) {
if (input.files.length) {
var reader = new FileReader();
reader.onload = function(e) {
input.previousSibling.innerHTML =
'<img width="300px" height="350px" src="' + e.target.result + '"/>';
}
reader.readAsDataURL(input.files[0]);
}
}
.uploader {
width: 50%;
height: 35%;
background: #f3f3f3;
border: 2px dashed #0091ea;
}
.filePhoto {
display: block;
width: 185px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="userQuestions"></div>
<button type="button" onclick="createElements()">add elements</button>
</body>
</html>
I have here 3 div from my drag and drop image file, the file names are array and i calling it using the class then i loop it. My problem is when i try to put image file in specific div, one of those 3 div, it duplicates the image to all of the remaining div. How do i prevent this and allow me to put image only in my chosen div?
Here is my code https://jsfiddle.net/qm9nkco7/2/
Html
<div class="sideBar_paddIT">
<input type="file" name="file_name[]" class="file_class" id="file_id0">
<div class="drag_here">
<div class="drag_me" id="drag_me_id">
<img class="img_here" src="" width="100%" >
<center class="center_html">
Click or Drag image here
</center>
</div>
</div>
</div>
<div class="sideBar_paddIT">
<input type="file" name="file_name[]" class="file_class" id="file_id0">
<div class="drag_here">
<div class="drag_me" id="drag_me_id">
<img class="img_here" src="" width="100%" >
<center class="center_html">
Click or Drag image here
</center>
</div>
</div>
</div>
<div class="sideBar_paddIT">
<input type="file" name="file_name[]" class="file_class" id="file_id0">
<div class="drag_here">
<div class="drag_me" id="drag_me_id">
<img class="img_here" src="" width="100%" >
<center class="center_html">
Click or Drag image here
</center>
</div>
</div>
</div>
JS
$(document).on('click','.drag_me', function(){
$('.file_class').trigger('click');
});
var imageLoader = document.getElementsByName('file_name[]');
for(var i= 0; i < imageLoader.length; i++){
imageLoader[i].addEventListener('change', handleImage, false);
}
function handleImage(e) {
e.stopPropagation();
e.preventDefault();
if(e.target.files.length === 0){
return false;
}
var reader = new FileReader();
reader.onload = function (event) {
$('.drag_me .img_here').attr('src',event.target.result);
}
var taste_it = e.target.files[0];
var file_name = taste_it.name;
var file_size = taste_it.size;
var file_type = taste_it.type;
if(!check(file_type)){
$('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
$('#palitan_ng_text').html('Invalid file format');
return false;
}
if(file_size > 1500000){
$('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
$('#palitan_ng_text').html('File size too large');
$('.file_class').val(''); // <-- kaya d nag aalert dahil may laman,
return false;
}else{
reader.readAsDataURL(e.target.files[0]);
$('.center_html').hide();
$('.image_name').html(file_name).css({'font-size' : '14px', 'color' : 'black'});
}
}
var obj = $('.drag_me');
obj.on('dragover', function(e){
e.stopPropagation();
e.preventDefault();
$(this).css('border', '2px solid #39ADCD');
});
obj.on('drop', function(e){
e.stopPropagation();
e.preventDefault();
$(this).css('border', '2px dotted #39ADCD');
var files = e.originalEvent.dataTransfer.files;
var file = files[0];
var file_name = file.name;
var file_size = file.size;
var file_type = file.type;
if(!check(file_type)){
$('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
$('#palitan_ng_text').html('Ivalid file format');
return false;
}
if(file_size > 1500000){
$('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
$('#palitan_ng_text').html('File size too large');
return false;
}else{
for(var i = 0; i<imageLoader.length; i++){
imageLoader[i].files = files;
}
$('.center_html').html(file_name).css({'font-size' : '14px', 'color' : 'black'});
}
});
function check(image){
switch(image){
case 'image/jpeg':
return 1;
case 'image/jpg':
return 1;
case 'image/png':
return 1;
case 'image/gif':
return 1;
default:
return 0;
}
}
Anyone can help me
Don't use identical ids for multiple elements
The <center> tag is deprecated. Use style="text-align: center;", preferably in a class.
Now onto your actual problem, which comprises of two parts:
$('.drag_me .img_here').attr('src', event.target.result);
This line assigns event.target.result to the src attribute of every .drag_me .img_here element.
$(document).on('click','.drag_me', function(){
$('.file_class').trigger('click');
});
This causes a click on any .drag_me element to trigger clicks on every .file_class element.
Both of these issues can be solved by not using identical ids for different elements, then referencing those ids to specify an individual element to target:
HTML: Notice the new ids of the .drag_me and .file_class elements
<div class="sideBar_paddIT">
<input type="file" name="file_name[]" class="file_class" id="file_id_0">
<div class="drag_here">
<div class="drag_me" id="drag_me_id_0">
<img class="img_here" src="" width="100%">
<center class="center_html">
Click or Drag image here
</center>
</div>
</div>
</div>
<div class="sideBar_paddIT">
<input type="file" name="file_name[]" class="file_class" id="file_id_1">
<div class="drag_here">
<div class="drag_me" id="drag_me_id_1">
<img class="img_here" src="" width="100%">
<center class="center_html">
Click or Drag image here
</center>
</div>
</div>
</div>
<div class="sideBar_paddIT">
<input type="file" name="file_name[]" class="file_class" id="file_id_2">
<div class="drag_here">
<div class="drag_me" id="drag_me_id_2">
<img class="img_here" src="" width="100%">
<center class="center_html">
Click or Drag image here
</center>
</div>
</div>
</div>
JavaScript: See the comments /**** ... ****/
$(document).on('click', '.drag_me', function(ev) {
/**** Get the specific element using the number in the id attribute ****/
var idNum = $(this).attr('id').split('_')[3];
$('.file_class').eq(idNum).trigger('click');
});
var imageLoader = document.getElementsByName('file_name[]');
for (var i = 0; i < imageLoader.length; i++) {
imageLoader[i].addEventListener('change', handleImage, false);
}
function handleImage(e) {
e.stopPropagation();
e.preventDefault();
/**** Get the current input field by using the number in the id attribute ****/
var currentInput = e.target.id.split('_')[2];
if (e.target.files.length === 0) {
return false;
}
var reader = new FileReader();
reader.onload = function(event) {
/**** Use the current input field instead of all the input fields ****/
$('#drag_me_id_' + currentInput + ' .img_here').attr('src', event.target.result);
}
var taste_it = e.target.files[0];
var file_name = taste_it.name;
var file_size = taste_it.size;
var file_type = taste_it.type;
if (!check(file_type)) {
$('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
$('#palitan_ng_text').html('Invalid file format');
return false;
}
if (file_size > 1500000) {
$('.trigger_danger_alert_changable').show().delay(5000).fadeOut();
$('#palitan_ng_text').html('File size too large');
$('.file_class').val(''); // <-- kaya d nag aalert dahil may laman,
return false;
} else {
reader.readAsDataURL(e.target.files[0]);
$('.center_html').hide();
$('.image_name').html(file_name).css({
'font-size': '14px',
'color': 'black'
});
}
}
/** Rest of the code is unchanged **/
See New Fiddle Here
I want to make this Javascript code to when I click "remove image" link , it remove the image. Please help me.
<script>
function previewFile(){
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
previewFile();
</script>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
remove image
</body>
</html>
<img id='image' src="" height="200" alt="Image preview...">
<a id='remove' href="#">remove image </a>
<script>
$(function rmv() {
$('#remove').click(function() {
$('#image').remove();
}
});
</script>
If you cannot add id attribute to that img, you can remove it like this with raw javascript - it assumes the image is preceding the anchor tag directly, allowing for only one text node between them:
function removeImage(el){
if(!el.previousSibling.tagName){//if it is textnode like newline etc. we go one back
var el = el.previousSibling;
}
if(el.previousSibling.tagName && el.previousSibling.tagName=='IMG'){
el.previousSibling.remove();
}
}
<img src="" height="200" alt="Image preview...">
remove image
Keep img element in div and assign id to both this element
<input type="file" onchange="previewFile()"><br>
<div id="imgDiv"> <img id="image1" src="" height="200" alt="Image preview..."></div>
remove image
</body>
</html>
<script>
function previewFile() {
var d = document.getElementById('imgDiv');
var olddiv = document.getElementById("image1");
d.removeChild(olddiv);
}
</script>
<img src="" id="image" height="200" alt="Image preview...">
remove image
JS:
function foo(){
var image = document.getElementById("image");
if (image != null)
{
image.parentNode.removeChild(image);
}
}
I want to do is make a default image to the img tag if the user has not choose a profile picture on his account.
current output:http://jsfiddle.net/LvsYc/2973/
http://s38.photobucket.com/user/eloginko/media/profile_male_large_zpseedb2954.jpg.html
script:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
Here's a fiddle showing what was mentioned in the comments:
HTML
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<div class="img">
<img id="blah" src="#" alt="your image" />
</div>
</form>
CSS
img {
width: 120px;
height: 120px;
}
img[src="#"] {
display: none;
}
.img {
background: url('http://i38.photobucket.com/albums/e149/eloginko/profile_male_large_zpseedb2954.jpg');
background-position: -20px -10px;
width: 120px;
height: 120px;
display: inline-block;
}
The javascript is the same.
I wrote a quick little script to somewhat handle this:
JSFiddle: http://jsfiddle.net/LvsYc/3102/
$(function () {
var loader = 'http://i38.photobucket.com/albums/e149/eloginko/profile_male_large_zpseedb2954.jpg';
$('img[data-src]:not([src])').each(function () {
var $img = $(this).attr('src', loader),
src = $img.data('src'),
$clone = $img.clone().attr('src', src);
$clone.on('load', function () {
$img.attr('src', src);
});
});
});
Basically, here's what happens:
On load, iterate through all image tags that have a data-src but no src set.
Clone the img tag and set its src to the data-src.
Once the cloned img has loaded, set the original img tag's src to the data-src.
There are tons of ways to handle this scenario, and I'm sure there are better ones out there than this, but this should do the trick.
Handle the onError event for the image to reassign its source using JavaScript:
function imgError(image) {
image.onerror = "";
image.src = "/images/noimage.gif";
return true;
}
<img src="image.png" onerror="imgError(this);"/>
Or without a JavaScript function:
<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />
I'm using Prototype here and would like to build a simple toggler that toggles an iframe which contains the page the toggler is on to maximize to the browsers full size or minimize to its original size. Any ideas?
This works for me in IE7 & FF3.6 (only available at work).
function getDocWidth() {
var D = document;
return Math.max(
Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
Math.max(D.body.clientWidth, D.documentElement.clientWidth)
);
}
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
var isFullScreen = false;
var orgDimensions = new Array();
function toggleFullScreen() {
ifr = document.getElementById("iFrameWin");
if (!isFullScreen) {
orgDimensions[0] = ifr.style.width;
orgDimensions[1] = ifr.style.height;
ifr.style.width = getDocWidth() + "px";
ifr.style.height = getDocHeight() + "px";
}
else {
ifr.style.width = orgDimensions[0];
ifr.style.height = orgDimensions[1];
}
isFullScreen = !isFullScreen;
}
Where th iframe is:
<iframe id="iFrameWin" src="http://www.google.se" width="400" height="300"/>
This ofcourse needs for you to set the padding and margin to the containing page to 0 in wich case you would need to toggle from inside the iframe, calling parent.toggleFullScreen() I think.
Hope it was what you were looking for!
P.S
kudos to James Padolsey for the getDocHeight() function
**//here is the script**
<script src="Scripts/Jquery.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function ($) {
$('#min1').click(function () {
var iframeheight = $('#iframe1').width();
if (iframeheight == 934) {
$('#iframe1').width(462);
document.getElementById('divFrame2').style.display = "block";
}
});
$('#max1').click(function () {
var iframeheight = $('#iframe1').width();
if (iframeheight == 462) {
$('#iframe1').width(934);
document.getElementById('divFrame2').style.display = "none";
}
});
$('#min2').click(function () {
var iframeheight = $('#iframe2').width();
if (iframeheight == 934) {
$('#iframe2').width(462);
document.getElementById('divFrame1').style.display = "block";
}
});
$('#max2').click(function () {
var iframeheight = $('#iframe2').width();
if (iframeheight == 462) {
$('#iframe2').width(934);
document.getElementById('divFrame1').style.display = "none";
}
});
});
</script>
**//style**
<style type="text/css">
.bdr
{
border: 1px solid #6593cf;
}
</style>
**//aspx sample**
<form id="form1" runat="server">
<table><tr><td >
<div id="divFrame1" class="bdr">
<div>
<img id="min1" src="Images/Minimize.jpg" width="13" height="14" border="0" alt="" />
<img id="max1" src="Images/Maximize.jpg" name="Image6" width="13" height="14" border="0"
id="Image6" alt="" />
</div>
<iframe name="content" id="iframe1" src="http://www.dynamicdrive.com/forums/archive/index.php/t-2529.html"
frameborder="0" height="321" width="462"></iframe>
</div>
</td ><td >
<div id="divFrame2" class="bdr">
<div>
<img id="min2" src="Images/Minimize.jpg" width="13" height="14" border="0" alt="" />
<img id="max2" src="Images/Maximize.jpg" name="Image6" width="13" height="14" border="0"
id="Image7" alt="">
</div>
<iframe name="content" id="iframe2" src="http://www.w3schools.com/default.asp" frameborder="0"
height="321" width="462"></iframe>
</div>
</td></tr></table>
</form>