Uploading an image and displaying it using a button - javascript

How can I display an image I uploaded immediately in HTML using button like a profile picture
Thank you
<div>
<img id="myImg" class="img img-circle" src="#" alt="your image"
height=200 width=100>
</div>
<input type='file' />
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
$('#yourImage').attr('src', e.target.result);
};

So you essentially want an image preview without a page reload? Here is some code that will do just that.
HTML:
<img id="myImg" alt="your image" class="img img-circle" style="visibility: hidden; display: none" height="200" width="100">
<input type="file" onchange="showimagepreview(this)" accept=".png,.jpg,.jpeg,.gif" />
JavaScript:
function showimagepreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById("myImg").setAttribute("src", e.target.result);
document.getElementById("myImg").style = "visibility: visible; display: inline";
}
reader.readAsDataURL(input.files[0]);
}
}

Your code already successfully displays the image preview. As far as I understand your question you intend to display the full image on button click.
You will need an image for that
<img id="yourImage">
on file upload you will need to store the src somewhere, for the sake of simplicity that will be a global variable here:
var src = "";
and then:
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
src = e.target.result;
};
and the button click:
$("#yourbutton").click(function() {
$("#yourImage").att("src", src);
});

So basically you want to use an image as a button.Here is the solution you are looking for
<button>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" id="dagger" />
</button>
$(function(){
$("#dagger").click(function(){
alert("click");
});
});

Related

upload image then make it movable and resizable

I'm trying to make an image uploader, and after the upload, make it movable and resizable. I have 2 scripts with jquery, I can upload an image, and move/resize an other one, but can't use it together.
uploader:
<div class="upload">
<input type='file' onchange="readURL(this);" /> <br>
</div>
<div class="block">
<div id="background">
<img id="bg" src="" alt="" width="auto" height="50%"/>
</div>
</div>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#bg')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
make another image resizable and movable:
$(document).ready(function () {
$(document).on('click', '.block-add', function () {
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
It works separately but if I want to make it to an uploaded image, the image just doesn't appear.
the operation you wanna do is a little bit confusing.
first of all, decide what you are gonna do? If it was me I would use libraries like Comman js or Pica resize image lib for production use in order to store it on back-end too.

jQuery file upload preview/remove image not working properly

You can find the working file at Jsfiddle
/* JavaScript */
function readURL() {
var $input = $(this);
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$input.next('.blah').attr('src', e.target.result).show();
$input.after('<input type="button" class="delbtn" value="remove">');
}
reader.readAsDataURL(this.files[0]);
}
}
$(".imgInp").change(readURL);
$("form").on('click', '.delbtn', function(e) {
var $input = $(this);
$input.next('.blah').attr('src', e.target.result).hide();
$input.prev('.imgInp').val("");
$(this).closest(".delbtn").remove();
});
<form name="" action="" method="post">
<div class="div">
<input type='file' class="imgInp blah" />
<img class="blah" src="#" alt="your image"/></div>
<br>
<br>
<div class="div">
<input type='file' class="imgInp" />
<img class="blah" src="#" alt="your image"/></div>
</form>
Display and remove image is working fine.
But if the image already selected and again select another new image then preview function is not working. Also remove button keep adding. Please check the error image below.
Click to view the error
I have updated your fiddle at following link,
https://jsfiddle.net/balasuar/97dzkf70/20/
When first time you select the image, the next element of the button is the image. But once the image selected, you added theRemove button element next to the file control. So the next time, it breaks as the image is no longer next to the file control.
I fixed it below by having a reset method to clear this.
function readURL() {
var $input = $(this);
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
reset($input.next('.delbtn'), true);
$input.next('.blah').attr('src', e.target.result).show();
$input.after('<input type="button" class="delbtn" value="remove">');
}
reader.readAsDataURL(this.files[0]);
}
}
$(".imgInp").change(readURL);
$("form").on('click', '.delbtn', function(e) {
reset($(this));
});
function reset(elm, prserveFileName){
if(elm && elm.length > 0) {
var $input = elm;
$input.next('.blah').attr('src', '').hide();
if(!prserveFileName){
$input.prev('.imgInp').val("");
}
elm.remove();
}
}

