Have the followig questions and need answers regarding the following script that will Preview a Photo before upload. The script is from http://jsbin.com/uboqu3/edit#javascript,html
1) The script works for Firefox, no good for IE. How to make it works for IE?
2) It does not have a method to delete the photo. Needs something like a small image "X" installed on the Preview Photo, clicking this "X" will delete the photo. Can anyone supply this solution?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>
Demo
Tested on several browsers, Chrome, Fx, Safari 6 (could someone test 5?)
Works on my IE8 on XP without any changes in settings but as #Gunasekaran mentions later on this page you may need to
Open Tools->internet option-> security tab-> custom level - locate the setting "Include local directory path when uploading files to a server" and click on Enable.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
else {
var img = input.value;
$('#img_prev').attr('src',img).height(200);
}
$("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
$("#x").click(function() {
$("#img_prev").attr("src",blank);
$("#x").hide();
});
});
</script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
</style>
</head>
<body>
<section>
<input type='file' onchange="readURL(this);" /><br/>
<span id="previewPane">
<img id="img_prev" src="#" alt="your image" />
<span id="x">[X]</span>
</span>
</section>
</body>
</html>
Looks like this in IE8 on XP:
A newer method is createObjectURL which I have not implemented
Update You will need to add an onclick to clear the file input if you want to allow the user to select the same image twice (onchange does not trigger then)
HTML input file selection event not firing upon selecting the same file
This will not work on anything less that Internet Explorer 10 ... FileReader() support isn't introduced until IE10 .. it will work with Chrome 7 and Firefox 3.6
See the docs for support of FileReader or caniuse.com here
In reply to last response of #user1315468
IE8 needs a security settings change:
Open Tools->internet option-> security tab-> custom level
locate the setting "Include local directory path when uploading files to a server" and click on Enable.
After this change, you can reopen the browser with mplungjan's demo link.
Hope this helps.
**I have Pasted the complete working code for all browsers..
NOTE: sometimes Internet Explorer may block scripts,so inorder to view the image click on the prompt and "Allow blocked content".Below is the working code...**
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
</head>
<body>
<form name="form2">
<div>
<input type="file" name="myFile" id="myFile" onchange="readURL(this);"></input>
</div>
<div>
<img id="previewImg" src="#" />
</div>
</form>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#previewImg')
.attr('src', e.target.result)
.width(130);
}
reader.readAsDataURL(input.files[0]);
}else{
var filename = "";
filename = "file:\/\/"+input.value;
document.form2.previewImg.src=filename;
document.form2.previewImg.style.width="130px";
}
}
</script>
</body>
</html>
FileReader sounds great to read content of image or file.
But consider that file that you were reading was 20MB big, reading it as dataURL is going to create a JS object which is tat big. How do you avoid that ?
<img id="img1" alt="" runat="server"/>
<span id="x" ></span>
<asp:FileUpload runat="server" ID="FileUpload1" onchange="readURL(this)" />
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$("#imgRepresentImage").attr("src", e.target.result).width(200);
};
reader.readAsDataURL(input.files[0]);
} else {
var img = input.value;
$("#imgRepresentImage").attr("src", img).width(200);
}
$("#x").text('[X]');
}
$(document).ready(function () {
$("#x").click(function () {
$("#imgRepresentImage").attr("src", "").width(0);
$("#x").text('');
$("#representImageUpload").val('');
});
});
Worked for me :)
Related
I have a button called f1 and I want it to display the value of the image that the user puts when they select an image. For example, when you select an image it'll display on the screen but I also want it to display on the button with proper width and height attributes, how would I do that? I've tried the document.getElementById("f1").innerHTML = input.value; but that only displays the file path, not the actual image. I appreciate the help.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img')
.attr('src', e.target.result)
.width(250)
.height(200);
};
reader.readAsDataURL(input.files[0]);
const f1 = document.getElementById("f1").innerHTML = input.value;
}
}
#f1 {
width:50px;
height:40px;
}
#img {
position:relative;
left:275px;
top:200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Filter Image</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type='file' id="file" onchange="readURL(this);" accept="image/gif, image/jpeg, image/png">
<img id="img"/>
<button id = "f1"></button>
</body>
</html>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img')
.attr('src', e.target.result)
.width(50)
.height(50);
};
reader.readAsDataURL(input.files[0]);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Filter Image</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type='file' id="file" onchange="readURL(this);" accept="image/gif, image/jpeg, image/png">
<button id = "f1"><img id="img"/></button>
</body>
</html>
I am trying to create a form for uploading an image and displaying a small preview of the image after selecting it. The preview is failing to display.
HTML code:
<label for="">Image</label>
<input type="file" class="form-control" name="image" id="img">
<img src="#" id="imgPreview" alt="">
JS code:
function readURL(input) {
if(input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$("#imgPreview").attr('src', e.target.result).width(100).height(100);
}
reader.readAsDataURL(input.files[0]);
}
$("#img").change(function() {
readURL(this);
});
}
Your change function on #img is never called because it inside your readURL function. You just need to put change function outside and everything good to go.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$("#imgPreview")
.attr("src", e.target.result)
.width(100)
.height(100);
};
reader.readAsDataURL(input.files[0]);
}
}
$("#img").change(function() {
readURL(this);
});
Working demo here
You need to put change event of #img in the page init.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<label for="">Image</label>
<input type="file" class="form-control" name="image" id="img">
<img src="#" id="imgPreview" alt="">
<script>
$(function () {
$('#img').change(function () {
readURL(this);
});
})
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$("#imgPreview").attr('src', e.target.result).width(100).height(100);
}
reader.readAsDataURL(input.files[0]);
}
}
</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 using html2canvas libary. The code takes a div and save its content as png. It works fine with opera and chrome but while i run the code in firefox it does not save the div as png. No action happens on clicking the download button in firefox.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>
</head>
<body>
<div id="html-content-holder">
Div part to save as png
</div>
<input id="btn-Convert-Html2Image" type="button" value="Download" />
<script>
$('#btn-Convert-Html2Image').click(function() {
html2canvas($('#html-content-holder'), {
onrendered: function(canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/png")
a.download = 'somefilename.png';
a.click();
}
});
});
</script>
</body>
</html>
Keep an hidden anchor element in the DOM and update the href property of the element inside onrendered handler.
$('#btn-Convert-Html2Image').click(function() {
html2canvas($('#html-content-holder'), {
onrendered: function(canvas) {
var a = $('#download').get(0);
a.href = canvas.toDataURL("image/png")
a.download = 'somefilename.png';
a.click();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>
<div id="html-content-holder">
Div part to save as png
</div>
<input id="btn-Convert-Html2Image" type="button" value="Download" />
<a href="" id='download'></a>
Fiddle Demo
You need to append the anchor element to the body in Firefox.
html2canvas($('#html-content-holder'), {
onrendered: function(canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/png")
a.download = 'somefilename.png';
document.body.appendChild(a);
a.click();
}
});
Am using Asp.Net 2.0, am trying drag and drop files using asp.net.
for this process am using following js's
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/modernizr-2.5.3.js" type="text/javascript"></script>
that's why the error comes like this
JavaScript runtime error: Object doesn't support property or method 'addEventListener
am using IE11
so i was used one code
<meta http-equiv="X-UA-Compatible" content="IE=edge;" />
it is not working
and my script is
<script type="text/javascript" language="javascript">
var selectedFiles;
$(document).ready(function () {
alert("");
if (!Modernizr.draganddrop) {
//alert("2");
alert("This browser doesn't support File API and Drag & Drop features of HTML5!");
return;
}
var box;
box = document.getElementById("box");
alert(box);
box.addEventListener("dragenter", OnDragEnter, false);
box.addEventListener("dragover", OnDragOver, false);
box.addEventListener("drop", OnDrop, false);
$("#upload").click(function () {
var data = new FormData();
for (var i = 0; i < selectedFiles.length; i++) {
data.append(selectedFiles[i].name, selectedFiles[i]);
}
$.ajax({
type: "POST",
url: "FileHandler.ashx",
contentType: false,
processData: false,
data: data,
success: function (result) {
alert(result);
},
error: function () {
alert("There was error uploading files!");
}
});
});
});;
function OnDragEnter(e) {
e.stopPropagation();
e.preventDefault();
}
function OnDragOver(e) {
e.stopPropagation();
e.preventDefault();
}
function OnDrop(e) {
e.stopPropagation();
e.preventDefault();
selectedFiles = e.dataTransfer.files;
$("#box").text(selectedFiles.length + " file(s) selected for uploading!");
}
</script>
and my aspx page is
<body>
<form id="form1" runat="server">
<center>
<div id="box">Drag & Drop files from your machine on this box.</div>
<br />
<input id="upload" type="button" value="Upload Selected Files" />
</center>
</form>
But this application drag and drop files is working fine in chrome and firefox
only problem in IE
Suggest me to get a solution.
Thanks in advance.
take out ie11 from your met tag, and instead add the following code. This is explained here.
/* IE11 Fix for SP2010 */
if (typeof UserAgentInfo.strBrowser !== 'undefined' && !window.addEventListener) {
UserAgentInfo.strBrowser=1;
}
What's your document mode set to in IE?
Press F12 and you should see a dropdown with a number or the word edge, make sure it's set to edge. Even though you're using the meta tag to set the document mode if you previously had it set to anything else it will override that.
Edit the plunkr to see where it fails - I don't have jQuery 1.7.2 to hand...but tested in internet explorer 11 and can't see that error. I'm using the click event as it is an easier event to generate in the browser and it is the addEventListener method that is throwing.
http://embed.plnkr.co/Smm421v5In2YYJAJXNTW/preview
<!DOCTYPE html>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge;" />
<head>
<meta charset="utf-8" />
<title></title>
<link data-require="bootstrap-css#3.0.0-rc2" data-semver="3.0.0-rc2" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#3.0.0-rc2" data-semver="3.0.0-rc2" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="box" style="height: 100px; background-color: red">Click area</div>
</body>
</html>
...and in the script...
'use strict';
/* global $ */
console.log("Hey!");
$(document).ready(function() {
var box;
box = document.getElementById("box");
console.log(box);
box.addEventListener("click", OnClick, false);
});
var OnClick = function() {
console.log('in OnClick');
$("#box").text("Clicked");
};
This is due to compatibility issue add below in the web.config file
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=EmulateIE9" />
</customHeaders>
</httpProtocol>
</system.webServer>