欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2018年03月27日 10:52:28   作者：潛力股wjk  
本篇文章給大家介紹了JavaScript代碼實現(xiàn)txt文件的上傳預覽功能，文字代碼相結(jié)合的形式給大家介紹的非常詳細，需要的朋友參考下吧

今天做項目剛好碰到這個記錄一下。因為是簡單的txt文件，只涉及文本，如果需要涉及圖片預覽就需要使用papaparse和jschardet，此處不多敘述。

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

//此處為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>
<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的形式讀取到的文件是一個字符串，類似于data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...，

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

3. 解釋

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

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

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

reader.readAsDataURL(file);

就會發(fā)起一個異步操作來讀取文件內(nèi)容。因為是異步操作，所以我們在JavaScript代碼中就不知道什么時候操作結(jié)束，因此需要先設置一個回調(diào)函數(shù)：

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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

最新評論