File API 客製上傳檔案按鈕 / input file

File API 客製上傳檔案按鈕(input file)
File API 客製上傳檔案按鈕(input file)

本篇要解決的問題

最近朋友遇到一個需求,就是要客製上傳檔案的按鈕。找了一下以前寫過的東西,那時的寫還不是說很懂,是用 JS 在 trigger click,而不是直接用 label for 的特性。想了一下,覺得寫成一篇,然後把 code 更新一次再存起來,以後要用比較好找。


客製上傳檔案 input HTML 部份

HTML 的部份,因為 input type="file" 會被隱藏起來,按鈕樣式實際是寫在 label 上,就要用 input idlabel for 的這個特性,讓 label 被點擊時可以去 trigger input 被點擊。

另外案例的部份加上限制選擇的檔案只能是圖片檔,整理後如下:

<input id="customFileInput" type="file" accept="image/*">
<label for="customFileInput" class="button-primary">客製選擇檔案按鈕</label>

可以看到 inputid,跟 labelfor,兩個值要是相同的,這樣就可以把 labelinput 綁起來。

實際上,很多那種寫不用 JS 就可以 trigger 一些功能的 Demo 都是這樣寫的。像是不用 JS 寫開啟 Modal,或是客製 radiocheckbox,都是隱藏 input,樣式刻在 label 上,再用 idfor 去綁,這樣當 label 被點擊時,input 也會被 click,就可以寫 input:checked + label 的樣式。

這部份例子可以看這個:客製 checkbox、radiopure css modal box

在限制選擇檔案的部份,HTML 就用 accept="xxxx" 就行。type 的值參考 w3schools

  • audio/*
  • video/*
  • image/*
  • 只接指定副檔名,如:*.gif, *.jpg, *.png, *.doc

想要多個值就用半形逗號分開就行:

<input accept="audio/*,video/*,image/*">

客製上傳檔案 input JS 部份

JS 是用 File API,使用起來比想像中簡單,變數抓 input,當 input change 時,抓 event.target.files 就可以了。

本篇示範的是一次只傳一個檔案,多個檔案以後有時間再來寫。

JS 範例 code 如下:

var inputFile = document.getElementById('customFileInput');
inputFile.addEventListener('change', function(event) {
  var fileData = event.target.files[0]; // 檔案資訊
});

console.log(fileData) 的話,可以看到以下資訊:

  • lastModifiedDate:檔案最後修改的時間
  • name:檔案名稱
  • size:檔案大小
  • type:檔案類型

另外還有 2 個:lastModified、webkitRelativePath,一個是修改時間的毫秒數,一個非標準值,就不用了。

以下 JS 是抓值的部份:

var fileData = e.target.files[0]; // 檔案資訊
var fileName = fileData.name; // 檔案名稱
var fileType = fileData.type; // 檔案類型
var fileSize = Math.floor(fileData.size * 0.001); // 檔案大小轉成kb
var fileTime = fileData.lastModifiedDate;

要補充的是,如果檔案是圖片檔,是可以產生縮圖的,這要用另一個 API:

URL.createObjectURL()

URL.createObjectURL(fileData)

就會產生一個 blob 的路徑,放進 imgsrc 裡就行。


示範頁面

製作了一個示範頁面,選完檔案後可以看到被選檔案的資訊:

https://letswritetw.github.io/letswrite-file-api-custom-input/

原始碼的部份也放上 Github 了:

https://github.com/letswritetw/letswrite-file-api-custom-input

Summary
File API 客製上傳檔案按鈕(input file)
Article Name
File API 客製上傳檔案按鈕(input file)
Description
本篇大綱:客製上傳檔案input html 部份、客製上傳檔案input js 部份、示範頁面。最近朋友遇到一個需求,就是要客製上傳檔案的按鈕。覺得寫成一篇,然後把code存起來,以後要用比較好找。可以看到input的id,跟label的for,兩個值要是相同的,這樣就可以把label跟input綁起來。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

2 Comments
最舊
最新
Inline Feedbacks
看所有留言
trackback
用 HTML 的 capture 屬性,開啟手機鏡頭進行拍照、錄影 - Front-End - Let's Write
7 月 之前

[…] File API 客製上傳檔案按鈕 / input file […]

trackback
Color Thief 找出圖片裡的顏色 - Front-End - Let's Write
7 月 之前

[…] File API 客製上傳檔案按鈕 / input file […]