Develop Reference

javascript table tag crush the jquery next function

I want to create a js code to preview image of each input file after I insert image my problem is if I don't use input and image inside table it's work but if I use input and image inside table will not work
my HTML code is
<table style="width:100%">
<tr>
<td>
<input type="file" class="img-control" />
</td>
<td>
<img class="img-preview" src="#" />
</td>
</tr>
</table>
<br><br>
<input type="file" class="img-control" />
<img class="img-preview" src="#" />
<br><br>
<input type="file" class="img-control" />
<img class="img-preview" src="#" />
<br><br>
and my JS code is
<script type=text/javascript>
jQuery( document ).ready(function() {
function readURL() {
var $input = jQuery(this);
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$input.next('.img-preview').attr('src', e.target.result).show();
}
reader.readAsDataURL(this.files[0]);
}
}
jQuery(".img-control").change(readURL);
});
</script>
The code outside table tag both input are working but the input inside table isn't working and I want to create my inputs inside table each input inside a table

The problem is that next() only looks for next sibling and the <input> has no siblings inside the <td>
Try changing:
$input.next('.img-preview').attr('src', e.target.result).show();
To
$input.closest('tr').find('.img-preview').attr('src', e.target.result).show();
// OR
$input.parent().next().find('.img-preview').attr('src', e.target.result).show();

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

How to browse the img src 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

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.