I have a problem with this code:
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault(); // stop default
console.log('ejecutado handleFileSelects')
var divOrigen = evt.target.parentNode; //get the div of the input
var divDestino = $(divOrigen).find('img'); //get the div for preview the img
var inputDestino = $(divOrigen).find('input[type="file"]'); // the input file
var files = evt.target.files; //get files in array
if (files.length) {
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
$(divDestino).attr('src', e.target.result); //read files content to preview in div
};
})(f);
reader.readAsDataURL(f);
}
$(inputDestino).popover('destroy');
} else {
evt.stopPropagation();
evt.preventDefault();
$(inputDestino).popover('show');
console.log('files is empty');
$(divDestino).attr('src', '/images/index/publicacion/dragAndDropHere.png');
}
}
This code changes the background of a div. The purpose of the div is to preview the image of the input file. In Opera, Firefox, Internet Explorer and Safari it works fine, but when I try it on my Android tablet, nothing happens. Is there a tool similar to Firebug for Android? Or any framework that I can use for Android tablets?
Try removing the first / from the image source, so instead of
$(divDestino).attr('src', '/images/index/publicacion/dragAndDropHere.png');
you have
$(divDestino).attr('src', 'images/index/publicacion/dragAndDropHere.png');
Related
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 am trying to create a PHP file uploader with file preview before uploading. The script below works on multiple file upload for images only but would like to have an image icon for non-images with an image in the directory saying: "File preview not available."
// JavaScript Document
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
else{
$($.parseHTML('<img>')).attr('src', '/assets/img/no_preview.png');
$('.imagepreview').attr('src', '../img/no_preview.png');
}
}
};
$('#prescription-photo-add').on('change', function() {
imagesPreview(this, 'div.prescription');
});
});
You can first check the file extension first. Then display the image of the file if it is an image and display "File preview not available." otherwise
Codes can be found in this answer
This is my function:
FileCropped.prototype.change = function () {
var obj = $(this).data("plugin.file-cropped");
var files = obj.$element[0].files;
var file;
var URL = window.URL || window.webkitURL;
var blobURL;
if (files && files.length) {
file = files[0];
console.log("I have files");
if (/^image\/\w+$/.test(file.type)) {
blobURL = URL.createObjectURL(file);
obj.$element.val('');
obj.$hidden[0].value = blobURL;
//URL.revokeObjectURL(blobURL);
} else {
window.alert('Please choose an image file.');
}
} else
{
console.log("No files?");
}
}
I am trying right now to attach the blob to an existing form input but it does not work. With the chrome debugger I see the method works fine and follow the expected path, but at the time of submit the server gets nothing.
Any hint?
Edit: of course the function has no value right now. I could just use the normal file input. The goal is to be able to manipulate the blob before attaching it to the form.
You can use FileReader to read the file as data URL
var fileReader = new FileReader();
fileReader.addEventListener('load', function () {
blobURL = fileReader.result;
obj.$hidden[0].value = blobURL;
});
fileReader.readAsDataURL(file);
There is the following code which makes preview before uploading on the server:
$(function(){
var preview = $(".preview");
$("#menu_image").change(function(event){
var input = $(event.currentTarget);
var file = input[0].files[0];
var reader = new FileReader();
reader.onload = function(e){
var img = new Image;
img.onload = function() {
if ((img.with != 160) || (img.height != 160)) {
return;
}
preview.attr("src", img.src);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
});
});
But this code doesn't check file's type. How can I do it? Thanks in advance.
You don't need to load the FileReader to know file type.
Using your code:
var file = input[0].files[0];
is as easy as checking the file.type property.
You can check if the file is an image:
if (file.type.match('image.*')) {
console.log("is an image");
}
And which type of image is:
if (file.type.match('image.*')) {
console.log("is an image");
console.log("Show type of image: ", file.type.split("/")[1]);
}
Note that file.type.split("/")[1] should be an "image"
You can do something similar to check the file extension:
var extension = file.name.substring(file.name.lastIndexOf('.'));
// Only process image files.
var validFileType = ".jpg , .png , .bmp";
if (validFileType.toLowerCase().indexOf(extension) < 0) {
alert("please select valid file type. The supported file types are .jpg , .png , .bmp");
return false;
}
Try using the extension selector like this:
if($('img[src $= "jpg"]')) // if extension is jpg then dosomething
dosomething;
In one of my web application I have to show the image which selected for uploading before it uploaded to the server , using javascript .
I had this code ... It is working pretty well and fine in Mozilla . But not in Safari or Chrome .. Please help
// Handle file while select a new file
$('#file').change(function(){
$('#img_size').val((this.files[0].size)/1000000);
handleFiles(this.files);
});
// handle files
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img=document.getElementById('fake_img');
img.src = file;
img.onload = function() {
};
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
This code is working fine in chrome
http://jsfiddle.net/PrNWY/13/
Its shows the selected image in chrome & FF.
update
you can check file reader capability with following code
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
alert('The File APIs are fully supported in this browser.');
} else {
alert('The File APIs are not fully supported in this browser.');
}
In my safari it failed because of it is not supporting file API fully.