使用JavaScript 操做HTML5 File文件相關

時間 2019-11-07

標籤使用 javascript html5 html file 文件相關欄目 JavaScript 简体版

原文原文鏈接

1、顯示用戶選擇【圖片】實現code以下javascript

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>JavaScript顯示用戶選取的圖片</title>
 6 </head>
 7 <body>
 8    <div>
 9      <input type="file" name="picture" onchange="selectPicture(this)" 
10     accept="image/gif,image/jpeg,image/jpg,image/png" />
11      <img src="" width="240px" id="image"/>
12    </div>
13    <script type="text/javascript">
14            function selectPicture(evt){
15             if (!evt.files || !evt.files[0]) {
16                 return;
17             }
18             console.log(evt.files);
19             var fileName = evt.files[0].name,  //文件名,該屬性只讀
20                 fileSize = evt.files[0].size,  //文件大小,單位爲字節，該屬性只讀;(1KB = 1024Bytes; 1MB = 1024KB)    
21                 fileType = evt.files[0].type; //文件類型 文件的MIME類型，若是分辨不出類型，則爲空字符串，該屬性只讀。
22             console.log("文件總的大小"+fileSize);
23             //FileReader包含了一套完整的事件模型，用來捕獲讀取文件時的狀態：
24             var reader = new FileReader();
25                //onerror 文件讀取出錯
26                reader.onerror = function(){
27                    console.log("文件讀取出錯...");
28                }
29                //文件讀取中
30                reader.onprogress = function(evt){
31                    console.log(evt);
32                    console.log(evt.loaded); //當前文件讀取進度
33                    console.log("文件讀取中...");
34                    if(evt.lengthComputable){
35                       //當前上傳進度
36                       console.log(Math.round((evt.loaded/fileSize)*100)+"%");
37                    }
38                }
39                //文件讀取成功完成時觸發
40                 reader.onload = function (evt) {
41                     document.getElementById('image').src = evt.target.result;
42                 }
43                 //將文件讀取爲DataURL  返回一個基於Base64編碼的data-uri對象
44                 reader.readAsDataURL(evt.files[0]);
45            }
46    </script>
47 </body>
48 </html>

上述打印 evt.files日誌log信息

File  提供有關文件的信息，並容許網頁中的 JavaScript 訪問其內容 
FileList 對象一般來自於一個HTML input元素的files屬性,你能夠經過這個對象訪問到用戶所選擇的文件
有關File文件對象幾個屬性
lastModified 返回當前 File 對象所引用文件最後修改時間(單位：毫秒數; 屬性：只讀);
type 返回文件的 多用途互聯網郵件擴展類型(屬性：只讀);
name 返回當前 File 對象所引用文件的名字(屬性：只讀);
size 返回文件的大小(屬性：只讀);
webkitRelativePath 返回 File 相關的 path 或 URL(屬性：只讀);
lastModifiedDate 返回當前 File 對象所引用文件最後修改時間的 Date 對象 (屬性：只讀);

FileReader 對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據html

onerror 文件讀取出錯
onprogress 文件讀取中
onload 文件讀取成功完成時觸發
readAsBinaryString(Blob|File)：返回二進制字符串，該字符串每一個字節包含一個0到255之間的整數。
readAsText(Blob|File, opt_encoding)：返回文本字符串。默認狀況下，文本編碼格式是’UTF-8’，能夠經過可選的格式參數，指定其餘編碼格式的文本。
readAsDataURL(Blob|File)：返回一個基於Base64編碼的data-uri對象。
readAsArrayBuffer(Blob|File)：返回一個ArrayBuffer對象。

上述 FileReader 對象雖然存在 reader.onprogress = function(evt){} 文件讀取進度展現；文件的都是從內存中讀取；前端

reader.onload=function（evt）{} 是整個文件讀取完成後才觸發的；若該文件上傳至服務端（前提是整個文件讀取完成）就比如只有蓄水池裝滿水狀況下，飲用的水的人才能喝到；java

在這種狀況下若文件很大情，用戶體驗很很差；這時就須要利用Blob.slice方法進行文件分割上傳（蓄水池只要有水，飲用水的人就能喝到）；web

2、文件分割上傳（使用Blob.slice()分割方法）segmentfault

 1 function upload(blobOrFile) {
 2   var xhr = new XMLHttpRequest();
 3   xhr.open('POST', '/server', true);
 4   xhr.onload = function(e) { ... };
 5   xhr.send(blobOrFile);
 6 }
 7 
 8 document.querySelector('input[type="file"]').addEventListener('change', function(e) {
 9   var blob = this.files[0];
10 
11   const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
12   const SIZE = blob.size;
13 
14   var start = 0;
15   var end = BYTES_PER_CHUNK;
16 
17   while(start < SIZE) {
18     upload(blob.slice(start, end));
19 
20     start = end;
21     end = start + BYTES_PER_CHUNK;
22   }
23 }, false);

3、文件下載後端

 1 function download(){ //文件下載
 2         var blob = new Blob(["This download file content......"]); //Blob {size: 0, type: ""}; size 字節 type 類型 
 3         var a = document.createElement('a');
 4         // 用blob 對象來建立一個 object URL(它是一個 DOMString)，
 5         //咱們能夠用這個 object URL 來表示某個 blob 對象，這個 object URL 能夠用在 href 和 src 之類的屬性上
 6         var url = window.URL.createObjectURL(blob);
 7         a.href = url;
 8         a.download = "picture.txt"; //文件下載名稱
 9         a.click();
10         //釋放由 createObjectURL 建立的 object URL
11         window.URL.revokeObjectURL(url);
12 }

2018-01-26 11:16:56 注意【a.download 指定下載文件名，前端屢次調試但並沒生效】緣由後端從新設置下載文件名api

response.setHeader("Content-Disposition","attachment;filename="+file_name);

 1  try {
 2     response.setContentType("application/octet-stream");
 3     response.setHeader("Content-disposition", "attachment;"); //設置下載文件名
 4     response.setHeader("Content-Length", String.valueOf(fileLength));
 5     bos = new BufferedOutputStream(response.getOutputStream());
 6     byte[] buff = new byte[2048];
 7     int bytesRead;
 8     while (-1 != (bytesRead = bis.read(buff, 0, buff.length))) {
 9         bos.write(buff, 0, bytesRead);
10     }
11 } catch (IOException e) {
12     e.printStackTrace();
13 }

View Code

資料參考 app

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader異步

　　 https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications#

http://javascript.ruanyifeng.com/htmlapi/file.html

　　　https://segmentfault.com/a/1190000005863250

相關標籤/搜索