1. 程式人生 > >HTML5 – 操作本地檔案

HTML5 – 操作本地檔案

本篇文章的主要目的是介紹本地檔案相關 API 的使用,好的,廢話不多說,下面直接開始。

基礎的 File API

File Api 提供了在瀏覽器中與本地檔案進行互動的最基礎的方法,不過值得注意的是,由於安全問題,開發者並不能主動的去訪問客戶端的檔案資訊,也就是說這一過程需要使用者的參與,最常用的獲取本地檔案的手段莫過於兩種:

  1. 使用者通過 input[type = file] 控制元件選擇了本地某個檔案。
  2. 用於通過拖拽將本地的某一檔案拖到瀏覽器完成上傳。

通過上面兩種形式,我們都可以獲取到可以操作的 File 介面,不過還有一點值得注意的是,無論是通過利用控制元件的形式還是通過拖拽的形式,使用者都可以同時選中多個檔案,而當用戶選擇多個檔案的時候我們獲取到的其實是 FileList

 介面,顧名思義,它就是一個 File 介面的集合。

那麼,通過 File 介面我們能夠獲取到哪些資訊呢?

  1. name: 檔名
  2. typeASCII 編碼,MIME 格式的檔案型別。
  3. size: 檔案所佔的位元組 ( byte )。
  4. lastModifiedDate: 檔案最後修改的日期和時間。

注: File API 不能遍歷檔案目錄。

通過上面介紹的這些內容,我們就可以很輕易的寫出一個小 demo,就像下面的這樣。

demo01.png

其實現過程就是利用 input[type=file] 控制元件選擇多個檔案,不過在這裡我們並沒有直接使用這個控制元件,而是利用 button

 來觸發這個控制元件的功能。然後通過使用者選擇的檔案會返回一個 FileList 物件,通過對其包含的每個 File 進行屬性的讀取即可。其核心程式碼如下:

12345678910111213uploadButton.addEventListener("click",function(){fileInput.click();},false);fileInput.addEventListener("change",function(){if(fileInput.files){varlength=fileInput.files.length;for(vari=0;i<length;
i++){fileList.appendChild(getFileDetailDIV(fileInput.files[i]));}}},false);

這個時候這個小 demo 還不夠人性化,畢竟有的人他就是不喜歡利用控制元件上傳檔案,他就是喜歡利用拖放將檔案傳上來,那麼為了這部分使用者,我們就得多費點腦筋了,怎麼才能利用拖放獲取到一個檔案的資訊呢?

在這之前,我想插入一些拖放的知識。因為網頁中並不是每一種元素都可以成為放置目標,所以如果想自定義放置目標,那麼我們需要修改 dragover 和 dragenter 的預設行為,程式碼如下:

1 2 3 4 5 6 7 8 9 10

相關推薦

HTML5操作本地檔案

本篇文章的主要目的是介紹本地檔案相關 API 的使用,好的,廢話不多說,下面直接開始。 基礎的 File API File Api 提供了在瀏覽器中與本地檔案進行互動的最基礎的方法,不過值得注意的是,由於安全問題,開發者並不能主動的去訪問客戶端的檔

html5讀取本地檔案 圖片上傳 示例程式碼

這篇文章主要介紹了html5讀取本地檔案的具體實現,html結構樣式、Css樣式及js程式碼如下,需要的朋友可以看看哦html結構樣式如下:  複製程式碼程式碼如下:  <div class="addpic">  <button>新增圖片</button>  <

HTML5讀取本地檔案

HTML5為我們提供了一種與本地檔案系統互動的標準方式:File Api。 該規範主要定義了以下資料結構: File FileList Blob HTML5訪問本地檔案系統時,需要先獲取File物件控制代碼,怎麼獲取檔案引用控制代碼呢?

html5操作本地資料庫

本文主要是Html5來建立資料庫,對值進行插入,刪除和查詢。 程式碼如下: <!DOCTYPE HTML> <html><head><title>三生草</title><script> var db

[js操作(轉)]在IE下js操作本地檔案相關方法

注:以下操作只在IE下有效!     Javascript是網頁製作中離不開的指令碼語言,依靠它,一個網

html5獲取本地檔案

html5可以獲取瀏覽器本地檔案,但是為了安全起見,需要本地使用者的確定,才可以開啟,而不能通過js去自動開啟,另外,不允許獲取檔案的絕對路徑。 1. 獲取檔名字: function showFileName() { // Check for the various Fi

如何用javascript操作本地檔案(讀寫txt檔案

javascript在瀏覽器本地和與伺服器通訊方面都有優異的表現。 使用javascript對本地檔案進行操作實際上是有一點技術後退的感覺。畢竟桌面應用程式微軟的、java的已經相當成熟了。不過用 javascript做點小程式來處理本地事務,在沒有java或者MFC開發環

HTML5實現本地JSON檔案的讀寫

參考: 使用HTML5來實現本地檔案讀取和寫入  (FileReader讀取json檔案,FileSaver.js儲存json檔案) w3school <input>標籤   FileReader WebAPI介面 FileSaver.js下載地址 File

利用html5 file api讀取本地檔案(如圖片、PDF等)

在html4的年代,我們如果要在網頁上呈現一張使用者本地的圖片,需要使用者先把圖片上傳到伺服器,再根據伺服器提供的圖片地址把圖片下載下來,才能把圖片在網頁上呈現出來。這一來二往,起碼已經費了兩倍於這張圖片的流量了,更別說伺服器為了儲存這張圖片所花費的資源以及使用者上傳錯了圖片

Android進階:android本地資料操作—步驟2:Android本地檔案操作

本地資料儲存 Android常用資料儲存 1. SharedPreferences儲存資料 2. 檔案儲存(內部,外部) 3. SQLite資料庫儲存 4. ContentProvider儲存資料 5. 網路儲存資料 一、SharedPreferences儲存

C#呼叫命令列執行python指令碼,這個辦法可以呼叫python第三方模組和對本地檔案進行操作

string pythonScriptPath = Server.MapPath(@"~\pythonScript");//python指令碼所在的目錄 ProcessStartInfo start = new Pro

本地檔案的讀寫操作

讀操作: bool ReadDirectories(const wstring& path) {     vector<wstring> vecFiles;     FindAllFileInDirEx(path, vecFiles, L"txt")

HTML5+規範:IO(管理本地檔案系統)

IO模組管理本地檔案系統,用於對檔案系統的目錄瀏覽、檔案的讀取、檔案的寫入等操作。通過plus.io可獲取檔案系統管理物件。 PRIVATE_WWW: 應用執行資源目錄常量 PRIVATE_DOC:

Win10本地java程式碼Hadoop操作HDFS檔案報錯

解決Wrong FS: hdfs://192.168.1.37:8020/user/tgm, expected: file:/// 新增conf配置 Configuration conf = new Configuration(); conf.set("mapred

git 提交本地檔案到coding.net 簡單操作

   今天嘗試下將原生代碼 提交到coding.net,因為是新手,練習了下提交程式碼 下面是簡單的推送步驟:        第一步如上所示,因為不小心把git 關了,下面是具體的步驟: 第二步 第三步、 git push origin master 會提示先pull

Node.js本地檔案操作檔案拷貝與目錄遍歷的方法

檔案拷貝NodeJS 提供了基本的檔案操作 API,但是像檔案拷貝這種高階功能就沒有提供,因此我們先拿檔案拷貝程式練手。與 copy 命令類似,我們的程式需要能接受原始檔路徑與目標檔案路徑兩個引數。 小檔案拷貝我們使用 NodeJS 內建的 fs 模組簡單實現這個程式如下。

cordova操作Android本地檔案系統

cordova提供了file外掛,這個外掛可以訪問手機上大部分檔案和資料夾,當然,首先肯定是需要安裝cordova以及安裝它的外掛”cordova-plugin-file”了,具體如何安裝請讀者自行檢視官網,筆者就不再贅述 1. cordova 建立本地

Chrome中利用HTML5實現具有檔案“編輯”及“下載”功能的本地應用

【Data URL】 最新的HTML5瀏覽器中,已經支援用Data URL(RFC2397)來引用“外部”資源了。 比如下面的連結,在HTML5瀏覽器中點選後,會轉到一個新頁面,顯示“Hello Data URL!”字樣。 <a href="data:text/pla

HTML5 Video/Audio播放本地檔案

這段時間經常看到開發者在反覆詢問同一個問題,為什麼通過設定src屬性,不能播放本地的媒體檔案?例如video.src=”D:\test.mp4”。 這是因為瀏覽器中的JavaScript不能直接直接訪問本地資源(例如檔案系統,攝像頭,麥克風等),除非事先得到了使用者的允許

redis訂閱發布消息操作本地緩存

修改 img eas jsb fill mar 定時 本地 緩存 Redis 本地緩存+遠程緩存方案 使用純java的ehcache作為本地緩存 Reids 作為遠程分布式緩存 解決redis緩存壓力過大,提高緩存速度,以及緩存性能。 Redis和ehcache緩存