博客內容

— input 的全部類型

— input 的accept、multiple 屬性介紹

— input 事件監聽

— 更改input文件上傳css樣式

— 上傳圖片文件 獲取圖片地址

— 上傳file文件后徹底清空上傳文件

— 各種文件類型

介紹

input 全部類型

input 框的類型到底有多少種呢，零零散散算下來有二十多種

總述

常用的并且能為大多數瀏覽器所識別的類型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。

另外還有一些類型：tel、email、url、datetime、search。這些類型部分瀏覽器不支持識別或校驗。

text類型 文本框

<input type="text">input>

注意：當input框沒有給類型的時候，默認text文本框

password類型 密碼框

<input type="password">input>

number類型 數字框

<input type="number">input>

button類型 按鈕

<input type="button">input>

reset類型 重置按鈕

<input type="reset">input>

注意：reset類型 一般用于form表單中

submit類型 提交按鈕

<input type="submit">input>

注意：submit類型 一般用于form表單中

hidden類型 隱藏

<input type="hidden">input>

注意：hidden類型會將input隱藏，所以什么都看不到，而且被隱藏的input框也不會占用空間。

radio類型 單選按鈕

<input type="radio">input>

checkbox類型 復選按鈕

<input type="checkbox">input>

image類型 圖片

<input type="image" src="../../image/one.png">input>

color類型 顏色

<input type="color">input>

range類型 滑動條

<input type="range">input>

date類型 日期

<input type="date">input>

month類型 月份

<input type="month">input>

week類型 周

<input type="week">input>

time類型 時間

<input type="time">input>

datetime類型 時間、日、月、年（UTC時間）

<input type="datetime">input>

注意：火狐、360瀏覽器都對datetime不支持，會按照text類型處理。

datetime-local類型 時間、日、月、年（本地時間）

<input type="datetime-local">input>

tel類型 電話

<input type="tel">input>

注意：這個類型我認為沒有實際用處

email類型 郵箱

<input type="email">input>

注意：火狐對email類型有校驗，360瀏覽器無校驗。

=======

好了接下來是今天的重點了

file 類型

<input type="file" accept multiple>input>

< input > type 類型為 file 的 input 元素，使得用戶可以選擇一個或多個元素以提交表單的方式傳到服務器上，或者通過Javascript 的 file Api對文件進行操作。

屬性

accept屬性

該屬性表明了服務器端可接受的文件類型，可以限制你手機選擇相關的文件，如果限制多個，可以用逗號分割。

accept 屬性接受一個逗號分隔的 MIME 類型字符串, 如:

