2. 程式人生 > >HTML5讀取本地檔案

HTML5讀取本地檔案

阿新 • • 發佈：2019-01-14

HTML5為我們提供了一種與本地檔案系統互動的標準方式：File Api。

該規範主要定義了以下資料結構：

  • File
  • FileList
  • Blob

HTML5訪問本地檔案系統時，需要先獲取File物件控制代碼，怎麼獲取檔案引用控制代碼呢？

選擇檔案

首先檢測一下當前瀏覽器是否支援File Api：

1
2
3
4
5
6

function isSupportFileApi() {
    if(window.File && window.FileList && window.FileReader && window
 
.Blob) {
        return true;
    }
    return false;
}

HTML5雖然可以讓我們訪問本地檔案系統，但是js只能被動地讀取，也就是說只有使用者主動觸發了檔案讀取行為，js才能訪問到File Api，這通常發生在表單選擇檔案或者拖拽檔案。

表單輸入

表單提交檔案是最常見的場景，使用者選擇檔案後，觸發了檔案選擇框的change事件，通過訪問檔案選擇框元素的files屬性可以拿到選定的檔案列表。

如果檔案選擇框指定了multiple，則一個檔案選擇框可以同時選擇多個檔案，files包含了所有選擇的檔案物件；如果沒有指定，則只能選擇一個檔案，files[0]

就是所選擇的檔案物件。

1
2
3
4
5
6
7
8
9
10
11
12
13

function fileSelect1(e) {
    var files = this.files;
    for(var i = 0, len = files.length; i < len; i++) {
        var f = files[i];
        html.push(
            '<p>',
                f.name + '(' + (f.type || "n/a") + ')' + ' - ' + f.size + 'bytes'
 
,
            '</p>'
        );
    }
    document.getElementById('list1').innerHTML = html.join('');
}
document.getElementById('file1').onchange = fileSelect1;

拖拽

拖拽是另一種常見的檔案訪問場景，這種方式通過一個叫dataTransfer的介面來獲得拖拽的檔案列表，更多關於dataTransfer。

拖拽同樣支援多選，使用者可以拖拽多個檔案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function dropHandler(e) {
    e.stopPropagation();
    e.preventDefault();

    var files = e.dataTransfer.files;
    for(var i = 0, len = files.length; i < len; i++) {
        var f = files[i];
        html.push(
            '<p>',
                f.name + '(' + (f.type || "n/a") + ')' + ' - ' + f.size + 'bytes',
            '</p>'
        );
    }
    document.getElementById('list2').innerHTML = html.join('');
}
function dragOverHandler(e) {
    e.stopPropagation();
    e.preventDefault();
    e.dataTransfer.dragEffect = 'copy';
}
var drag = document.getElementById('drag');
drag.addEventListener('drop', dropHandler, false);
drag.addEventListener('dragover', dragOverHandler, false);

PS:
拖拽有個特別需要注意的事情就是，阻止事件冒泡和事件預設行為，防止瀏覽器自動開啟檔案等行為，比如拖拽一個pdf，瀏覽器可能會開啟pdf。

至此，我們知道，我們可以通過兩種方式來獲得檔案控制代碼，那麼如何讀取檔案內容呢？

讀取檔案

HTML5提供了一個叫FileReader的介面，用於非同步讀取檔案內容，它主要定義了以下幾個方法：

  • readAsBinaryString(File|Blob)
  • readAsText(File|Blob [, encoding])
  • readAsDataURL(File|Blob)
  • readAsArrayBuffer(File|Blob)

FileReader還提供以下事件：

  • onloadstart
  • onprogress
  • onload
  • onabort
  • onerror
  • onloadend

一旦呼叫了以上某個方法讀取檔案後，我們可以監聽以上任何一個事件來獲得進度、結果等。

預覽本地圖片

這裡主要用到FileReader的readAsDataURL方法，通過將圖片資料讀取成Data URI的方法，將圖片展示出來。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function fileSelect2(e) {
    e = e || window.event;
    var files = this.files;
    var p = document.getElementById('preview2');

    for(var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader();
        reader.onload = (function(file) {
            return function(e) {
                var span = document.createElement('span');
                span.innerHTML = '<img style="padding: 0 10px;" width="100" src="'+ this.result +'" alt="'+ file.name +'" />';

                p.insertBefore(span, null);
            };
        })(f);
        //讀取檔案內容
        reader.readAsDataURL(f);
    }

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


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

     
 這篇文章主要介紹了html5讀取本地檔案的具體實現，html結構樣式、Css樣式及js程式碼如下，需要的朋友可以看看哦html結構樣式如下： 

複製程式碼程式碼如下:  
<div class="addpic">  
<button>新增圖片</button>  
< 



  
 

    


    
    
HTML5讀取本地檔案

     
 
                

HTML5為我們提供了一種與本地檔案系統互動的標準方式：File
 Api。

該規範主要定義了以下資料結構：


File
FileList
Blob

HTML5訪問本地檔案系統時，需要先獲取File物件控制代碼，怎麼獲取檔案引用控制代碼呢？
 



  
 

    


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

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



  
 

    


    
    
Kafka讀取本地檔案作為生產者

     
 package com.qf.utils;import kafka.javaapi.producer.Producer;import kafka.producer.KeyedMessage;import kafka.producer.ProducerConfig;import kafka.serializer 



  
 

    


    
    
Spark 採坑系列（一） 叢集環境讀取本地檔案的坑

     
  
 
 Spark 採坑系列 
 今天在網上看了一個例子，Spark啟動後讀取檔案並計算的例子，自己在按照網上方法使用的時候意外菜了坑。 
 首先，我將3臺虛擬機器的Spark叢集以及Hadoop叢集啟動。 
 然後我在其中一個伺服器上編輯了一個文字，命名sparkFirst，內容如下： 
 hello s 



  
 

    


    
    
spark連線並讀取本地檔案報錯總結

     
  
 
 1.scala.Predef$.refArrayOps([Ljava/lang/Object;)Lscala/collection/mutable/ArrayOps; 
 錯誤原因：scala版本與spark版本相容問題導致，可在maven倉庫看spark所使用jar包支援的scala版本。 
 注 



  
 

    


    
    
Ftp實現自動讀取本地檔案上傳到伺服器

     
  
 
 
 需求：最近有個需求，類似需要將pre環境的oracle檔案，放到prd環境中hive叢集中儲存，但是因為資料來源和資料儲存節點不在一個環境中，所以無法通訊配置實現資料的直接傳輸。 
 解決方案： 
  1.寫指令碼自動將oracle中資料寫入到本地指定資料夾。 
  2.通過 



  
 

    


    
    
DataFrame讀取本地檔案

     
  
 
 import pandas as pd

# jiazhi = pd.read_excel('C:/Users/Administrator/Desktop/10月16日 -  11月20日工貝價值核算_2018-11-20.xlsx')
# # # print(jiazhi.shape)
# # p 



  
 

    


    
    
jsonp 讀取本地檔案

     
 
                
想自己用 js寫一個原生的ajax請求，訪問本地檔案，json/txt。但是demo，寫了一個後，發現
  
原來是跨域了。
                               js 寫的原生ajax 請求程式碼如下
  html程式碼<div id="my 



  
 

    


    
    
node讀取本地檔案中文亂碼問題

     
 
                node讀取本地檔案中遇到中文時，讀取出來的是一串亂碼。問題來源：        由於Node.js僅支援如下編碼：utf8, ucs2, ascii, binary, base64, hex，並不支援中文GBK或GB2312之類的編碼，在 windows 中，預設的文字編碼 



  
 

    


    
    
Spark Streaming 讀取本地檔案壓檔案

     
 
								
								            
						
                
package streamings.studys

import org.apache.spark.SparkConf
import org.apache.spark.streaming.dstre 



  
 

    


    
    
MSSQL 讀取本地檔案資料

     
 
--建立一個臨時表create table #testtable( context ntext);select * from #testtable
--將本地檔案寫入表中BULK INSERT #testtable FROM 'c:/1111.txt'WITH (   DATAFILETYPE = 'cha 



  
 

    


    
    
前臺JS（type=‘file’）讀取本地檔案的內容，相容各種瀏覽器 二

     
  
 
 前臺js讀取本地檔案內容方法： 
 1、IE用new ActiveXObject("Scripting.FileSystemObject") 
 2、其他用FileReader物件 html5的方法 
 說法不嚴謹，具體自己測試，複製以下程式碼儲存為html直接可以執行。 
 
 <!DOCT 



  
 

    


    
    
前臺JS（type=‘file’）讀取本地檔案的內容，相容各種瀏覽器 一

     
  
 
     前臺JS讀取本地檔案內容，相容IE7、8、9、10 FF Chrome等各種版本，糾結了好長時間，終於找到方法，希望能幫到你，程式碼如下。直接複製儲存為html執行看效果。 
 
 <!DOCTYPE html>
<html>
<head&g 



  
 

    


    
    
讀檔案 —— WEB前端讀取本地檔案內容哪些事（前臺解析txt檔案）……

     
 
                強制讓瀏覽器允許JS讀寫本地檔案……的操作！問題描述：讓自己的瀏覽器允許js讀寫本地檔案，儘可能多的相容各種瀏覽器。（即本機的js檔案讀寫本機的檔案）問題回覆——1：您的意思是不需要瀏覽器與使用者互動直接操作使用者機上的檔案？不符合瀏覽器的安全標準，屬於瀏覽器的設計缺陷所以瀏 



  
 

    


    
    
nodejs 讀取本地檔案

     
 
                
這篇文章主要介紹nodejs中fs模組的使用，以方便遍歷目錄，操作檔案。
首先是引入fs模組：
var fs = require('fs') 
接下來引進path模組，方便儲存檔案路徑：
const path = require('path')
現在便可以指定檔案路徑，操作 



  
 

    


    
    
java讀取本地檔案失敗終極解決方案FileNotFoundException等一系列相關異常解決

     
 
								
								            
						
                
本篇文章主要是解決在工作或學習中遇到的無法操作本地檔案顯示資料夾路徑無效或無許可權等問題的解決
 首先 上一張圖

如上圖所示 我的檔名路徑明明是正確的 但是卻顯示該檔案不存在 有的人可能檔案分隔符不 



  
 

    


    
    
iOS開發：通過UIWebView載入讀取本地檔案（word文件）

     
 
                
      做過iOS開發的程式猿，對UIWebView都不陌生，因為只要涉及到開發工作，就一定會涉及到這方面的運用。UIWebView是蘋果自帶的框架，也算是蘋果程式內部的瀏覽器，可以瀏覽web網頁，也可以開啟HTML/HTM、PDF、docx、txt等格式的文字檔案，其 



  
 

    


    
    
JAVA讀取本地檔案並顯示到頁面中

     
 
                
javaweb圖片的顯示

@RequestMapping(value="showImg")
@ResponseBody
public void ShowImg(HttpServletRequest request,HttpServletResponse response) 



  
 

    


    
    
halocn讀取本地檔案

     
 
							
							
							*讀取圖片操作
*11111111111111
ImagePath :=[]
ImagePath[0] :='E:/image/1.png'
ImagePath[1] :='E:/image/2.png'
ImagePath[2] :='E:/image/3.p