人氣 76°c

input type file載入文件名稱字數限制

很多時候使用 <input type="file"> HTML 標籤上傳圖片、影音檔案,後面會顯示文件名稱及檔案格式,發現有小部份瀏覽器,沒有把文件名稱的長文字省略,可能會撐破頁面,網頁會被溢出。

input file 在沒有修正前,加載檔案文件,如果文件名稱太長,網頁右邊會被撐破,這個問題發生在 Firefox browser mobile APP,其他的瀏覽器都會自動省略長文字。

在網上找到使用 maxlengthsize 控制 input 字符串長度,但只能夠應用在 text 無法用在 file。

請看圖片▼

修正方法:

CSS 語法

.vo-size {
width: 250px;
display: flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

HTML 標籤

<label class="vo-size">
<input type="file" />
</label>

太長的名稱會自動截斷。

修正後的畫面▼

標籤: