Home > Article > Web Front-end > JavaScript implements the upload and preview function of txt files

JavaScript implements the upload and preview function of txt files

小云云Original: 2018-03-28 09:07:592776browse

I happened to come across this record while working on a project today. Because it is a simple txt file, it only involves text. If you need to preview images, you need to use papaparse and jschardet. There is not much description here.

The form button uses the onchange="uploadfile()" event of js. The function function code is as follows:

//此处为txt文件上传预览的js代码
function uploadfile(){
 var file=$("#txt")[0].files[0];
 //判断上传文件是不是txt格式,判断后缀是不是.txt
 if(file.name.substr(-4).toLocaleLowerCase() != &#39;.txt&#39;){
  alert("请上传格式为txt的文件！");
  windows.location="test.jsp";//重新定位到上传txt文件页面
 }
 else//如果上传文件是txt文件，则显示文件的预览
 {
  var reader=new FileReader;
  reader.readAsText(file,&#39;gb2312&#39;);
  //reader.readAsDataURL(file);
  reader.onload=function(evt){
   var data=evt.target.result;  
   $(&#39;#textarea_id&#39;).val(data); 
  } 
 } 
}

Effect As follows:

JavaScript implements the upload and preview function of txt files

##Prompt for uploading file type error

Supplement:

js Upload file preview

1. FILE API

HTML5 provides two methods, FIle and FileReader, to read files information and read the file.

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(&#39;test-image-file&#39;),
 info = document.getElementById(&#39;test-file-info&#39;),
 preview = document.getElementById(&#39;test-image-preview&#39;);
// 监听change事件:
fileInput.addEventListener(&#39;change&#39;, function () {
 // 清除背景图片:
 preview.style.backgroundImage = &#39;&#39;;
 // 检查文件是否选择:
 if (!fileInput.value) {
  info.innerHTML = &#39;没有选择文件&#39;;
  return;
 }
 // 获取File引用:
 var file = fileInput.files[0];
 // 获取File信息:
 info.innerHTML = &#39;文件: &#39; + file.name + &#39;<br>&#39; +
      &#39;大小: &#39; + file.size + &#39;<br>&#39; +
      &#39;修改: &#39; + file.lastModifiedDate;
 if (file.type !== &#39;image/jpeg&#39; && file.type !== &#39;image/png&#39; && file.type !== &#39;image/gif&#39;) {
  alert(&#39;不是有效的图片文件!&#39;);
  return;
 }
 // 读取文件:
 var reader = new FileReader();
 reader.onload = function(e) {
  var
   data = e.target.result; // &#39;data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...&#39;   
  preview.style.backgroundImage = &#39;url(&#39; + data + &#39;)&#39;;
 };
 // 以DataURL的形式读取文件:
 reader.readAsDataURL(file);
});
</script>
</body>
</html>

The file read in the form of DataURL is a string, similar to data:image /jpeg;base64,/9j/4AAQSk...(base64 encoding)...,

is often used to set images. If server-side processing is required, send the string base64 and subsequent characters to the server and use Base64 decoding to obtain the binary content of the original file.

3. Explanation

The above code also demonstrates an important feature of JavaScript which is the single-threaded execution mode. In JavaScript, the browser's JavaScript execution engine always executes in single-threaded mode when executing JavaScript code. That is to say, JavaScript code cannot be executed by more than one thread at the same time at any time.

You may ask, how does JavaScript executed in single-threaded mode handle multitasking?

In JavaScript, multitasking is actually asynchronous call, such as the above code:

reader.readAsDataURL(file);

An asynchronous operation will be initiated to read the file contents. Because it is an asynchronous operation, we do not know when the operation ends in the JavaScript code, so we need to set a callback function first:

reader.onload = function(e) {
 // 当文件读取完成后，自动调用此函数:
};

When the file reading is completed, The JavaScript engine will automatically call the callback function we set. When the callback function is executed, the file has already been read, so we can safely obtain the file contents inside the callback function.

Related recommendations:

js code for uploading and previewing txt files

Example of method for PHP to read txt files line by line

#php example of adding content to a txt file

The above is the detailed content of JavaScript implements the upload and preview function of txt files. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to apply and Math.max() functions in jsNext article：Introduction to apply and Math.max() functions in js

See more

JavaScript implements the upload and preview function of txt files

Related articles