今天的项目正好符合这个记录。因为是简单的txt文件，所以只涉及文本。如果需要预览图片，需要使用papaparse和jschardet，这里不做介绍。

表单按钮使用js的onchange="uploadfile()"事件，功能代码如下：

//这里是js代码函数upload file(){ var file=$(' # txt ')[0]。文件[0]；//确定上传的文件是否为txt格式，后缀是否为。TXTIF (file.name.substr (-4))。tolocallowercase()！='.txt'){ alert('请上传一个txt格式的文件！');windows . location=' test . JSP '；//重定位到上传txt文件的页面} else//如果上传的文件是txt文件，会显示文件预览{ var reader=new FileReaderreader.readAsText(文件，' GB 2312 ')；//reader.readAsDataURL(文件)；reader . onload=function(evt){ var data=evt . target . result；$('#textarea_id ')。val(数据)；}}}效果如下：

提示上传文件类型错误

补充：

Js上传文件预览

1.文件应用编程接口

Html5提供了FIle和FileReader两种方法，可以读取文件信息和读取文件。

2.例子

html bodydiv id=' test-image-preview ' style=' border : 1px纯色rgb(204，204，204)；宽度： 100%；高度： 200 px；背景尺寸：容器；背景-重复：不重复；背景-位置：中心；中心/div br/div id=' test-file-info '/div br/input type=' file ' id=' test-image-file ' script type=' text/JavaScript ' var file input=document . getelementbyid(' test-image-file ')，info=document . getelementbyid(' test-image-preview ')，preview=document . getelementbyid(' test-image-preview ')；//收听更改事件： fileinput。addeventlistener ('change '，function(){//清除背景图片：预览。风格。backgroundimage=//检查：是否if(！文件输入。值){info。innerhtml=“未选择文件”；返回；}//获取文件引用： var File=File input . files[0]；//获取文件信息： info . innerhtml=' File : ' File . name ' br ' ' size : ' File . size ' br ' '修改： ' file.lastModifiedDateif (file.type！=='image/jpeg '文件. type！=='image/png '文件，类型！=='image/gif') {alert('不是有效的图片文件！');返回；}//读取文件： var reader=new FileReader()；reader . onload=function(e){ var data=e . target . result；//' data : image/JPEG；Base64，/9j/4AAQSk.(base64编码) .preview . style . background image=' URL(' data ')'；};//读取DataURL形式的文件：reader.readasDataURL(文件)；});/script/body/html以DataURL形式读取的文件是一个字符串，类似于data : image/JPEG；Base64，/9j/4AAQSk.(base64编码).

常用于设置图像。如果需要服务器端处理，可以通过将字符串base64和以下字符发送到服务器并用Base64解码来获得原始文件的二进制内容。

3.解释

上面的代码还演示了JavaScript的一个重要特性是单线程执行模式。在JavaScript中，浏览器的JavaScript执行引擎总是以单线程的方式执行JavaScript代码，这意味着不可能在任何时候都有多个线程在执行JavaScript代码。

你可能会问，单线程模式下执行的JavaScript是如何处理多任务的？

在JavaScript中，多任务实际上是一个异步调用，例如上面的代码：

reader.readAsDataURL(文件)；

启动异步操作来读取文件的内容。因为是异步操作，所以在JavaScript代码中不知道操作什么时候结束，所以需要先设置一个回调函数：

Reader.onload=函数(e) {//读取文件后自动调用此函数： }；当文件被读取时，JavaScript引擎会自动调用我们的回调函数。回调函数执行时，文件已经被读取，所以我们可以在回调函数内部安全地获取文件的内容。

摘要

以上是边肖介绍的实现txt文件上传预览功能的JavaScript代码，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！