瀏覽器端怎么載入本地文件？

• 首先要創(chuàng)造一個input元素，click它觸發(fā)選擇文件的彈窗
• 然后給它一個監(jiān)聽，選擇文件change的時候執(zhí)行觸發(fā)動作
• 觸發(fā)動作使用FileReader讀取文件，再觸發(fā)讀取成功后的內(nèi)容操作

主要代碼

let file_input = document.createElement('input')
        file_input.setAttribute('accept', ".mdr")
        file_input.addEventListener("change", (evt) => {
            let f = evt.target.files ? evt.target.files[0] : null
            if (!f) return
            var reader = new FileReader()
            reader.onload = function (e) {
                var contents = e.target.result
                var xobj = null
                try {
                    xobj = JSON.parse(contents)
                    console.log('xobj', xobj)
                } catch (err) {
                    console.log('>LoadRules:ERR:', err.message)
                }
                if (xobj) {
                    that.setState({
                        xobj: xobj
                    })
                }            
            }
            reader.readAsText(f);
        }, false)
        file_input.type = 'file'
        file_input.click()

注意，雖然設(shè)置了accept屬性限定文件類型，但有時候沒有作用
JSON.parse可能異常，需要做try捕捉

致力于讓一切變得簡單

如果您發(fā)現(xiàn)文章錯誤，請不吝留言指正；
如果您覺得有用，請點(diǎn)喜歡；
如果您覺得很有用，歡迎轉(zhuǎn)載~

END