• accept=“image/png” 或 accept=".png" — 只接受 png 圖片.
• accept=“image/png, image/jpeg” 或 accept=".png, .jpg, .jpeg" — PNG/JPEG 文件.
• accept=“image/*” — 接受任何圖片文件類型.
• accept=“audio/*” — 接受任何音頻文件類型.
• accept=“video/*” — 接受任何音頻視頻文件類型.
• accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — 接受任何 MS Doc 文件類型.

multiple屬性

multiple屬性代表是否可以選擇多個文件，多個文件時其value值為第一個文件的虛擬路徑。

<input id="fileId2" type="file" multiple="multiple" name="file" />

事件監聽

在 input 元素上監聽 change 事件就能獲取到用戶上傳的文件信息，包括文件名、上傳時間、文件大小等等，通過 FileReader 我們還可以將圖片文件轉換成 base64 編碼格式實現預覽圖片功能。

在 change 事件監聽的函數內，event.target.files 就是用戶上傳的圖片信息。

<input style="display: none" 
	id="file" ref="files" 
	type="file" 
	@change="uploadData(e)" 
	accept=".doc,.docx,.pdf,.ai,.psd" 
	multiple="multiple" />

 // 獲取文件 這里是使用的 vue3.0 語法 
        const uploadData = (e) => {
            var e = window.event || e  // change事件獲取到的數據
            if (e.target.files[0].size > 500 * 1024 * 1024) { // 限制文件上傳大小
                ElMessage.error('上傳單個文件大小不能超過 500M!')
            } else {
                state.ruleForm.documentFile = e.target.files[0]  // 文件賦值
            }
        }

css樣式更改

原生的input file 實在是不好看，外加不好修改 CSS。所以用來其他的方式。

第一種：vue3.0的寫法 把 input file 樣式設置display:none; 隱藏, 或者 設置透明度 opacity設置為0，然后用一個好看的按鈕代替點擊，之后，在input中設置ref 用來獲取數據。 js中獲取ref然后鏈接設置樣式的點擊事件

html代碼

<el-button  @click="goFile" size="small" type="primary">
      <i class="el-icon-upload2">i>上傳文件
el-button>
<input style="display: none" 
	id="file" ref="files" 
	type="file" 
	@change="uploadData(e)" 
	accept=".doc,.docx,.pdf,.ai,.psd" 
	multiple="multiple" />

js 代碼

// 先在vue 中獲取 ref
import {  toRefs，ref } from 'vue'

export default {
    name: 'FileData',
    components: {},
    setup () {
        const state = reactive({
         loading: false,
            pageInfo: {
                page: 1,
                rows: 10,
                total: 0,
            }
         })
        const files = ref(null) // 獲取ref 這里對接html的ref
        // 這里對接html 代碼 的點擊事件
        const goFile = () => {
            files.value.click()
        }
        // 最后return 出去
        return {
            ...toRefs(state),
            goFile,
            files,
        }

效果

第二種方法：vue2.0 寫法，vue2.0很多種寫法，我舉例一種：使用 label元素 與 input file控件關聯,然后隱藏 input。也是一樣的。只不過不用調用方法了。

<label class="ui_button ui_button_primary" for="xFile">上傳文件</label>
<form><input type="file" id="xFile" style="display:none;"></form>

上傳圖片文件，獲取圖片地址

html代碼

 <input style="display: none" 
 	id="fileImg" ref="filesImg" type="file" 
 	@change="uploadImg(e)" 
	accept=".jpg,.png,.gif,.bmp" 
	multiple="multiple" />

js代碼

  // 獲取圖片
        const uploadImg = (e) => {
            var e = window.event || e // change事件獲取到的數據
            if (e.target.files[0].size > 2 * 1024 * 1024) { // 限制上傳圖片文件大小
                ElMessage.error('上傳單個封面大小不能超過 2M!')
            } else {
                state.ruleForm.coverFile = e.target.files[0] 
                // 獲取圖片地址
                var file = e.target.files[0]
                var reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = function (result) {
                    state.coverFile = result.target.result // 圖片地址 Base64 格式的 可預覽
                }
            }
        }

input type file上傳文件之后清空內容

上次寫過如何上傳文件，上傳成功之后，會出現一些問題。

當我打開上傳的文件，但是沒有點擊上傳，然后關閉彈窗，接著繼續上傳剛才的那個文件。為了滿足產品組的要求，我們一般都會把樣式進行一定的覆蓋。

但這就會出現一定的問題。按照上面說的那種情況，當我再次打開之后覆蓋樣式的內容為空。

其實剛開始是百思不得其解的，最后想了一下，應該是file文件內容沒有清空的原因造成的。

上網查各種清空的方法。

都是直接給獲取到的files文件的value 賦值為空，但是這種方式治標不治本，不能徹底清理文件達到解決問題的方法

掙扎了兩個小時解決了文件徹底清理的方法，就是外部加一個form表單，然后清空form表單里面的內容。

如上圖一樣，我給input標簽外面增加一個form標簽，id為DataForm

我們產品需求上傳文件是在一個彈框里面的。

所以我每次打開彈框的時候，只需要清空一下該內容就行。

具體代碼

document.getElementById('DataForm')&&document.getElementById('DataForm').reset();

各種文件的類型

*.3gpp    audio/3gpp, video/3gpp
*.ac3    audio/ac3
*.asf       allpication/vnd.ms-asf
*.au           audio/basic
*.css           text/css
*.csv           text/csv
*.doc    application/msword    
*.dot    application/msword    
*.dtd    application/xml-dtd    
*.dwg    image/vnd.dwg    
*.dxf      image/vnd.dxf
*.gif            image/gif    
*.htm    text/html    
*.html    text/html    
*.jp2            image/jp2    
*.jpe       image/jpeg
*.jpeg    image/jpeg
*.jpg          image/jpeg    
*.js       text/javascript, application/javascript    
*.json    application/json    
*.mp2    audio/mpeg, video/mpeg    
*.mp3    audio/mpeg    
*.mp4    audio/mp4, video/mp4    
*.mpeg    video/mpeg    
*.mpg    video/mpeg    
*.mpp    application/vnd.ms-project    
*.ogg    application/ogg, audio/ogg    
*.pdf    application/pdf    
*.png    image/png    
*.pot    application/vnd.ms-powerpoint    
*.pps    application/vnd.ms-powerpoint    
*.ppt    application/vnd.ms-powerpoint    
*.rtf            application/rtf, text/rtf    
*.svf           image/vnd.svf    
*.tif         image/tiff    
*.tiff       image/tiff    
*.txt           text/plain    
*.wdb    application/vnd.ms-works    
*.wps    application/vnd.ms-works    
*.xhtml    application/xhtml+xml    
*.xlc      application/vnd.ms-excel    
*.xlm    application/vnd.ms-excel    
*.xls           application/vnd.ms-excel    
*.xlt      application/vnd.ms-excel    
*.xlw      application/vnd.ms-excel    
*.xml    text/xml, application/xml    
*.zip            aplication/zip    
*.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

期待三連！！！