Develop Reference

How to get path directory from FileReader()?

Hi i have these codes to read the file the user has uploaded:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#myImg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
And the output is a whole chunk of data:
Is there any way i can get the path from the data? for example C:\Users\blackLeather\Desktop
If no,is there another way to get the image directory without having to add into another folder?

Is there any way i can get the path from the data?
No. None at all. That information is not provided to the JavaScript layer by the browser, for security reasons.

Add this in element:
onchange="loadFile(event)
var loadFile = function(event) {
var image = document.getElementById('output');
image.src = URL.createObjectURL(event.target.files[0]);
};

Pre-visualising multiple pictures when selected

I have this code to pre-visualise the pic we selected in the form.
It works fine when there is only one picture but I don't know what do modify if I want multiple files to be selected and previsualised for multiple pictures.
I tried to copy paste this one time per pic but seems not to work like this (I am not so good in js).
How should I modify it to make it work for image 1, image 2, image3, etc...
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image1').css('backgroundImage', "url(" + e.target.result + ")" );
}
reader.readAsDataURL(input.files[0]);
}
}
$("#profile-img1").change(function(){
readURL(this);
});

Jquery image upload same image not uploading issue

am trying to upload multiple images using jquery. but same images are not uploading. how to solve this issue please check my fiddle
$images = $('.imageOutput')
$(".imageUpload").change(function(event){
readURL(this);
});
function readURL(input) {
if (input.files && input.files[0]) {
$.each(input.files, function() {
var reader = new FileReader();
reader.onload = function (e) {
$images.append('<img src="'+ e.target.result+'" />')
}
reader.readAsDataURL(this);
});
}
}
click here for jsfiddle

Just set the value of your file input to null once you are done with fetching the URL like below:
http://jsfiddle.net/q9Lx1Lss/23/
$images = $('.imageOutput')
$(".imageUpload").change(function(event){
readURL(this);
this.value = null; //setting the value to null
});
function readURL(input) {
if (input.files && input.files[0]) {
$.each(input.files, function() {
var reader = new FileReader();
reader.onload = function (e) {
$images.append('<img src="'+ e.target.result+'" />')
}
reader.readAsDataURL(this);
});
}
}
You were getting issue because on second time after selecting the same image, change event was not getting fired because of same file selection. Now after adding this.value = null; code we are clearing the previous file selection and hence every time change event will get executed irrespective of whether you select same file or different one.

How to detect file extension with javascript FileReader

I'm using javascript's FileReader and my customized function for reading an JPG-JPEG image,
My problem is that how it's possible to detect the file extension through my code below and give error to user if the file is not JPG-JPEG:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
alert('image has read completely!');
}
reader.readAsDataURL(input.files[0]);
}
}

You can try this,
I changed your code as follows:
var fileTypes = ['jpg', 'jpeg', 'png', 'what', 'ever', 'you', 'want']; //acceptable file types
function readURL(input) {
if (input.files && input.files[0]) {
var extension = input.files[0].name.split('.').pop().toLowerCase(), //file extension from input file
isSuccess = fileTypes.indexOf(extension) > -1; //is extension in acceptable types
if (isSuccess) { //yes
var reader = new FileReader();
reader.onload = function (e) {
alert('image has read completely!');
}
reader.readAsDataURL(input.files[0]);
}
else { //no
//warning
}
}
}

There's not a direct interface to read the file extension. You have at least 2 options:
Use a regex to extract the extension from the filename
Use the content type of the file as your filter
For the extension method it'd be something like:
var extension = fileName.match(/\.[0-9a-z]+$/i);

How to prevent none images to be seen in browsing using jquery

I want to do is if the user click to browse for files he should see images only no other files. How to do that using jquery?
My problem is I can see and choose other files besides images when i browse.
current output: http://jsfiddle.net/LvsYc/3123/
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#Picture').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});

Change your input to:
<input type='file' id="imgInp" accept="image/*" />
http://jsfiddle.net/LvsYc/3124/