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

/

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


客製上傳檔案input html 部份

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

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

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

可以看到input的id,跟label的for,兩個值要是相同的,這樣就可以把label跟input綁起來。

實際上,很多那種寫不用js就可以trigger一些功能的demo都是這樣寫的。像是不用js寫開啟modal,或是客製radio、checkbox,都是隱藏input,樣式刻在label上,再用id、for去綁,這樣當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的路徑,放進img的src裡就行。


示範頁面

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

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

隨選筆記文

Forms Google

Google 表單 用網址改變題目預設值

Forms Google

Google 表單,提交後系統自動寄送回覆通知 email

Analytics Google

Google Analytics 用戶計時 / User Timings

Google Others

Google Material Design 表單標籤效果

Front-End

Word、Excel 合併列印功能使用筆記

Firebase Google

Firebase Authentication 第三方登入 – Google、FB

Front-End

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

API

Instagram Embedding 抓 iframe 高度及 3 種大小圖片

Front-End

Auth0 Universal Login,做一個自己的會員註冊、登入功能

Forms Google

Google 表單,輸入 ID 後自動帶入其它欄位資料

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.