複数のファイルを1つの変数にエンコードする

複数のファイルアップロードオプションを使用しています。アップロード後、アップロードされた2つのファイルが表示されますが、コンソールでエンコードされた値を印刷しようとすると、最後にアップロードされたファイルのエンコードと価値が得られます。 1つの変数で一度に複数のファイルをエンコードするにはどうすればよいですか？ここで私が試したことがあります。複数のファイルを1つの変数にエンコードする

<html> 
    <body> 

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" multiple /> 
<div id="imgTest"></div> 
<script type='text/javascript'> 
    function encodeImageFileAsURL() { 

    var filesSelected = document.getElementById("inputFileToLoad").files; 
    if (filesSelected.length > 0) { 
     var fileToLoad = filesSelected[0]; 

     var fileReader = new FileReader(); 

     fileReader.onload = function(fileLoadedEvent) { 
     var srcData = fileLoadedEvent.target.result; // <--- data: base64 

     var newImage = document.createElement('img'); 
     newImage.src = srcData; 

     document.getElementById("imgTest").innerHTML = newImage.outerHTML; 
     //alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML); 
    var reslut = document.getElementById("imgTest").innerHTML; 
     console.log("Converted Base64 version is " +reslut); 

     } 
     fileReader.readAsDataURL(fileToLoad); 
    } 
    } 
</script> 
</body> 
</html>

出典

2016-08-10 user5397448

使用アレイの代替loadendイベントは、複数の値を格納します。 – bumbumpaw

'var filesSelected = document.getElementById（" inputFileToLoad "）。ファイル; 'すべてのファイルを返します。これをループすることができます。 – bumbumpaw

私はそれを行う方法を得ていません – user5397448

あなたはインクリメントされた変数がfilesSelected.length未満の場合.innerHTMLため.appendChild()に置き換え、各.filesためencodeImageFileAsURLを呼び出すために再帰を使用することができます。 loadイベント

function encodeImageFileAsURL(index) { 
    var filesSelected = document.getElementById("inputFileToLoad").files; 
    index = index || 0; 
    if (filesSelected.length > 0 && index < filesSelected.length) { 
     var fileToLoad = filesSelected[index]; 

     var fileReader = new FileReader(); 

     fileReader.onloadend = function(fileLoadedEvent) { 
     var srcData = fileLoadedEvent.target.result; // <--- data: base64 

     var newImage = document.createElement('img'); 
     newImage.src = srcData; 

     document.getElementById("imgTest").appendChild(newImage); 
     if (index < filesSelected.length) { 
      encodeImageFileAsURL(index + 1) 
     } 
     } 
     fileReader.readAsDataURL(fileToLoad); 
    } 
    }

plnkr http://plnkr.co/edit/74AQhTFeK87GQ5BgPJNx?p=preview

出典

2016-08-10 05:31:53 guest271314

私はこのコードを試して、値を警告しようとしましたが、最初にアップロードしたファイルをエンコードするだけです。どのようにして、両方の画像のエンコードされた値を両方とも1つの変数に出力できますか？ – user5397448

@ user5397448最新の記事を表示 – guest271314

複数のファイルを1つの変数にエンコードする

答えて

関連する問題