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

隨選筆記文

WordPress

Ubuntu 安裝 WordPress – 2:Webmin、Apache、MySQL、Hosts

Google Sheets

如何用 Google Sheets / Excel 當作資料庫

Google Maps

Google Maps API 學習筆記 – 4:Place API 自動完成地址、地點評論摘要

PWA

PWA 學習筆記 – 5:用 Firebase 做 Web Push

Analytics Google

GA:啟用 Web + App 報表

Vue

拿 Trello 當資料庫 建一個店家清單 – 下篇:建立清單頁面

Bot Telegram

Telegram Bot 學習筆記 – 1:用 GCP + Node.js 接收 / 推播訊息

API

如何用 Postman Mock Server 快速建立 API Server

Google Others

用 reCAPTCHA v3 來做非機器人驗證

API Front-End

用 Google Apps Script 寫一個 LINE 登入功能:下篇 – 三大步驟

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

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