[英]Converting files in base64
I have a function in java script that runs through the files. 我在Java脚本中有一个贯穿文件的函数。
I have selected by means of an input type: 我通过输入类型进行选择:
file multiple, this function lists the files and for each file they add a link "See detail" which in turn when clicking sends to an onchange. 如果文件为多个,此功能将列出文件,并为每个文件添加一个链接“查看详细信息”,单击链接将其发送给onchange。
That link I create it when going through the selected files. 我在浏览选定文件时会创建该链接。
The problem is that in this function I need to obtain the balor in BASE64 per file, I only do that when I debug the script from the browser. 问题在于,在此功能中,我需要在每个文件中获取BASE64中的balor,仅在从浏览器调试脚本时才这样做。
If I get Base64 per file but when I do not debugeo it leaves my variable indefinite. 如果我每个文件都得到Base64,但是当我没有debugo时,它将使变量不确定。
I leave my code. 我留下我的代码。
function handleFileSelect(e) {
console.dir(e);
if (!e.target.files) return;
selDiv.innerHTML = "";
var files = e.target.files;
for (var i = 0; i < files.length; i++) {
var base64;
var fileToLoad = document.getElementById("files").files[i]
var fileReader = new FileReader();
fileReader.onload = function (fileLoadedEvent) {
base64 = fileLoadedEvent.target.result;
console.log(base64);
};
fileReader.readAsDataURL(fileToLoad);
var f = files[i];
var TmpPath = URL.createObjectURL(e.target.files[i]);
var name = f.name;
var extencion = f.name.split('.')[1];
selDiv.innerHTML += f.name + " <a href='#' onclick=verdetalle(" + i + ",'" + extencion + "','" + name + "','" + base64 + "','" + TmpPath + "')>Ver Detalle</a>" + "<br/>";
}
}
this seccion the code is my problem, why? 这段代码是我的问题,为什么?
var base64;
var fileToLoad = document.getElementById("files").files[i]
var fileReader = new FileReader();
fileReader.onload = function (fileLoadedEvent) {
base64 = fileLoadedEvent.target.result;
console.log(base64);
};
fileReader.readAsDataURL(fileToLoad);
FileReader works asynchronously. FileReader异步工作。
base64
is undefined
during for-loop. 在for循环期间
undefined
base64
。
You are using function-scope variables. 您正在使用函数作用域变量。 It overwrites variables.
它会覆盖变量。
async function
type: async function
类型:
document.querySelector( "input" ).addEventListener( "change", handleFileAsync ); async function handleFileAsync ( event ) { async function readFile( file ) { let reader = new FileReader(); let result = new Promise( resolve => reader.addEventListener( "load", resolve ) ); reader.readAsArrayBuffer( file ); return { name: `name: ${file.name}`, ArrayBuffer: ( await result ).srcElement.result } } let files = event.srcElement.files; let promises = []; for ( const file of files ) { promises.push( readFile( file ) ); } console.log( await Promise.all( promises ) ); }
<input type="file" multiple>
Equivalent normal function as above: 等效的正常函数如上:
document.querySelector( "input" ).addEventListener( "change", handleFile ); function handleFile ( event ) { let files = event.srcElement.files; let promises = []; for ( const file of files ) { let reader = new FileReader(); promises.push( new Promise( resolve => reader.addEventListener( "load", resolve ) ) .then( result => ( { name: `name: ${file.name}`, ArrayBuffer: result.srcElement.result } ) ) ); reader.readAsArrayBuffer( file ); } Promise.all( promises ).then( list => console.log( list ) ); }
<input type="file" multiple>
For using console, heading code uese .readAsArrayBuffer
instead of .readAsDataURL
. 要使用控制台,请使用标题代码uese
.readAsArrayBuffer
而不是.readAsDataURL
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.