读取上传文件内容

读取上传文件内容

input 控件上传

<input type="file" name ="fileName" id = "htmlFileId" multiple/>
<button type="button" id="htmlFile" onclick="uploadHTMLFile()">预览文件</button>

核心代码

let reader = new FileReader();
reader.readAsText(files[i], "UTF-8");//读取文件
reader.onload = function (evt) { //读取完文件之后会回来这里 这是个异步
    var fileString = evt.target.result; // 读取文件内容
    console.log('fileString')
}

例子

function uploadHTMLFile() {
    console.log('uploadHtmlFile');
    var objFile = document.getElementById("htmlFileId");
    if(objFile.value == "") {
        layer.msg('请选择需要上传的HTML文件',{time: 1000});
    }else {
        console.log(objFile.files[0].size); // 文件字节数
        var files = $('#htmlFileId').prop('files');//获取到文件列表
        if(files.length == 0){
            alert('请选择文件');
        }else {
            // 清空元素
            for (let i = 0; i < files.length; i++){
                let reader = new FileReader();
                reader.readAsText(files[i], "UTF-8");//读取文件
                reader.onload = function (evt) { //读取完文件之后会回来这里 这是个异步
                    var fileString = evt.target.result; // 读取文件内容
                    console.log('fileString')
                    // 追加文本域元素
                    $("#htmlContent").append("<span id=\"htmlFileName\">"+ files[i].name +"</span><textarea id=\"htmlTextArea"+ i +"\" placeholder=\"请输入专题描述\" lay-verify=\"required\" name=\"htmlTextArea"+i+"\"  class=\"layui-textarea\" style='margin-bottom: 10px'></textarea>")
                    // 将读取内容放进文本域中,进行展示
                    $("#htmlTextArea"+ i +"").val(htmlDecodeByRegExp(fileString));
                }
            }
        }
    }
}
// 处理文本内容
function htmlDecodeByRegExp(str) {
    var temp = "";
    if (str.length == 0) return "";
    temp = str.replace(/&amp;/g, "&");
    temp = temp.replace(/&lt;/g, "<");
    temp = temp.replace(/&gt;/g, ">");
    temp = temp.replace(/&nbsp;/g, " ");
    temp = temp.replace(/&#39;/g, "\'");
    temp = temp.replace(/&quot;/g, "\"");
    temp = temp.replace(/<brbr\/>/g,"\r\n");
    return temp;
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值