个人中心
gpt4 book ai didi

javascript - FileReader 在 JQuery 中为 File 对象返回 undefined

转载 作者：行者123 更新时间：2023-11-30 07:20:24 24 4
gpt4 key购买 nike

有人能告诉我为什么当所有文件属性都正确打印时为什么 FileReader.readAsArrayBuffer() 在以下代码中返回未定义

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {

         $( "#form" ).submit(function( event ) {
              event.preventDefault();   
             var filevar=document.getElementById("file").files[0];   
             var reader=new  FileReader() ;
             console.log(filevar.name);
             console.log(filevar.size);
             console.log(filevar.type);
             var file_contents= reader.readAsArrayBuffer(filevar);
             console.log(file_contents);      

        });   
    });

    </script>
<body>
<form   action="" method="POST" id="form">
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname"><br>
 Choose File : <input name="myFile" type="file" id="file">

<input type="submit" id="submit">
</form>
</body>

</html>

最佳答案

读取文件是异步的。您必须等到它完成。

var reader = new FileReader();
reader.onload = function(e){
    let value = e.value;  // alternatively reader.result
    // do stuff with your value
};
reader.readAsArrayBuffer(filevar);

.readAsArrayBuffer不返回任何东西。

或者，您可以为此设置一个异步函数，这样您就不必使用回调:

function readFile(file){
    return new Promise((res, rej) => {
        // create file reader
        let reader = new FileReader();
        
        // register event listeners
        reader.addEventListener("loadend", e => res(e.target.result));
        reader.addEventListener("error", rej);
        
        // read file
        reader.readAsArrayBuffer(file);
    });
}

async function main(file){
    // read file into typed array
    let fileArrayBuffer = new Uint8Array(await readFile(file));
    // do things with it
    console.log(fileArrayBuffer);
}

// register event listener for input
document.querySelector("input[type=file]").addEventListener("change", e => {
    let file = e.target.files[0];
    main(file);
});
<input type="file">

关于javascript - FileReader 在 JQuery 中为 File 对象返回 undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49032616/

24 4 0
文章推荐： javascript - 通过对每对值执行操作将两个数组组合成一个数组
文章推荐： java - 如何设置JFrame的最大尺寸？
文章推荐： java - 如何统计JFreeChart中条形图的系列数？
文章推荐： java - 重叠两个 JButtons : Issue
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com