使用js读取文本文件并渲染到页面中
引
网站改版后，需要重新设计详情长图，我需要以前老图的一些文案信息，就找后台人员要以前老图的地址，后台给我整理后给我了一些 txt 文本，里面是一大段代码，而且因为都是一些长图，图片都是切成好多块的小图拼在一起的，从数据库拿出来的字符串是好多 img 标签连在一起的。
我需要把所有小图复制到 ps 里合并成长图后，再参考上面的文字信息，重新设计长图。
想法
一开始，我是把后缀名改成 .html，直接在浏览器渲染，但是直接渲染出来，并不理想。
图片出来有时候会乱掉，还需要进去写一些 css 样式进行调整，才会出来一整个长图，而且每个 txt 文件还要手动改后缀，还是不太理想。
而且由于 txt 文件和要改的图比较多，最终还是决定写个脚本，毕竟提高效率后，才有时间摸鱼嘛。
思路
因为是 txt 文件，所以我当时的想法是，通过点击上传该文件，然后获取文件里的内容，再把内容渲染到页面中显示出来。
这样我就不用去复制每个小图到 ps 里再合并成长图，可以在页面中直接截一个长图复制到 ps 里就可以了，一步到位。
解决方案
步骤一：先写一个静态页面，可以上传文件，以及渲染显示图片的位置。
界面：
HTML代码：
<body style="background-color: #e8e8e8;">
<input type="file" name="file" id="file">
<h4>图片：h4>
<div id='read'>div>
body>
步骤二：当上传了文件后，读取文件里的内容，并打印出来。
这里主要使用 FileReader() 在 js 里去读取本地文件。
JS代码：
<script>
// 获取文件选择框DOM元素
var fileInput = document.getElementById('file');
// 当文件选择框的值发生变化时
fileInput.addEventListener('change', function() {
// 获取选择的文件对象
var file = fileInput.files[0];
// 创建一个FileReader对象
var reader = new FileReader();
// 当文件读取完成时
reader.onload = function() {
// 获取文件内容
var fileContent = reader.result;
console.log(fileContent);
};
// 读取文件内容
reader.readAsText(file);
});
</script>
打印结果：
步骤三：检查打印结果，看是否读取到了文本里的内容，然后将读取到的内容渲染到页面中去就可以了。
上面的打印结果说明我已经成功读取到了文本里的内容，我就可以将其渲染到页面中去了。
这里主要使用 innerHTML 将文本内容转成 html 标签，然后插入到图片要显示的地方去。
JS代码：
<script>
// 获取文件选择框和文件内容输出框的DOM元素
var fileInput = document.getElementById('file');
// 当文件选择框的值发生变化时
fileInput.addEventListener('change', function() {
// 获取选择的文件对象
var file = fileInput.files[0];
// 创建一个FileReader对象
var reader = new FileReader();
// 当文件读取完成时
reader.onload = function() {
// 获取文件内容
var fileContent = reader.result;
console.log(fileContent);
// 调用渲染方法
txtContent(fileContent);
};
// 读取文件内容
reader.readAsText(file);
});
function txtContent(f){
// 将文本转成html标签并渲染
document.getElementById('read').innerHTML = f;
}
</script>
页面渲染结果：
页面渲染成功，但这里有一个小问题，每个小图之间都有一点空隙，这是因为 img 标签是行内元素，以基线对齐。
给它的父元素加上 font-size: 0; 的样式，就可以了。
这样空隙就没有了，到这里这个脚本就成功了，我又有时间可以摸鱼了。
完整代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染长图title>
head>
<body style="background-color: #e8e8e8;">
<input type="file" name="file" id="file">
<h4>图片：h4>
<div id='read' style="font-size: 0;">div>
body>
<script>
// 获取文件选择框和文件内容输出框的DOM元素
var fileInput = document.getElementById('file');
// 当文件选择框的值发生变化时
fileInput.addEventListener('change', function() {
// 获取选择的文件对象
var file = fileInput.files[0];
// 创建一个FileReader对象
var reader = new FileReader();
// 当文件读取完成时
reader.onload = function() {
// 获取文件内容
var fileContent = reader.result;
console.log(fileContent);
// 调用渲染方法
txtContent(fileContent);
};
// 读取文件内容
reader.readAsText(file);
});
function txtContent(f){
// 将文本转成html标签并渲染
document.getElementById('read').innerHTML = f;
}
script>
html>
[1] 原文阅读
我是 Just，听说长的好看的都关注订阅号[ 设计师工作日常 ]了！skr~ skr~