Apply Same JS Script to Several File Upload Fields

I have a form with 3 separate file-upload fields. I also have a JS script to show an image preview whenever a file is added. The script works great. My problem is, I want it to run on each of the 3 upload fields so they all have preview images. Obviously, don't want to write the same script 3 times, but not sure how to apply the same script to multiple input fields.
Here's my markup:
<div class="form_box_item">
<input type='file' id="input1" />
<p><img id="image1" src="#" height="60" width="80" alt="" /></p>
</div>
<div class="form_box_item">
<input type='file' id="input2" />
<p><img id="image2" src="#" height="60" width="80" alt="" /></p>
</div>
And here's the JS:
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image1').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#input1").change(function () {
readURL(this);
});
Here's my script running as a JS Fiddle
Thanks for your help!
Well, the first thing that I notice is that your target image has an id that's almost the same as the source input element - one just has to replace "input" with "image". I.e input1 -> image1, input2 -> image2
Next thing I notice, is that your reader.onload function currently targets a specific element - #image1. I also note that the input to the readURL function is the input element itself.
With these things in mind, we can change the onload function so that it:
gets the id of the element that triggered its call
replace "input" with "image" in this id string
use this computed id string to target the correct image.
Once implemented, a complete example appears thusly:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script>
function readURL(input)
{
if (input.files && input.files[0])
{
var reader = new FileReader();
reader.onload = function (e)
{
var imgId = input.id.replace("input", "image");
$("#"+imgId).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
window.addEventListener('load', myInit, false);
// target 2 input elements explicitly
//function myInit()
//{
// $("#input1").change( onFileInputChanged );
// $("#input2").change( onFileInputChanged );
//}
// target all inputs of type=file
function myInit()
{
$(':file').each(
function(){
$(this).change( onFileInputChanged )
}
);
}
function onFileInputChanged(evt)
{
readURL(this);
}
</script>
<style>
</style>
</head>
<body>
<div class="form_box_item">
<input type='file' id="input1" />
<p><img id="image1" src="#" height="60" width="80" alt="" /></p>
</div>
<div class="form_box_item">
<input type='file' id="input2" />
<p><img id="image2" src="#" height="60" width="80" alt="" /></p>
</div>
</body>
<html>
Fiddle: http://jsfiddle.net/hvmVJ/16/

How to show image while image select

I am using javascript code.this code show the image which image you select before uploading.
Javascript
<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);
});
</script>
Html
<form id="imageform" method="post" enctype="multipart/form-data" >
<input type="file" name="photoimg" id="imgInp" >
<img id="blah" src="#" alt="your image" />
<input type="submit" Value="Upload">
</form>
This piece of code work perfectly.SO i need normaly when image not select than image dispaly:none; and if image select than show image.i want to handle this problem with client side scripting.
Modify the markup so that the image is hidden by default:
<img id="blah" src="#" alt="your image" style="display:none" />
And then call the jQuery show method on the image when you have read the file like so:
$('#blah').attr('src', e.target.result);
$('#blah').show();
Fiddle is here
Try
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').prop('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
jQuery(function () {
$("#imgInp").change(function () {
readURL(this);
});
})
Demo: Fiddle

How to preview image before upload using memory stream

I need to preview the image before upload.I was able to pass the file path from view to controller,in the controller using memory stream class i am trying to preview the image before saving it to database.Could any one provide me any sample or example for this
Thanks!
<script type="text/javascript">
function readfile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#image_preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<form id="form1">
<input type='file' onchange="readfile(this);" />
<img id="image_preview" src="#" alt="your image" width="200" height="200"/>
</form>
I have created bin also, try using this link http://codebins.com/codes/home/4ldqpc4
Please check below urls
http://weblogs.asp.net/imranbaloch/archive/2010/04/03/image-preview-in-asp-net-mvc.aspx
image upload and preview in mvc 2

Categories

Resources