HS实现txt文件上传预览
这次给大家带来HS实现txt文件上传预览，HS实现txt文件上传预览的注意事项有哪些，下面就是实战案例，一起来看一下。
今天做项目刚好碰到这个记录一下。因为是简单的txt文件，只涉及文本，如果需要涉及图片预览就需要使用papaparse和jschardet，此处不多叙述。
表单按钮使用js的onchange=”uploadfile()” 事件，function函数代码如下所示：
//此处为txt文件上传预览的js代码
function uploadfile(){
var file=$("#txt")[0].files[0];
//判断上传文件是不是txt格式,判断后缀是不是.txt
if(file.name.substr(-4).toLocaleLowerCase() != '.txt'){
alert("请上传格式为txt的文件！");
windows.location="test.jsp";//重新定位到上传txt文件页面
}
else//如果上传文件是txt文件，则显示文件的预览
{
var reader=new FileReader;
reader.readAsText(file,'gb2312');
//reader.readAsDataURL(file);
reader.onload=function(evt){
var data=evt.target.result;
$('#textarea_id').val(data);
}
}
}效果如下：
提示上传文件类型错误
补充：
js 上传文件预览
1. FILE API
html5提供了FIle和FileReader两个方法，可以读取文件信息并读取文件。
2. example
<html>
<body>
<p id="test-image-preview"
style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;"> </p>
<br/>
<p id="test-file-info"></p>
<br/>
<input type="file" id="test-image-file">
<script type="text/javascript">
var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
// 清除背景图片:
preview.style.backgroundImage = '';
// 检查文件是否选择:
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
}
// 获取File引用:
var file = fileInput.files[0];
// 获取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' +
'大小: ' + file.size + '<br>' +
'修改: ' + file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的图片文件!');
return;
}
// 读取文件:
var reader = new FileReader();
reader.onload = function(e) {
var
data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
});
</script>
</body>
</html>以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...，
常用于设置图像。如果需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。
3. 解释
上面的代码还演示了JavaScript的一个重要的特性就是单线程执行模式。在JavaScript中，浏览器的JavaScript执行引擎在执行JavaScript代码时，总是以单线程模式执行，也就是说，任何时候，JavaScript代码都不可能同时有多于1个线程在执行。
你可能会问，单线程模式执行的JavaScript，如何处理多任务？
在JavaScript中，执行多任务实际上都是异步调用，比如上面的代码：
reader.readAsDataURL(file);
就会发起一个异步操作来读取文件内容。因为是异步操作，所以我们在JavaScript代码中就不知道什么时候操作结束，因此需要先设置一个回调函数：
reader.onload = function(e) {
// 当文件读取完成后，自动调用此函数:
};当文件读取完成后，JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时，文件已经读取完毕，所以我们可以在回调函数内部安全地获得文件内容。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是HS实现txt文件上传预览的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
微信文件过期怎么恢复 微信的过期文件能恢复吗
Feb 22, 2024 pm 02:46 PM
打开微信，在我中选择设置，选择通用后选择存储空间，在存储空间选择管理，选择要恢复文件的对话选择感叹号图标。教程适用型号：iPhone13系统：iOS15.3版本：微信8.0.24解析1首先打开微信，在我的页面中点击设置选项。2接着在设置页面中找到并点击通用选项。3然后在通用页面中点击存储空间。4接下来在存储空间页面中点击管理。5最后选择要恢复文件的对话，点击右侧的感叹号图标。补充：微信文件一般几天过期1要是微信接收的文件并没有点开过的情况下，那在七十二钟头之后微信系统会清除掉，要是己经查看了微信
照片无法打开此文件，因为格式不受支持或文件已损坏
Feb 22, 2024 am 09:49 AM
在Windows系统中，照片应用是一个便捷的方式来查看和管理照片和视频。通过这个应用程序，用户可以轻松访问他们的多媒体文件，而无需安装额外的软件。然而，有时候用户可能会碰到一些问题，比如在使用照片应用时遇到“无法打开此文件，因为不支持该格式”的错误提示，或者在尝试打开照片或视频时出现文件损坏的问题。这种情况可能会让用户感到困惑和不便，需要进行一些调查和修复来解决这些问题。当用户尝试在Photos应用程序上打开照片或视频时，会看到以下错误。抱歉，照片无法打开此文件，因为当前不支持该格式，或者该文件
在Windows 11/10中，准备删除要花费很长时间
Feb 19, 2024 pm 07:42 PM
在本文中，我们将介绍如何解决在Windows系统中删除文件或文件夹时出现“准备删除”提示的问题。这个提示意味着系统正在进行一些后台操作，如检查文件权限、验证文件是否被其他程序占用、计算要删除项目的大小等。我们将为您提供一些解决方法，以确保您能够顺利删除文件，而无需等待太长时间。为什么Windows要花这么长时间才能删除文件？Windows准备删除文件所需的时间受多种因素影响，包括文件大小、存储设备速度和后台进程。长时间或被卡住的“正在准备删除”提示可能暗示系统资源不足、磁盘错误或文件系统问题。在
如何安装GHO文件
Feb 19, 2024 pm 10:06 PM
gho文件是一种GhostImage影像文件，它通常用于将整个硬盘或分区的数据备份成一个文件。在一些特定的情况下，我们需要将这种gho文件重新安装回硬盘上，以还原硬盘或分区到先前的状态。下面将介绍gho文件的安装方法。首先，在安装之前，我们需要准备以下工具和材料：实体的gho文件：确保你拥有一份完整的gho文件，它通常以.gho为后缀名，并且包含有备份
可以删除Tmp格式文件吗？
Feb 24, 2024 pm 04:33 PM
Tmp格式文件是一种临时文件格式，通常由计算机系统或程序在执行过程中生成。这些文件的目的是存储临时数据，以帮助程序正常运行或提高性能。一旦程序执行完成或计算机重启，这些tmp文件往往就没有了存在的必要性。所以，对于Tmp格式文件来说，它们本质上是可以删除的。而且，删除这些tmp文件能够释放硬盘空间，确保计算机的正常运行。但是，在删除Tmp格式文件之前，我们需
出现0x80004005错误代码怎么办 小编教你0x80004005错误代码解决方法
Mar 21, 2024 pm 09:17 PM
在电脑中删除或解压缩文件夹，时有时候会弹出提示对话框“错误0x80004005：未指定错误”，如果遇到这中情况应该怎么解决呢？提示错误代码0x80004005的原因其实有很多，但大部分因为病毒导致，我们可以重新注册dll来解决问题，下面，小编给大伙讲解0x80004005错误代码处理经验。有用户在使用电脑时出现错误代码0X80004005的提示，0x80004005错误主要是由于计算机没有正确注册某些动态链接库文件，或者计算机与Internet之间存在不允许的HTTPS连接防火墙所引起。那么如何
斜杠和反斜杠在文件路径中的不同使用
Feb 26, 2024 pm 04:36 PM
文件路径是操作系统中用于识别和定位文件或文件夹的字符串。在文件路径中，常见的有两种符号分隔路径，即正斜杠（/）和反斜杠（）。这两个符号在不同的操作系统中有不同的使用方式和含义。正斜杠（/）是Unix和Linux系统中常用的路径分隔符。在这些系统中，文件路径是以根目录（/）为起始点，每个目录之间使用正斜杠进行分隔。例如，路径/home/user/Docume
如何一次将所有OneDrive文件下载到PC
Feb 19, 2024 pm 06:51 PM
本文将教您如何一次性将所有OneDrive文件下载到您的PC。OneDrive是一个强大的云存储平台，方便用户随时随地访问其文件。有时，用户可能需要在本地备份文件或离线访问。继续阅读以了解如何轻松完成这一操作。如何一次将所有OneDrive文件下载到PC？按照以下步骤一次性将所有OneDrive文件下载到您的WindowsPC：启动Onedrive并导航到我的文件。在OneDrive上上传的所有文件都将在此处提供。按CTRL+A选择所有文件，或选中复选框中所有项目的切换选择。单击顶部的下载选项，
