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]);
};
Related
I'd like to change the URLs from data:image base64 to blob. This is the original code that produces the base64 urls:
<script>
$(window).load(function(){
function readURL() {
var $input = $(this);
var $newinput = $(this).parent().parent().parent().find('.portimg ');
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
reset($newinput.next('.delbtn'), true);
$newinput.attr('src', e.target.result).show();
$newinput.after('<div class="delbtn delete_upload" title="Remove"><span class="bbb-icon bbb-i-remove2"></span></div>');
$("form").on('click', '.delbtn', function (e) {
reset($(this));
$("form").find('#rright-<?php echo $i;?>').hide();
});
}
reader.readAsDataURL(this.files[0]);
}
}
$(".file").change(readURL);
function reset(elm, prserveFileName) {
if (elm && elm.length > 0) {
var $input = elm;
$input.prev('.portimg').attr('src', '').hide();
if (!prserveFileName) {
$($input).parent().parent().parent().find('input.file ').val("");
//input.fileUpload and input#uploadre both need to empty values for particular div
}
elm.remove();
}
}
});
</script>
What I want is to call Object.createObjectURL(this.files[0]) to get the object URL, and use that as the src of your img; (just don't even bother with the FileReader).
Something like this?
function readURL() {
var file = this.files[0]
var reader = new FileReader();
var base64string = getBase64(file);
reader.onload = function () {
reset($newinput.next('.delbtn'), true);
$newinput.attr('src', e.target.result).show();
$newinput.after('<div class="delbtn delete_upload" title="Remove"><span class="bbb-icon bbb-i-remove2"></span></div>');
var blob = dataURItoBlob(base64string);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
I'm not sure if this will work and due to the vagaries of Stack Snippets, can't demonstrate its viability here on Stack Overflow, but theoretically, you should be able to use URL.createObjectURL to create the appropriate URL for your image, without going through the whole base 64 rigmarole.
var $newinput = $(this).parent().parent().parent().find('.portimg ');
if (this.files && this.files[0]) {
$newinput.attr('src', URL.createObjectURL(this.files[0]));
// if the above doesn't work, you could try to create a new Blob
var fileBlob = new Blob(this.files[0], { type: "image/png" })
// Substitute "image/png" with whatever image type it is
$newinput.attr('src', URL.createObjectURL(fileBlob));
That should render the appropriate URL for the image's source.
Note that it is best practice to revoke the object URL when you are done with it. I'm not sure that's necessary in this case, since presumably you want to show the image until the page is closed. However, if the user can upload a new image, do something like:
if ($newinput.attr('src').indexOf('blob') > -1) {
URL.revokeObjectURL($newinput.attr('src'));
}
Add that before setting the new source and you shouldn't need to worry about memory leaks (from this use of createObjectURL anyway...).
For more information on Blob URLs, see this answer by a now-anonymous user to What is a blob URL and why it is used?
I need to read a file locally using javascript.
I know that for security reasons the possibility of doing this directly is inhibited.
Is there any way to work around this?
Furthermore, if I try to use the features of the File API specification, I can't get the "load" button to work if the button itself is not directly attached in the document.body. I would like this button to work even if attached to child type elements. Is there a solution for this?
Thank you very much
fileReader() {
console.log("FileReader Called");
var fileInput = document.getElementById('file');
var fileDisplayArea = document.getElementById('source-container');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerText = reader.result;
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!";
}
});
}
I used lightgallery for preview of uploaded image it works well. The same way when I try to open uploaded pdf in lighgallery it is not showing up. But I am able to view pdf when given hardcoded path value in data-src.
img#exeImg.height-100.load-pdf(src="/custom/img/nodata.svg" data-iframe="true" data-src="/custom/img/Manual.pdf")
$('.load-pdf').lightGallery({
selector: 'this'
});
But when try to use uploaded base 64 pdf it is not working
function previewDocuments(input,imgId){
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(imgId).attr('src', "/custom/img/fileuploaded.svg");
$(imgId).attr('data-src',e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
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.
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);