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

發(fā)布時(shí)間：2021-07-09 15:08:49 來(lái)源：億速云閱讀：251 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下JavaScript如何實(shí)現(xiàn)txt文件上傳預(yù)覽功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

今天做項(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); 
  } 
 } 
}

效果如下：

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

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

補(bǔ)充：

js 上傳文件預(yù)覽

1. FILE API

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

2. example

<html>
<body>
<div id="test-image-preview" 
> </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)聽(tīng)change事件:
fileInput.addEventListener('change', function () {
 // 清除背景圖片:
 preview.style.backgroundImage = '';
 // 檢查文件是否選擇:
 if (!fileInput.value) {
  info.innerHTML = '沒(méi)有選擇文件';
  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è)字符串，類(lèi)似于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í)行，也就是說(shuō)，任何時(shí)候，JavaScript代碼都不可能同時(shí)有多于1個(gè)線程在執(zhí)行。

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

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

reader.readAsDataURL(file);

就會(huì)發(fā)起一個(gè)異步操作來(lái)讀取文件內(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)容。

以上是“JavaScript如何實(shí)現(xiàn)txt文件上傳預(yù)覽功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