How to browse the img src javascript - javascript

Here is what i need to do.
So i have this code
<input type="file" id="uploadImage" name="image" />
<input type="submit" id="ImageName" name="submit" value="Submit">
So when i click the "Choose.." button to browse an image, i want the path of that image to be saved in a variable.
Or basically what i need to do is to make this path to be src of an image.
$('#Imageholder').append('<img src="" class="ImgCoords" >');
Any ideas?
Sorry if the explanation is bad :

Here is an example that i have made , adapt it to your need :
DEMO HERE
I added a button remove uploaded file,if you don't like show/hide effect just delete slow , Image is shown only on upload:
$('#blah').hide();
$('#remove').hide();
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(){
if( $('#imgInp').val()!=""){
$('#remove').show();
$('#blah').show('slow');
}
else{ $('#remove').hide();$('#blah').hide('slow');}
readURL(this);
});
$('#remove').click(function(){
$('#imgInp').val('');
$(this).hide();
$('#blah').hide('slow');
$('#blah').attr('src','http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/No_pub.svg/150px-No_pub.svg.png');
});
HTML Code:
<form id="form1">
<input type='file' id="imgInp" name='image'/>
<img id="blah" src="#" alt="your image" />
</form>

If you are using HTML5,you can.
See here for the File API. by W3C
The below key line from API
var file = document.getElementById('file').files[0];
But if you are not using HTML5
For security reasons you cannot do that.html doesn't have access to file system information.
MIght be useful :Preview an image before it is uploaded

Related

Html use file from user and set as background?

I have this code for choosing a file in HTML, and I want to allow the user to choose a file, and then be able to set it as the background. Heres the code for choosing the file
<form id="form1" name="form1" enctype="multipart/form-data">
<input type="file" id="file1" name="file1" accept="image/*" capture="camera">
<br>
<input type="button" value="Save" onclick="sendFile();" />
</form>
Or is there a way I could access the camera of the user in HTML? Basically, I want the user to be able to choose an image or take an image, and then set the image as the background.
Yes we can take advantage the browser's FileReader API to read files and use the file on client side
Below is a typical example of using the FileReader API for your use case:
function sendFile() {
// IN YOUR ACTUAL CODE REPLACE DEMODIV WITH
// document.body or the body of your html
const demoDiv = document.querySelector('#demo');
const file = document.querySelector('#file1').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// setting image file convert to base64 string as demoDiv's background
demoDiv.style.backgroundImage = `url(${reader.result})`;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
#demo {
width: 100%;
height: 400px;
}
<form id="form1" name="form1" enctype="multipart/form-data">
<input type="file" id="file1" name="file1" accept="image/*" capture="camera">
<br>
<input type="button" value="Save" onclick="sendFile();" />
</form>
<div id="demo"></div>
Reference: reader.readFileAsDataUrl

Removing uploaded Image

I can upload an image and preview it using the following HTML code and function. But after I select the image and preview it, I don't want to actually upload the image, I want to reset the entire form.
How can I just remove the uploaded image?
HTML:
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="newstatus" runat="server">
<input type="file" id="imgInp" style="margin-top: 4px;" />
<img id="status-img" src="#" alt="" width="150" height="150" />
<input type="submit" name="post" value="Post" class="post-btn" id="submit" />
</div>
</form>
Javascript:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#status-img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
Please help me guys!
Subham, the JS code you are using is not upload your image to server. It just convert your selected image into BASE64 and show it on an image tag. If you want to remove that image from preview, just reset the src tag of image like:
$('#status-img').attr('src', '');
or
$('#status-img').removeAttr('src');
And to remove the selected image from input type image:
$('#imgInp').val('');

How to get the local image path when browse the image in jquery/Javascript

