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.
Related
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
I am trying to upload files in JSON using angular and FileReader Api.
The problem is that for files larger than 600 - 700 KB my browser crashes.
As far as I can see the problem occurs when requesting against a resource and not when the file reader reads the file and encode that in base64
Any ideas?
Here is the code:
function readFiles(files) {
var reader = new FileReader();
var data = [];
function readFile(index) {
if (index >= files.length) {
UploadFilesResource.create(JSON.stringify(data), function (successData) {
scope.attachments = successData.data;
scope.showUploadForm = false;
}, function (errorData) {
MessageSrv.setErrorMessage(errorData.error_message)
});
return;
}
var file = files[index];
reader.onload = function(e) {
data.push(prepareFile(file, e.target.result));
readFile(index + 1)
};
reader.readAsDataURL(file);
}
readFile(0);
}
And here is the Resource Code:
crmApp.lazy.factory('UploadFilesResource',
['CrmAppResource', 'CrmAppConfiguration',
function ($resource, CrmAppConfiguration) {
return $resource(
CrmAppConfiguration.apiUrl + 'upload/files/:id',{id:'#id'}
);
}
]);
Thank you #Jeremy and #Jonas
That worked! The problem was JSON.stringify
So I removed that and now everything is OK with the browser!
i am using the following JS, but it seems that the selected file is not yet loaded to the input html element. how can i load a file by the input element and get what the user selected, is there an event or some other way to achieve that? (when using inspect elements on chrome it works - var file is not null)
function CreateNewReport() {
if (window.File && window.FileReader && window.FileList && window.Blob) {
debugger;
var input = $(document.createElement('input'));
input.attr("type", "file");
input.attr("id", "fileName");
input.trigger('click'); // opening dialog
debugger;
var file = input[0].files[0];
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
debugger;
var sXml = e.target.result;
var eXml = encodeURIComponent(sXml);
var postData = {
reportXmlLayout: eXml
};
OpenNewWindow(postData, "ReportDesign/LoadLayoutFromXML");
};
})(file);
if (file == null)
alert('File not loaded'); //always get here without inspect
else
// Read in the file as a data URL.
reader.readAsText(file);
return false;
}
else {
alert('The File APIs are not fully supported by your browser.');
}
return false;
}
i have managed to find a solution by register to onchange event, now my script looks like that and it works fine.
function CreateNewReport() {
if (window.File && window.FileReader && window.FileList && window.Blob) {
debugger;
var input = $(document.createElement('input'));
input.attr("type", "file");
input.attr("id", "fileName");
input[0].onchange = function (e) {
debugger;
var file = input[0].files[0];
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
debugger;
var sXml = e.target.result;
var eXml = encodeURIComponent(sXml);
var postData = {
reportXmlLayout: eXml
};
OpenNewWindow(postData, "ReportDesign/LoadLayoutFromXML");
};
})(file);
if (file == null)
alert('File not loaded');
else
// Read in the file as a data URL.
reader.readAsText(file);
};
input.trigger('click'); // opening dialog
return false;
}
else {
alert('The File APIs are not fully supported by your browser.');
}
return true;
}
I want to show a preview of uploaded video file before submit. I have successfully done this with an image thanks to the following JS, but it is not working with video files...
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<img></img>", {
class: "imageThumb",
src: e.target.result,
title: file.name
}).insertAfter("#files");
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
How can I do this?
Video files are typically larger and harder for the FileReader class to comprehend.
Try using the window.URL.createObjectURL function for this (make sure this is properly accessed on supported browsers as some require vendor prefixes).
You should best check the following resources:
http://updates.html5rocks.com/2012/06/Don-t-Build-Blobs-Construct-Them
https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
URL.createObjectURL for audio blob gives TypeError in Firefox
I guess it's needless to say the browser should support the video format.
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');