html5 - example - Chrome FileReader
read file javascript (2)
El objeto File API FileReader funciona de la misma manera en Chrome que en Firefox, Opera o Internet Explorer 10 (Sí, funciona en IE ).
Ejemplo simple
Empiezas declarando una nueva instancia del lector:
var reader = new FileReader();
Defina sus devoluciones de llamada para sus diversos events :
reader.onloadend = function( ){
document.body.style.backgroundImage = "url(" + this.result + ")";
}
Y luego pásale algo para leer:
reader.readAsDataURL( file );
Fiddle: http://jsfiddle.net/jonathansampson/K3A9r/
Manejo de múltiples archivos
Cuando trabajas con varios archivos, las cosas son un poco diferentes. Si bien está claro que debemos pasar por encima de FileList resultante, también necesitaremos utilizar un cierre para evitar que los datos de los archivos se alteren en numerosas iteraciones:
// Continue only if we have proper support
if ( window.FileReader ) {
// Provide our logic upon the change even of our input
document.getElementById("collection").onchange = function(){
// Couple variables for handling each file
var counter = -1, file;
// Cycle over all files
while ( file = this.files[ ++counter ] ) {
// Create a reader for this particular file
var reader = new FileReader();
// Respond to the onloadend event of the reader
reader.onloadend = (function(file){
return function(){
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = /^image/.test(file.type) ? this.result : "t9QlH.png";
document.body.appendChild( image );
}
})(file);
// Begin reading data for this file
reader.readAsDataURL( file );
}
}
}
Fiddle: http://jsfiddle.net/jonathansampson/jPTV3/
Detección de funciones
Aunque FileReader está disponible en casi todos los navegadores modernos, aún desea asegurarse de no causar ningún alboroto para los usuarios de los navegadores más antiguos. Antes de usar el FileReader, asegúrese de verificar el objeto de ventana para su presencia:
if ( window.FileReader ) {
// Safe to use FileReader
}
Corriendo localmente, desde Chrome
Debo señalar que ejecutar esto en una ruta de archivo: /// en Chrome dará como resultado una experiencia interrumpida. De forma predeterminada, las versiones actuales de Chrome no permiten que file: /// páginas accedan a otros archivos. Puede cambiar este comportamiento cargando Chrome con el --allow-file-access-from-files .
Tenga en cuenta que este método solo permitirá el acceso de archivos para la instancia del navegador con el que se abrió. Si desea que este sea el caso para todas las instancias de navegador en el futuro, puede modificar el acceso directo desde su escritorio. Simplemente haga clic derecho en el atajo de Chrome y vaya a propiedades. Luego, agrega la bandera al final del objetivo.
¿Puede alguien darme un ejemplo del uso de la API de FileReader para obtener contenido de un archivo en Chrome?
Parece estar volviendo undefined para mí.
<!doctype html>
<html>
<script>
function handle_files(files) {
console.log(files)
reader = new FileReader()
ret = []
for (i = 0; i < files.length; i++) {
file = files[i]
console.log(file)
text = reader.readAsText(file) //readAsdataURL
console.log(text) //undefined
ret.push(text)
}
console.log(ret) // [undefined]
}
</script>
<body>
FileReader Test
<input type="file" onchange="handle_files(this.files)">
</body>
</html>
Mi problema fue que supuse que FileReader era sincrónico. Esta es la forma correcta de hacerlo. Si está en Chrome, este código se debe ejecutar en un servidor (localhost o en un sitio). No funcionará con un archivo local.
<!doctype html>
<html>
<script>
function handle_files(files) {
for (i = 0; i < files.length; i++) {
file = files[i]
console.log(file)
var reader = new FileReader()
ret = []
reader.onload = function(e) {
console.log(e.target.result)
}
reader.onerror = function(stuff) {
console.log("error", stuff)
console.log (stuff.getMessage())
}
reader.readAsText(file) //readAsdataURL
}
}
</script>
<body>
FileReader that works!
<input type="file" multiple onchange="handle_files(this.files)">
</body>
</html>