HTML5的 input file上傳型別控制

2021-08-02 16:38:17 字數 2523 閱讀 3031

屬性值有以下幾個比較常用：

accept：表示可以選擇的檔案mime型別，多個mime型別用英文逗號分開，常用的mime型別見下表。

multiple：是否可以選擇多個檔案，多個檔案時其value值為第乙個檔案的虛擬路徑。

1、accept

只能選擇png和gif

"fileid1"


type="file" accept="image/png,image/gif" name="file" />
2、multiple

多檔案上傳

"fileid2"


type="file" multiple="multiple" name="file" />
3、常用mime型別

字尾名       mime名稱


.sheet
請看部落格：css input[type=file] 樣式美化，input上傳按鈕美化

在說到ajax上傳檔案。ajax上傳的時候，需要獲得input:file選擇的檔案（可能為多個檔案），獲取其檔案列表為：

// input標籤的files屬性


document.queryselector("#fileid").files


// 返回的是乙個檔案列表陣列
獲得的檔案列表，然後遍歷插入到表單資料當中。即：

// 獲得上傳檔案dom物件


var ofiles = document.queryselector("#fileid");


// 例項化乙個表單資料物件


var formdata = new formdata();


// 遍歷檔案列表，插入到表單資料中


for (var i =0, file; file = ofiles[i]; i++)
獲得表單資料之後，就可以用ajax的post上傳。

// 例項化乙個ajax物件


// 傳送表單資料


xhr.send(formdata);
上傳到伺服器之後，獲取到檔案列表為：

))在服務端迴圈遍歷這個陣列就可以上傳檔案了。

HTML5的 input file上傳型別控制

一 input file屬性 屬性值有以下幾個比較常用 accept 表示可以選擇的檔案mime型別，多個mime型別用英文逗號分開，常用的mime型別見下表。multiple 是否可以選擇多個檔案，多個檔案時其value值為第乙個檔案的虛擬路徑。1 accept 只能選擇png和gif 2 mul...

HTML5的 input file上傳型別控制

原文 html5的 input file上傳型別控制 2014年8月29日 90820次瀏覽 屬性值有以下幾個比較常用 accept 表示可以選擇的檔案mime型別，多個mime型別用英文逗號分開，常用的mime型別見下表。multiple 是否可以選擇多個檔案，多個檔案時其value值為第乙個檔案...

HTML5的 input file上傳型別控制

html5的 input file上傳型別控制 原文 html5的 input file上傳型別控制 2014年8月29日 90820次瀏覽 屬性值有以下幾個比較常用 accept 表示可以選擇的檔案mime型別，多個mime型別用英文逗號分開，常用的mime型別見下表。multiple 是否可以選...