标签: FileReader - Lmango

JavaScript上传TXT文件并预览

2019-05-13 2 分钟读完 (大约 266 个字)

js实现txt文件预览(支持各种编码格式)

# txtPreview.js
# 引入jschardet获取文件编码
import jschardet from 'jschardet'

##
 # 获取文件的encoding码
 # @param {Object File} file input上传的txt文件
 # @return {String} encoding 返回文件的编码格式
 #
function checkEncoding (file) {
    return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.readAsDataURL(file)  # 获取txt文件的base64码
        reader.onload = function (e) {
            let base64Str = reader.result
            let str = atob(base64Str.split(';base64,')[1])
            let encoding = jschardet.detect(str)  # 通过jschardet获取txt文件对应的编码格式
            encoding = encoding.encoding
            if (encoding === 'window-1252') {
                encoding = 'ANSI'
            }
            resolve(encoding)
        }
    })
}
##
 # 返回file内容
 # @param {Object File} file input上传的txt文件
 # @return {String} 返回txt文件的内容
 #
const txtPreview = (file) => {
    return new Promise((resolve, reject) => {
        checkEncoding(file).then(encoding => {
            let reader = new FileReader()
            reader.readAsText(file, encoding)  # 通过txt文件编码格式获取文件内容（字符串形式）
            reader.onloadend = function (e) {
                resolve(reader.result)
            }
        })
    })
}
export default txtPreview

HTML代码

<html>
<body>
    <form>
        <input type="file" id="files" name="files"/>
    </form>
    <div id="resText" style="word-wrap: break-word; white-space: divpre-wrap;"></div>
    <script>
        import txtPreview from './txtPreview.js'
        document.getElementById('files').addEventListener('change', handleFileSelect, false);
        function handleFileSelect(e) {
            let file = e.target.files[0]
            txtPreview(file).then(res => {
                document.getElementById("resText").innerHTML = res;
            })
        }
    </script>
</body>
</html>