¿Cómo obtener una gota?
HTML:
<input type="file" onchange="previewFile()">
JavaScript:
function previewFile() {
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
// Get blob?
console.log(file);
}
rafaelcastrocouto
Como se indica en los comentarios, file
es un blob
:
file instanceof Blob; // true
Y puede obtener su contenido con la API del lector de archivos https://developer.mozilla.org/en/docs/Web/API/FileReader
Lee mas: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
var input = document.querySelector('input[type=file]');
var textarea = document.querySelector('textarea');
function readFile(event) {
textarea.textContent = event.target.result;
console.log(event.target.result);
}
function changeFile() {
var file = input.files[0];
var reader = new FileReader();
reader.addEventListener('load', readFile);
reader.readAsText(file);
}
input.addEventListener('change', changeFile);
<input type="file">
<textarea rows="10" cols="50"></textarea>
-
@rafaelcastrocouto, @Daniel: si quiero enviar el blob a través de websocket, ¿qué objeto se requiere enviar desde el código abv? debo enviar
ws.send(reader)
???– Samuel
10 de julio de 2017 a las 10:02
dipo
Un objeto de archivo es una instancia de Blob pero un objeto de blob no es una instancia de Archivo
new File([], 'foo.txt').constructor.name === 'File' //true
new File([], 'foo.txt') instanceof File // true
new File([], 'foo.txt') instanceof Blob // true
new Blob([]).constructor.name === 'Blob' //true
new Blob([]) instanceof Blob //true
new Blob([]) instanceof File // false
new File([], 'foo.txt').constructor.name === new Blob([]).constructor.name //false
Si debe convertir un objeto de archivo en un objeto de blob, puede crear un nuevo objeto de blob utilizando el búfer de matriz del archivo. Vea el ejemplo a continuación.
const file = new File(['hello', ' ', 'world'], 'hello_world.txt', {type: 'text/plain'});
//or const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.onload = function(e) {
const blob = new Blob([new Uint8Array(e.target.result)], {type: file.type });
console.log(blob);
};
reader.readAsArrayBuffer(file);
Como lo señaló @bgh, también puede usar el método arrayBuffer del objeto File. Vea el ejemplo a continuación.
const file = new File(['hello', ' ', 'world'], 'hello_world.txt', {type: 'text/plain'});
//or const file = document.querySelector('input[type=file]').files[0];
file.arrayBuffer().then((arrayBuffer) => {
const blob = new Blob([new Uint8Array(arrayBuffer)], {type: file.type });
console.log(blob);
});
Si su entorno es compatible con async/await, puede usar una sola línea como la siguiente
const fileToBlob = async (file) => new Blob([new Uint8Array(await file.arrayBuffer())], {type: file.type });
console.log(await fileToBlob(new File(['hello', ' ', 'world'], 'hello_world.txt', {type: 'text/plain'})));
-
En estos días, probablemente sea una mejor idea usar el
arrayBuffer()
método en su lugar (desarrollador.mozilla.org/en-US/docs/Web/API/Blob/arrayBuffer). Algo como:let blob = new Blob(await file.arrayBuffer());
– bgh
4 de diciembre de 2020 a las 9:11
Ren Zhenchuan
async function FileToString (file) {
try {
let res = await file.raw.text();
console.log(res);
} catch (err) {
throw err;
}
}
file instanceof Blob; // true
– Pablo S.
22 de noviembre de 2015 a las 14:24