5

FileReader と HTML ファイル ダイアログを使用して、スクリプト内のファイルを読み取ります。このファイルの内容を FileReader.onload 関数から渡すにはどうすればよいですか?

function readFileData(evt) {
  var file = evt.target.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
    var contents = e.target.result;
  }
  reader.readAsText(file);
}
document.getElementById('file').addEventListener
    ('change', readFileData, false);

/* I want to access the contents here */

readFileData 関数と onload 関数に戻り値を貼り付けてみましたが、戻り値がわかりません。

4

7 に答える 7

2

私はあなたが知っていると思いますasync。

したがって、短い答えは次のとおりです。いいえ、それはできません。

ただし、将来の呼び出しでコンテンツにグローバルにアクセスできるようにする場合は、次のようにすることができます。

var contents;// declared `contents` outside
function readFileData(evt) {
  var file = evt.target.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
    contents = e.target.result; //<-- I removed the `var` keyword
  }
  reader.readAsText(file);
}

document.getElementById('file').addEventListener('change', readFileData, false);

var reasonableTimeToWaitForFileToLoad = 100000;

console.log(contents); //`contents` access first attempt: prints undefined



setTimeout(function() {
  console.log(contents);//`contents` access second attempt: prints the contents 'may be if the time allows.'
}, reasonableTimeToWaitForFileToLoad);
于 2013-06-29T19:14:06.660 に答える
2 
var contents;
function readFileData(evt) {
  var file = evt.target.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
   contents = e.target.result;
  }

 reader.readAsText(file);

 reader.onloadend=function(e) {
   console.log(contents)
 }
}  

document.getElementById('file').addEventListener('change', readFileData, false);
于 2015-08-28T10:47:47.893 に答える
0

これはスコープの問題です。onload 内でコンテンツを宣言している場合、その関数が実行された後は使用できなくなります。最初にそのスコープ外の内容を宣言する必要があります。

var contents;
function readFileData(evt) {
  var file = evt.target.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
   contents = e.target.result;
  }
  reader.readAsText(file);
}
document.getElementById('file').addEventListener
    ('change', readFileData, false);

//make changes here
//contents should have the correct value
于 2013-06-29T19:14:23.143 に答える
0

まず、a を使用したファイルの読み取りFileReaderは非同期タスクであり、同期的に操作することはできないことを認識する必要があります。

これを処理する方法はたくさんありますが、それらの多くは推奨事項には適していません ;)

私は次の2つの方法のいずれかを行います。

1: onload イベント ハンドラー内から関数を呼び出し、ファイルの内容をパラメーターとして渡すことができます。

2: onload イベント ハンドラー内からイベントをトリガーし、ファイルの内容をイベント データとして渡すことができます。

于 2013-06-29T19:15:47.383 に答える
0

両方の関数の外側で宣言しcontents、内側の関数内で代入するだけです:

var contents;
var outer_fn = function() {
  var inner_fn = function() {
    contents = '42';
  }
  inner_fn();
}
outer_fn();
// here, `contents' is '42'
于 2013-06-29T19:16:26.893 に答える
0

私は同様の課題に直面しましたが、これは私が問題を解決するために使用したものです。

var contents;
function readFileData(evt) {
  var file = evt.target.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
   contents = e.target.result;
  }

 reader.readAsText(file);

 //calling to access the 'contents' variable
 accessFileContents();
}  

document.getElementById('file').addEventListener('change', readFileData, false);
var wait4file2load = 1000;

/* To access 'contents' here */
function accessFileContents(){
  setTimeout(function(){
    console.log(contents);
  }, wait4file2load);
}

undefinedファイルが完全にアップロードされた後に呼び出すため、値はありません。

于 2014-09-01T09:57:10.143 に答える
0

Angular 7 (typescript) で同様の問題がありましたが、これが私の問題を解決した方法です。

私がやりたかったのは、fileReader -> reader.onload 内で起こっていた base64 変換にアクセスすることでした。

次に、そのパラメーターを別のメソッドに渡し、そこで JSON オブジェクトに変換してから API に投稿すると、投稿に別のパラメーターも投稿したいことがわかります。(このコードでは追加されていません)

私が最初にしたことは、メソッドの外部にアクセスするために潜在的に必要なものを宣言することでした。

base: any = null;
base64File: any = null;
fileToTest: any = null;

次に、アップロードイベントが発生したときにpdfをbase64に変換しました


convertToBase64 (e){

  this.fileToTest = e.target.files[0];
  var reader = new FileReader();
      reader.onload = () => { 
        this.base64File = reader.result.slice(28); 
};

reader.onerror = function (error) {
  console.log('Error: ', error);

}.bind(this.base64File);

reader.readAsDataURL(this.fileToTest);

return this.base64File;
}

最後に別の方法で base64 ファイルにアクセスします


 onSubmit() {

  console.log("base 64 file is visible", this.base64File);

    var base = 
      {
        "FileBase64": this.base64File,
        "Path": "document",
        "FileType": ".pdf"
      };

  console.log("JSON object visible", base);
  this.uploadService.base64Post(base);
}

すべてが機能するようになりました。うまくいけば、これが他の誰かが同じ問題を抱えていることに気付くのに役立つかもしれません.

Angular 7 を使用すると、コードはコンポーネント ファイルにあり、post 関数は Service ファイルにあります。私のコメントがなければ、コンポーネント ファイルのコードはまさにこのようなものです。

于 2019-08-22T10:35:31.773 に答える