在這次的一個小專案中用到了檔案的上傳,在之前我對form表單的認知還只是發送用戶名和密碼,行吧,既然用到了那就硬著頭皮上咯,
使用
首先檔案的上傳需要一個type=file的input,它的意義就是上傳檔案,圖片,音頻,視頻都可以用 它來上傳,具體來說說它是怎么用的吧:
首先肯定是先放入這個input:

我只是寫了這個,其他什么都沒有加,這個時候運行起來就看到頁面上已經有了這個:

這個按鈕就是這個屬性自帶的,點擊即可上傳需要的檔案,后面的文字會在上傳后變為你上傳的檔案資訊,這就是簡單的使用了,
input限制上傳檔案
在想上傳檔案的時候,有時候需要限制上傳的檔案型別,type=file的input里面還有一個accept屬性,可以用它來限制檔案的上傳,只需要在這個屬性的后面跟上需要上傳的型別即可,如圖

這些檔案的格式都可以在mime表上查找到,找到需要的就寫上去就行了

這種限制方式是在根源上限制住了,點擊上傳就不會顯示限制之外的檔案,
除了這種方式之外,使用js驗證上傳檔案的后綴名也是常用的一個方法,type=file的input里面的value值就是上傳的檔案的資訊,可以通過正則來驗證該資訊,下面是我驗證指定視頻檔案的函式,可以參照一下:
//將需要驗證的視頻后綴名封裝為一個陣列,方便呼叫
var video_ext=['rmvb','3gp','avi','mp4','wmv','mov','flx'];
//封裝一個驗證視頻課時的函式
function check_video(value) {
let video_flag=false;
let index=value.lastIndexOf('.');
//取.后面的字符,與陣列中的一一比較
let ext=value.substr(index+1);
for(let i=0;i<video_ext.length;i++){
if(ext == video_ext[i])
{
video_flag = true; //一旦找到合適的,立即退出回圈
break;
}
}
if(video_flag)
{
return true;
}else
{
return false;
}
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/230740.html
標籤:其他
上一篇:DOM介紹~超好理解的哦
