web-dev-qa-db-ja.com

入力を使用せずにJavascript読み取りファイル

このコードがあり、ファイルをbase64に変換するには、[ファイルの選択]をクリックして選択する必要があります。ページの読み込み時にbase64に変換されるように、ファイル名をハードコーディングしたいと思います。

JavaScript：

var handleFileSelect = function(evt) {
  var files = evt.target.files;
  var file = files[0];

  if (files && file) {
    var reader = new FileReader();

    reader.onload = function(readerEvt) {
      var binaryString = readerEvt.target.result;
      document.getElementById("base64textarea").value = btoa(binaryString);
    };

    reader.readAsBinaryString(file);
  }

  if (window.File && window.FileReader
      && window.FileList && window.Blob) {
    document.getElementById('filePicker')
        .addEventListener('change', handleFileSelect, false);
  } else {
    alert('The File APIs are not fully supported in this browser.');
  }
};

HTML：

<div>
  <div>
    <label for="filePicker">Choose or drag a file:</label><br/>
    <input type="file" id="filePicker">
  </div>
  </br>
  <div>
    <h1>Base64 encoded version</h1>
    <textarea id="base64textarea"
        placeholder="Base64 will appear here"
        cols="50" rows="15">
    </textarea>
  </div>
</div>

編集：あなたの答えをありがとう、彼らは本当に役に立ちました。

javascriptfileinputonload
13
user986959

あなたは単にあなたがしようとしていることをすることができません。セキュリティ対策として、Javascriptを介して入力要素のパスを設定することはできません。ここをチェックしてください： C：\ fakepathを解決する方法？

3
asm00

File APIは、ユーザーの介入なしにローカルファイルを読み取るのには適していませんが、Web APIは（もちろん、ローカルファイルへのアクセスを明示的に有効にせずにChromiumで機能しないなど、その制限の範囲内です）。

したがって、他の誰かがユーザーの介入なしにローカルファイルをロードする方法の実用的な例が必要な場合、ie、ユーザーがINPUTボタンを押す必要はありません（ただし、ユーザーに手段を提供します）読み込みを中止します）。

パラメータ：ファイル名、リクエストタイプ（テキスト、blobなど）、MIMEタイプ、およびファイルが完全にロードされた後に実行される関数。ファイルは変数Xにロードされ、オブジェクトにデータを入力するために使用されます。

ファイルの読み取りを中止するには、進行状況バーをクリックするだけです（また、単なる例であり、プログラムが機能するために必須ではありません）。非同期であるため、必要な数のファイルを同時に読み取ることができます（ファイルごとに1つのプログレスバーが作成されます）。

テキストファイルとビデオの例のみを作成しましたが、どのような種類のファイルでも機能するはずです。

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function LoadFile(FileName,RespType,FileType,RunMe)
{   var AJAXFileReader=new XMLHttpRequest();

    // Creates new progress bar.
    var ProgressBar=CreateSVGProgBar("ProgressBars");

    AJAXFileReader.addEventListener("progress",
        function FRProgress(AJAXFREvt)
        {   // Calculate progress.
            var X=-1;

            if (AJAXFREvt.lengthComputable)
                X=Math.trunc(AJAXFREvt.loaded/AJAXFREvt.total*100);

            ShowProgressBar(ProgressBar,FileName,X);
        });

    AJAXFileReader.addEventListener("error",function FRFailed()
        {   // This will be executed if an error occurs.
            console.log("Error:",this.status);
        });

    AJAXFileReader.addEventListener("timeout",function FRTimeOut()
        {   // This will be executed if the reading times out.
            console.log("File reading timed out!");
        });

    AJAXFileReader.addEventListener("abort",
        function FRCancel()
        {   // This will confirm reading was aborted.
            console.log("File reading cancelled by user!");
        });

    ProgressBar.addEventListener("click",
        function KillMe()
        {   // Adds an abort command to the object.
            console.log(AJAXFileReader.readyState);
            if (AJAXFileReader.readyState!=4)
            {   console.log("Aborting file reading...");
                AJAXFileReader.abort();
            }
            ProgressBar.removeEventListener("click",KillMe);
        },
        false);

    AJAXFileReader.addEventListener("load",
        function Finished()
        {   // When reading is finished, send data to external function.
            if ((this.readyState==4)&&(this.status==200))
            {   ShowProgressBar(ProgressBar,FileName,100);
                RunMe(this.response);
                //ProgressBar.click();
            }
        },
        false);

    AJAXFileReader.open("GET",FileName,true);
    AJAXFileReader.overrideMimeType(FileType);
    AJAXFileReader.responseType=RespType;
    AJAXFileReader.timeout=10000; // Setting time-out to 10 s.

    AJAXFileReader.send();
}

function CreateSVGProgBar(AnchorId)
{   // Creates new SVG progress bar.
    var Parent=document.getElementById(AnchorId);
    var NewSVG=document.createElementNS("http://www.w3.org/2000/svg","svg");
    NewSVG.setAttribute("viewBox","0 0 102 22");
    NewSVG.setAttribute("width","102");
    NewSVG.setAttribute("height","22");
    Parent.appendChild(NewSVG);
    return NewSVG;
}

function ShowProgressBar(E,N,X)
{   // Show progress bar.
    var P=X<0?"???":X+"%";

    E.innerHTML="<text x=\"50\" y=\"16\" font-size=\"12\" fill=\"black\" stroke=\"black\" text-anchor=\"middle\">"+N+"</text><rect x=\"1\" y=\"1\" width=\""+X+"\" height=\"20\" fill=\""+(X<100?"#FF0000":"#0000FF")+"\" stroke=\"none\"/><rect x=\"1\" y=\"1\" width=\"100\" height=\"20\" fill=\"none\" stroke=\"black\" stroke-width=\"1\"/><text x=\""+X/2+"\" y=\"16\" font-size=\"12\" fill=\"black\" stroke=\"black\" text-anchor=\"middle\">"+P+"</text>";
}

function TracerOn(X)
{   // This will be executed after the file is completely loaded.
    document.getElementById("Tron").innerHTML=X;
}

function PlayIt(X)
{   // This will be executed after the file is completely loaded.
    var blob_uri=URL.createObjectURL(X);
    document.getElementById("MagicalBox").appendChild(document.createElement("source")).src=blob_uri;
}

function Startup()
{   // Run after the Page is loaded.
    LoadFile("example.txt","text","text/plain;charset=utf-8",TracerOn);
    LoadFile("video.mp4","blob","video/mp4",PlayIt);
}

</script>
</head>

<body onload="Startup()">

<div id="ProgressBars"></div>

<div id="Tron">Text...</div>

<video id="MagicalBox" width="400" controls>Video...</video>

</body>
</html>
1
Cyberknight

クロムを起動できます。chromeブラウザで_--allow-file-access-from-files_フラグを設定し、fetch()のXMLHttpRequest()を使用して、ローカルファイルシステムからファイルを要求します。

_fetch("file:///path/to/file")
.then(response => response.arrayBuffer())
.then(ab => {
  // do stuff with `ArrayBuffer` representation of file
})
.catch(err => console.log(err));
_

参照 JSでローカルXMLを読み取る

1
guest271314