利用H5新特性判斷檔案大小

2022-02-16 07:11:20 字數 1099 閱讀 4013

html**部分: 

思路:下面**中我利用css的z-index屬性將input="

file」標籤隱藏在了id=btnselect元素下面,通過觸發a標籤的點選後,彈出檔案選擇框。下面的masklayer用於點選確認按鈕後的彈出層,避免使用者重複點選確認按鈕。

複製**

**如下:"wp

"class="

warpper

">

"btnselect

">單擊選擇要上傳的**

"uploadfile

" type="

file

" name="

myphoto

" />

"btnconfirm

"class="

btn" >確認上傳 "

masklayer

"class="

mask-layer

" style="

display:none;

">

正在上傳中...

false

,滿足以上3個條件後,在dom中生成預覽,新增img元素,然後利用createobjecturl()方法獲取預覽路徑。

**:

複製**

**如下:

//獲取資料的url位址

function createobjecturl(blob)

else

if(window.webkiturl)

else }

//檔案檢測

function checkfile()

//檢測檔案型別

if(file.type.indexof('

image

') === -1

) //

計算檔案大小

var size = math.floor(file.size/1024

); if (size > 5000

) ;

//新增預覽

$$("

btnselect

").innerhtml = "

\"/>";

};

**:

H5常用新特性

注意 這些新特性都有相容性的問題,基本是ie9 以上版本的瀏覽器才支援,如果不考相容性問題,可以大量使用這些新特性 html5新增的語義話標籤 html新增的多 標籤 屬性值描述 autoplay autoplay controls controls width pixels height pxlo...

h5新特性 canvas標籤(補充)

上下文物件 painter 1.透明度 語法 painter.globalalpha 0 1 任何操作都要在fill 之前 2.線性 1 設定線寬 painter.linewidth number 2 端點 painter.lincap 端點型別 型別 butt 無端點,round 圓弧端點 squ...

H5新特性 本地儲存

注意 本地儲存呼叫者必須統一,用臨時儲存儲存的資料,只有臨時儲存才能找到 localstorage 永久儲存 相對 其中的資料不隨著瀏覽器的開關而改變 sessionstorage 臨時儲存 相對 當瀏覽器關閉 當前頁面關閉時,資料消失,頁面重新整理時不會影響 兩者區別 local 和 sessio...