學習File API用于前端讀取文件

1. File API簡介

File API對于某些專門的網站的不可或缺的。現在常用它實現對文件的預覽等功能。

File API規定怎么從硬盤上提取文件,直接交給在網頁中運行中的Javascript代碼。然后代碼可以打開文件探究數據,無論是本地文件還是其他文件。注意,關鍵在于文件會被直接交給JavaScript代碼,它并不能修改文件,也不能創建新文件,想要保存任何數據,需要將數據發送到服務器或者保存在本地存儲空間中。

2. 讀取文件

在通過File API操作文件之前,首先必須取得文件。使用File API可以直接讀取文本文件的內容。
例如:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>文件上傳</title><style>#fileOutput {border:1px grey solid;width: 500px;}</style>
</head>
<body><input type="file" id="fileInput" onChange="processFiles(this.files)"><div id="fileOutput"></div>
<script>function processFiles(files) {//每個文件對象都有三個有用的屬性:name屬性保存文件名,size屬性保存文件的字節大小,type保存文件的MEMI類型var file = files[0];//創建FileReader對象,var reader = new FileReader();//FileReader用來提取文件內容,但是這個方法是異步的,要提取文件,首先要處理onLoad事件reader.onload = function(e) {//這個事件發生了,意味著數據準備好了,//把它復制到頁面的div元素中var output = document.getElementById("fileOutput");//將文件內容轉換成一個長字符串,保存在onload事件的e.target.result中output.textContent = e.target.result;};//調用FileReader的readAsText()方法reader.readAsText(file);}
</script>
</body>
</html>

這里寫圖片描述
上圖中,選擇一個文件,無需上傳,網頁中的javascript代碼就能取得文本文件,把內容復制到頁面中。

readAsText()方法只能處理文本內容的文件,如CSV格式,XML格式,.docx格式和.xlsx格式的文件。
readAsText()方法只是眾多讀取文件的方法之一,還有readAsBinaryStrng(),readAsDataURL()和readAsArrayBuffer().

  • readAsBinaryStrng()方法可以讓應用處理二進制編碼的數據,但基本上就是把數據保存在一個文本字符串中,效率不高。
  • readAsArrayBuffer()是對于做數據處理較好的選擇,這個方法將數據讀到一個數組中,每個數組項代表一字節數據。這套方案的優勢是可以用來創建大塊數據,然后切分成更小的二進制數據塊,以便逐塊處理。
  • readAsDataURL()方法則讓我們能方便地取到圖片數據。

2.1 一次讀取多個文件

HTML5也支持一次提交多個文件,只要為<input>元素添加multiple屬性即可:

<input type="file" id="Files" name="files[]" multiple />  
<div id="Lists"></div>  
function fileSelect(e) {  e = e || window.event;  var files = e.target.files;  //FileList Objects      var output = [];  for(var i = 0, f; f = files[i]; i++) {  output.push('<li><strong>' + f.name + '</strong>(' + f.type + ') - ' + f.size +' bytes</li>');  }  document.getElementById('Lists').innerHTML = '<ul>' + output.join('') + '</ul>';  }  if(window.File && window.FileList && window.FileReader && window.Blob) {  document.getElementById('Files').addEventListener('change', fileSelect, false);  
} else {  document.write('您的瀏覽器不支持File Api');  
}  

由以上代碼可以看到,html5為file這個dom元素新增了files接口(e.target指向了file input元素,實際上也可以用this來訪問,即this.files),得到的就是FileList,通過遍歷該集合,即可訪問到各個已選擇的文件對象。

2.2 通過拖拽讀取圖片文件

前面我們看到,FileReader處理文本內容只需要一步,同樣,處理圖片內容也這么簡單,而這就要歸功于readAsDataURL()方法。
下面的例子中,讓用戶把圖片拖到頁面中,然后在圖片上繪制。

下面是HTML和css代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>拖拽圖片</title><style>#dropBox {margin: 15px;width: 300px;height: 300px;border:5px dashed grey;border-radius: 8px;background: lightyellow;background-size: 100%;background-repeat: no-repeat;text-align: center;}#dropBox div{margin: 100px 70px;color: orange;font-size: 25px;}</style>
</head><body><div id="dropBox"><div>將你的圖片拖到此處</div></div>
</body>
</html>

為處理放置文件的操作,需要處理三個事件:onDragEnter、onDragOver、onDrop。頁面一加載完成,就會為這三個事件添加處理程序。

var dropBox;
window.onload = function() {dropBox = document.getElementById("dropBox");dropBox.ondragenter = ignoreDrag;dropBox.ondragover = ignoreDrag;dropBox.ondrop = drop;
}

其中,ignoreDrag()函數同時處理onDragEnter和onDragOver事件,前者在鼠標指針進入放置區時發生,后者在拖動文件的鼠標指針位于放置區之上時發生。之所以用同一個函數處理兩個事件,原因就是不必對這兩個事件作出反應,只要告訴瀏覽器自己什么也不做即可。

function ignoreDrag(e) {
//因為我們在處理拖放,所以應該確保沒有其他元素會取得這個事件e.stopPropagation();e.preventDefault();
}

我們要響應的事件是onDrop,這個事件一發生就說明要取得和處理文件了。

function drop(e) {//取消事件傳播及默認行為e.stopPropagation();e.preventDefault();//取得拖進來的文件var data = e.dataTransfer;var files = data.files;//將其傳給真正的處理文件的函數processFiles(files);
}function processFiles(files) {var file = files[0];//創建FileReadervar reader = new FileReader();//告訴它準備好數據URL之后做什么reader.onload = function(e) {dropBox.style.backgroundImage = "url('" + e.target.result + "')";};//讀取圖片:將圖片轉化為數據URLreader.readAsDataURL(file);
}

效果圖:
拖拽前:
這里寫圖片描述

拖拽后:
這里寫圖片描述

2.3 瀏覽器對File API的支持情況

這里寫圖片描述

更多內容請參考此處

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249689.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249689.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249689.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

kafka筆記1

Kafka是一款基于發布和訂閱的消息系統。一般被稱為分布式提交日志或分布式流平臺。 Kafka系統是按照一定的順序持久化保存的&#xff0c;可以按需讀取。 Kafka的數據單元被稱為消息。類似于數據庫中表的一行記錄&#xff0c;消息由字節組成&#xff0c;所以沒有特別的格式和含義…

Dubbo入門教程

服務端&#xff08;dubbo-server&#xff09; 1. pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaL…

NSAssert和NSParameterAssert

2016.05.05 18:34* 字數 861 閱讀 5127評論 0喜歡 17https://www.jianshu.com/p/3072e174554fNSAssert和NSParameterAssert在開發環境中經常被使用&#xff0c;調試和驗證代碼參數的完整性&#xff0c;斷言為真&#xff0c;則表明程序運行正常&#xff0c;而斷言為假&#xff0…

【PAT】B1070 結繩(25 分)

此題太給其他25分的題丟人了&#xff0c;只值15分 注意要求最終結果最長&#xff0c;而且向下取整 #include<stdio.h> #include<algorithm> using namespace std; float arr[10005]; int main(){int N;scanf("%d",&N);for(int i0;i<N;i)//輸入數據…

Java代碼實現負載均衡五種算法

前言&#xff1a; 負載均衡是為了解決并發情況下&#xff0c;多個請求訪問&#xff0c;把請求通過提前約定好的規則轉發給各個server。其中有好幾個種經典的算法。在用java代碼編寫這幾種算法之前&#xff0c;先來了解一下負載均衡這個概念。 1.概念 負載&#xff0c;從字面…

使用Nodejs發送郵件

嘗試用了Nodemailer來發送郵件&#xff0c;結果成功了&#xff0c;雖然是相對比較簡單的&#xff0c;但還是記錄一下吧。 Nodemailer 是 Node.js 應用程序的一個模塊&#xff0c;可以方便地發送電子郵件。 使用 # 初始化 pageage.json 文件 $ npm init # 安裝依賴 $ npm ins…

HTTP同源策略

同源策略是web安全策略中的一種&#xff0c;非常重要。 同源策略明確規定&#xff1a;不同域的客戶端在沒有明確授權的情況下&#xff0c;不能讀寫對方的資源。 簡單說來就是web瀏覽器允許第一個頁面的腳本訪問訪問第二個頁面的數據&#xff0c;但是也只有在兩個頁面有相同的…

Spring Cloud 微服務架構

一、分布式服務框架的發展 1.1 第一代服務框架   代表&#xff1a;Dubbo(Java)、Orleans(.Net)等 特點&#xff1a;和語言綁定緊密 1.2 第二代服務框架   代表&#xff1a;Spring Cloud等 現狀&#xff1a;適合混合式開發&#xff08;例如借助Steeltoe OSS可以讓ASP.Ne…

JZOJ 4421. aplusb

4421. aplusb Time Limits: 1000 ms Memory Limits: 524288 KB Detailed Limits Goto ProblemSetDescription SillyHook要給小朋友出題了&#xff0c;他想&#xff0c;對于初學者&#xff0c;第一題肯定是ab 啊&#xff0c;但當他出完數據后神奇地發現.in不見了&#xff0c…

跨域資源共享CORS詳解

最近深入了解了CORS的相關東西&#xff0c;覺得阮一峰老師的文章寫得最詳細易懂了&#xff0c;所有轉載作為學習筆記。 原文地址&#xff1a;跨域資源共享 CORS 詳解 CORS是W3C的一個標準&#xff0c;全稱是跨域資源共享&#xff08;Cross-origin resource sharing&#xff0…

計算機網絡(十),HTTP的關鍵問題

目錄 1.在瀏覽器地址欄鍵入URL&#xff0c;按下回車之后經歷的流程 2.HTTP狀態碼 3.GET請求和POST請求的區別 4.Cookie和Session的區別 5.IPV4和IPV6 十、HTTP的關鍵問題 1.在瀏覽器地址欄鍵入URL&#xff0c;按下回車之后經歷的流程 &#xff08;1&#xff09;DNS解析 &#x…

云技術

云技術是指在廣域網或局域網內將硬件、軟件、網絡等系列資源統一起來&#xff0c;實現數據的計算、儲存、處理和共享的一種托管技術。

vue中 mock使用教程

//mock/index.js import Mock from mockjs //引入mockjs&#xff0c;npm已安裝 import { Random,toJSONSchema } from mockjs // 引入random對象,隨機生成數據的對象&#xff0c;&#xff08;與占位符一樣&#xff09; Mock.setup({timeout:1000 //設置請求延時時間 }) const …

前端開發掌握nginx常用功能之rewrite

上一篇博文對nginx最常用功能的server及location的匹配規則進行了講解&#xff0c;這也是nginx實現控制訪問和反向代理的基礎。掌握請求的匹配規則算是對nginx有了入門&#xff0c;但是這些往往還是不能滿足實際的需求場景&#xff0c;例如請求url重寫、重定向等等&#xff0c;…

vue2.0腳手架的webpack 配置文件分析

前言 作為 Vue 的使用者我們對于 vue-cli 都很熟悉&#xff0c;但是對它的 webpack 配置我們可能關注甚少&#xff0c;今天我們為大家帶來 vue-cli#2.0 的 webpack 配置分析 vue-cli 的簡介、安裝我們不在這里贅述&#xff0c;對它還不熟悉的同學可以直接訪問 vue-cli 查看 …

一個可供中小團隊參考的微服務架構技術棧

一個可供中小團隊參考的微服務架構技術棧

WinSxS文件夾瘦身

WinSxS文件夾瘦身2014-5-8 18:03:32來源&#xff1a;IT之家作者&#xff1a;阿象責編&#xff1a;阿象 評論&#xff1a;27剛剛&#xff0c;我們分享了如何用DISM管理工具查看Win8.1 WinSxS文件夾實際大小。對于WinSxS文件夾&#xff0c;幾乎每個Windows愛好者都認識到其重要性…

bcrypt的簡單使用

前段時間在搗鼓個人項目的時候用到了nodejs做服務端&#xff0c;發現使用加密的方法和之前常用的加密方式不太一致&#xff0c;下面以demo的形式總結一下bcrypt對密碼進行加密的方法。 一、簡介 Bcrypt簡介&#xff1a; bcrypt是一種跨平臺的文件加密工具。bcrypt 使用的是布…

盒子居中

1、未脫標 margin&#xff1a;0 auto&#xff1b; 2、脫標&#xff08;absolute、fixed&#xff09; left&#xff1a;50%&#xff1b; margin-left&#xff1a;width/2&#xff1b; 轉載于:https://www.cnblogs.com/liujianing/p/10356984.html