首先，body里寫入一個文件輸入框：

        <!--multiple  允許選擇多個文件，添加即為true-->
        <input type="file" name="myFile" id="myFile" value="" multiple="multiple"/>

然后在JS中獲取到這個標簽，監(jiān)聽它的onchang事件來讀取文件（以讀取文件路徑為例）：

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);
                }
            }
            
        }

下面一下參數(shù)的含義以及其他的方法：

 File  對象
         * lastModified  最后一次修改事件(毫秒數(shù))
         * lastModifiedDate  最后一次修改日期
         * name 文件名
         * type 文件類型
         * size 文件大小             * 
         * */

其他方法:

/**
* FileReader
* 1、構(gòu)建FileReader實例
* 2、選擇要使用的讀取方式，如：readAsDataURL(),將文件對象傳遞給該方法
* 3、監(jiān)聽讀取完成事件 onload,通過 this.result 得到讀取結(jié)果
* 4、其他事件監(jiān)聽
*
* 讀取方式:
* readAsDataURL(file) 讀取地址
* readAsText(file[,encoding]) 讀取文本
* readAsBinaryString(file) 以二進制讀取
*
* 事件:
* onload 讀取完成
* onloadstart 開始讀取
* onloadend 結(jié)束讀取 無論成功與否都會觸發(fā)
* onerror 錯誤觸發(fā)
* onabort 中斷讀取時觸發(fā)
*
* abort() 中斷讀取方法
* */