Is it possible to get the image path from where it is selected in jquery before upload to a particular folder.
Try utilizing change event , URL.createObjectURL with this.files[0] as argument
$("input[type=file]").on("change", function() {
$("[for=file]").html(this.files[0].name);
$("#preview").attr("src", URL.createObjectURL(this.files[0]));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input id="file" type="file" accepts="image/*" /><br />
<label for="file"></label><br />
<img id="preview" />

Jquery: How to dynamically SHOW image using the "value" of <input type="file"> Field

I was wondering whether there is a way to dynamically display an image that a user just uploaded to the input type="file" field.
For example, so far I have the following code:
image_upload.html
<form id ="image_upload_form" action="" method="post" enctype="multipart/form-data">
<input id ="id_iamge" type="file" name="image" />
<input type="submit" value="Upload" />
</form>
<div id="image_view">
<img id="uploaded_image">
</div>
upload.js
$(document).ready(function() {
$("#id_image").change(file_select);
});
function file_select(event) {
$("#uploaded_image").attr("src", $("#id_image").val());
}
So I basically want to show the image that the user just uploaded on the Field.
Of course, I know I can easily view the image if the user already SUBMITTED the form, and when the image is already inside my Database server.
However, I want to preview the image BEFORE the image is submitted into the database server.
In order to do this, I guess I have to find out the PATH of the Image in the Uploader's own computer and then set that "Local path" as the "src" of the image.
Is there a way to fetch this LOCAL PATH of the image that the user just submitted?
(My Javascript code above obviously didn't work, since it just sets the NAME of the image file, not the absolute Path, as the "src". For example, when I run that code and upload an image, I get this:
The Result:
<img id="uploaded_image" src="random_image.jpg" />
which doesn't show anything.
Take a look at this sample, this should work: http://jsfiddle.net/LvsYc/
HTML:
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
JS:
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);
});
Use this code. It will work:
<!-- Java script code, use jquery library. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
function showimagepreview(input)
{
if (input.files && input.files[0])
{
var filerdr = new FileReader();
filerdr.onload = function(e) {
$('#imgDisplayarea').attr('src', e.target.result);
};
filerdr.readAsDataURL(input.files[0]);
}
}
</script>
<!-- HTML -->
<form>
<div>
<input type="file" name="imgShow" id="imgShow" onchange="imagePreview(this)" />
</div>
<img id="imgDisplayarea"/>
</form>

JCrop will not work in my JavaScript code

Ok so the JCrop bit of code below doesn't work.
The visitor uses the file input element to select an image on their computer which is then shown in an img tag before it is uploaded. The visitor then uses JCrop to select what part of the image they want to upload. Once uploaded I will use a servlet to crop and save the image in a database.
Any ideas anyone? Thanks
JavaScript in header:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="tapmodo-Jcrop-5e58bc9/js/jquery.Jcrop.js"></script>
<link href="tapmodo-Jcrop-5e58bc9/css/jquery.Jcrop.css" rel="stylesheet" type="text/css"/>
<script>
<!--
$(document).ready(function () {
$("#previewInput").change(function(e) {
var file = e.originalEvent.srcElement.files[0];
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
img.id = 'previewimg';
reader.readAsDataURL(file);
$("#preview").html('Please crop your image below:<br />');
$("#preview").append(img);
setTimeout(1250);
$('#previewimg').Jcrop({
aspectRatio: 1,
onChange: setCoords,
onSelect: setCoords
});
});
});
function setCoords(c)
{
$('input[name=x1]').val(c.x);
$('input[name=y1]').val(c.y);
$('input[name=x2]').val(c.x2);
$('input[name=y2]').val(c.y2);
};
-->
</script>
HTML in body:
<h1>Thanks for registering!</h1>
Upload a display picture:<br />
<div id="upload">
<form action="crop" method="post" enctype="multipart/form-data" >
<input id="previewInput" type="file" name="image"/><br />
<input type="hidden" name="x1" value=""/>
<input type="hidden" name="y1" value=""/>
<input type="hidden" name="x2" value=""/>
<input type="hidden" name="y2" value=""/>
<input type="submit" name="submit" value="Upload and crop image"/><br />
</form>
<div id="preview"></div>
</div>
Or click here to view your account and keep the default image<br />
I am the author of Jcrop. I think the problem may be that your element is not inserted into the DOM yet. It usually needs to be there for Jcrop to figure out the size. Once you do so, in your code above, you might also try using $(img) instead of selecting by the ID. Sometimes when you insert an element it takes a tiny amount of time for the DOM to respond, so trying to select it immediately after sometimes causes problems. Again, I'm not completely sure if these are the problems you're having, but that's my initial reaction.

Categories

Resources