html 5新属性previewFile

FileReaderインタフェースのメソッドFileReaderインタフェースには4つのメソッドがあり、そのうち3つはローカルファイルの読み取りに使用され、もう1つは読み取りを中断するために使用されます.読み取りに成功しても失敗しても、メソッドは読み取り結果を返さず、resultプロパティに格納されます.FileReaderインタフェースの方法
メソッド名
パラメータ
説明
readAsBinaryString
file
ファイルをバイナリエンコーディングとして読み込む
readAsText
file,[encoding]
ファイルをテキストとして読み込む
readAsDataURL
file
データURLとしてファイルを読み込む
abort
(none)
端末読取操作
アップロードしたファイルのサイズとサイズを読み込む
demoアドレスhtml

js

function previewFile(targetInput){
    console.log(targetInput.files[0].size / (1024*2)+'M=================>')
    console.log(targetInput.value)   
    var reader = new FileReader(); 
    reader.addEventListener("load", function () {
         //                   
         var image = new Image();    
         image.onload=function(event){    
             var width = image.width;    
             var height = image.height;    
             console.log(event)
             console.log(width)
             console.log(height) 
         };    
         image.src= reader.result;
      }, false);
      reader.readAsDataURL(targetInput.files[0]); 
}