Displaying an image added via file upload using Javascript - javascript

Need to display an image added to the document via file upload, before sending it to the server.
Have the following markup:
<body>
<div id="image-container">
<h2>Image Chosen form the File System:</h2>
<!-- Chosen image is displayed here, in an image tag via Javascript -->
</div>
<label for="image-input">Select an Image from Your File System to Display Above</label>
<input id="image-input" type="file" />
<input type="submit" value="Display Image Chosen" />
</body>
The chosen image should be displayed in the div when the user clicks on the button.

DO SOMETHING LIKE THIS..
JS code below:
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);
});
and the associated HTML:
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
CHECK THIS FIDDLE http://jsfiddle.net/LvsYc/

You have to put a function that calls a javascript script to store the image first on the cache of your server. Then an onclick action will call the function that takes care of rendering your image will get the image from the cache and render it.

Related

How can I show image that is selected to upload by user [duplicate]

This question already has answers here:
Preview an image before it is uploaded
(29 answers)
Closed 3 years ago.
When the user is uploading an image file, I need to show the Image that the user wants to upload in the same form. How can I do that by using only javascript and css?
if you don't get what I meant here is an example go to page
in that page they have hidden the input and used the label for that input. but I have no idea on how to display that image there.
$("#fu_upload").change(function () {
var input = this;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#Img_preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
});
$('#btnClear').click(function()
{
$('#fu_upload').val(null);
$('#Img_preview').attr('src', "http://placehold.it/100x100");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<input type='file' id="fu_upload" />
<input type="button" value="clear" id="btnClear"/>
<br/>
<img id="Img_preview" src="http://placehold.it/100x100" alt="your image" />

Is it possible to show image in fancybox after upload and before submit

form.html
<input type="file" name="img" onchange="previewFile(this)" >
Preview
After It uploads I want to show it in fancybox on click of preview. I add fancybox on existing images but how to add on upload images?
For existing images I use and it works
$("a.fancybox").fancybox();
you can use img tag for the preview of the image
var previewFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
<input type="file" name="img" onchange="previewFile(event)" > <br>
<a class="fancybox"><img id="output" alt="Preview Image" width="300" height="300"/></a>

How can I pass an image that is uploaded by user to another div, when press a button?

In my code first div is for showing the image. Second div for uploading ani image and third div will show the preview. I want to display the uploaded image in the first div on button press.
<html>
<body>
<div id="imgspace1" class="container">
<!-- image preview div -->
<div id="image_preview1"><img id="previewing1" src="" /></div>
</div>
<!--image upload part-->
<div>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<input type='file' onchange="readURL(this);" />
</form>
</div>
<div id="image_edit" class="container">
<img id="image_preview" src="#" alt="Upload Image"/> </div>
<div>
<input id="confirm_button" type="button" value="Confirmn" onclick="('')"/>
</div>
</body>
</html>
If your prime concern is displaying a preview of the image you may use EZDZ
js library.Then you just have to add an image tag and import the .js and .css files and you will be able to see the preview and then upload it by ajax.
function readURL(input) {
if ( input.files && input.files[0] ) {
var FR= new FileReader();
FR.onload = function(e) {
$('#previewing1').attr( "src", e.target.result );
};
FR.readAsDataURL( input.files[0] );
}
}
This code will read the uploaded image in file element.
<script type="text/javascript">
$(document).ready(function(){
$("#confirm_button").click(function{
var preview = $('#image_preview').attr('src');
$("#previewing1").attr("src", preview);
});
});
</script>
You can copy the src of third div image to first div image. And confirm button will be . You can write this unction in javascript also with onclick event.

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 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