H 5新属性--fileファイル読み込み

1534 ワード

まず、bodyにファイル入力ボックスを書き込みます.
        
        
このタブをJSで取得し、そのオンチャンイベントを待ち受けてファイルを読み込む(ファイルパスを読み込む例):
var inp = document.querySelector("#myFile");
        inp.onchange = function () {
            //console.log(this.files);          
            for (var i = 0;i < this.files.length;i++) {
                var file = this.files[i];
                console.log(file);
                
                var fr = new FileReader();              
                fr.readAsDataURL(file);                 
                fr.onload = function () {
                    console.log(this.result);               
                    var img = new Image();
                    img.src = this.result;
                    document.body.appendChild(img);
                }
            }
            
        }
パラメータの意味と他の方法を説明します.
 File    
         * lastModified          (   )
         * lastModifiedDate          
         * name    
         * type     
         * size                  * 
         * */
その他の方法:
//**FileReader*1、FileReaderのインスタンス*2を構築し、使用する読み取り方法を選択します.例えば:readAsta URL()は、ファイルオブジェクトをこの方法*3に渡し、傍受読み取り完了イベントonloadを作成し、this.resultを通じて読み取り結果*4、他のイベント傍受*読み取り方式を獲得します.テキストの読み込み*readAsBinaryString(file)はバイナリで***イベントを読みます.*onloadstartの読み取りが完了しました.*onloadstartの読み取りが開始されました.読み取りが成功しても、失敗しても、*onerrorエラーのトリガ*onabotの読み取りが中断された時に、*abort()読み取りの中断方法*/