快捷導(dǎo)航

JavaScript代碼實(shí)現(xiàn)txt文件的上傳預(yù)覽功能

更新時(shí)間：2018年03月27日 10:52:28 作者：潛力股wjk

本篇文章給大家介紹了JavaScript代碼實(shí)現(xiàn)txt文件的上傳預(yù)覽功能，文字代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友參考下吧

今天做項(xiàng)目剛好碰到這個(gè)記錄一下。因?yàn)槭呛?jiǎn)單的txt文件，只涉及文本，如果需要涉及圖片預(yù)覽就需要使用papaparse和jschardet，此處不多敘述。

表單按鈕使用js的onchange=”uploadfile()” 事件，function函數(shù)代碼如下所示：

//此處為txt文件上傳預(yù)覽的js代碼
function uploadfile(){
 var file=$("#txt")[0].files[0];
 //判斷上傳文件是不是txt格式,判斷后綴是不是.txt
 if(file.name.substr(-4).toLocaleLowerCase() != '.txt'){
  alert("請(qǐng)上傳格式為txt的文件！");
  windows.location="test.jsp";//重新定位到上傳txt文件頁(yè)面
 }
 else//如果上傳文件是txt文件，則顯示文件的預(yù)覽
 {
  var reader=new FileReader;
  reader.readAsText(file,'gb2312');
  //reader.readAsDataURL(file);
  reader.onload=function(evt){
   var data=evt.target.result;  
   $('#textarea_id').val(data); 
  } 
 } 
}

效果如下：

提示上傳文件類型錯(cuò)誤
這里寫圖片描述

提示上傳文件類型錯(cuò)誤

補(bǔ)充：

js 上傳文件預(yù)覽

1. FILE API

html5提供了FIle和FileReader兩個(gè)方法，可以讀取文件信息并讀取文件。

2. example

<html>
<body>
<div 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;"> </div>
<br/>
<div id="test-file-info"></div>
<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');
// 監(jiān)聽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的形式讀取到的文件是一個(gè)字符串，類似于data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...，

常用于設(shè)置圖像。如果需要服務(wù)器端處理，把字符串base64,后面的字符發(fā)送給服務(wù)器并用Base64解碼就可以得到原始文件的二進(jìn)制內(nèi)容。

3. 解釋

上面的代碼還演示了JavaScript的一個(gè)重要的特性就是單線程執(zhí)行模式。在JavaScript中，瀏覽器的JavaScript執(zhí)行引擎在執(zhí)行JavaScript代碼時(shí)，總是以單線程模式執(zhí)行，也就是說，任何時(shí)候，JavaScript代碼都不可能同時(shí)有多于1個(gè)線程在執(zhí)行。

你可能會(huì)問，單線程模式執(zhí)行的JavaScript，如何處理多任務(wù)？

在JavaScript中，執(zhí)行多任務(wù)實(shí)際上都是異步調(diào)用，比如上面的代碼：

reader.readAsDataURL(file);

就會(huì)發(fā)起一個(gè)異步操作來讀取文件內(nèi)容。因?yàn)槭钱惒讲僮?，所以我們?cè)贘avaScript代碼中就不知道什么時(shí)候操作結(jié)束，因此需要先設(shè)置一個(gè)回調(diào)函數(shù)：

reader.onload = function(e) {
 // 當(dāng)文件讀取完成后，自動(dòng)調(diào)用此函數(shù):
};

當(dāng)文件讀取完成后，JavaScript引擎將自動(dòng)調(diào)用我們?cè)O(shè)置的回調(diào)函數(shù)。執(zhí)行回調(diào)函數(shù)時(shí)，文件已經(jīng)讀取完畢，所以我們可以在回調(diào)函數(shù)內(nèi)部安全地獲得文件內(nèi)容。

總結(jié)

以上所述是小編給大家介紹的JavaScript代碼實(shí)現(xiàn)txt文件的上傳預(yù)覽功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: