上傳檔案 file標籤深藏功與名

2022-04-12 05:42:34 字數 1169 閱讀 3616

在html標籤中,是被用來上傳檔案的,但是這哥們兒在不同的瀏覽器下各有一副嘴臉,怎乙個「彆扭」了得。一直想解決這個頭疼的問題,最近在讀了一篇博文之後,忽然有了思路。

在上傳檔案時,是被放在乙個form中,form既然要上傳檔案,一定是以post方式傳輸資料,enctype也要設定成multipart/form-data。如下:

<

form

id="uploadform"

action

="test.ashx"

method

="post"

enctype

="multipart/form-data"

>

<

input

type

="file"

name

="uploadfile"

id="uploadfile"

style

="visibility:hidden;position:absolute;top:0px;width:0px"

/>

form

>

<

input

type

="button"

value

="上傳"

id="btn"

/>

既然file標籤長得不好看,就不讓它顯示,本來想設定display屬性,但是在蘋果瀏覽器下沒能實現上傳,只好設定visibility為hidden,但這麼一來,file標籤就獨佔了空白的一塊區域,所以又繼續設定了後面三個屬性。這樣頁面上就只有乙個button按鈕,此時只需要設定按鈕點選時觸發file標籤的點選事件,而當選擇完上傳的檔案之後,將觸發file標籤的onchange事件,只需要在此事件中提交form表單的資料即可。如下:

當然,在提交資料時還可以使用ajaxform實現非同步提交,至於後台的操作,這裡就不再贅述。

file標籤雖然被隱藏,但依然完成了它的工作,也算深藏功與名,而頁面上那個孤零零的button就成了乙個任人打扮的小姑娘。本人實在不擅於搞css這些東東,竊以為應該還有更好的方式實現這個效果,希望眾位高手們可以不吝賜教。

iframe中的onload事件深藏功與名

動態建立的 display 為 none 的 iframe 元素,onload 事件不會執行 昨天業務需求中碰到乙個關於 iframe 不能正常跳轉的棘手問題,一直猜測是 onload 事件引起的,雖然最後用 promise 暫時解決了,但是考慮到一些老版本的瀏覽器還需要 polyfill 去相容一...

File實現檔案上傳

upload.html 1 表單 action 上傳檔案的後台介面 method post enctype multipart form data 檔案輸出框 準備servlet url一定要與上面的表單action保持一致 編寫後台 實現檔案上傳 try catch exception ex 準備...

扛起萬億級市場 物聯網深藏功與名

6月8日訊息,近日5g又傳來新進展 工信部公開徵求5g擬使用3300 3600mhz和4800 5000mhz頻段的意見,中國移動牽頭提出sba架構成為5g網路統一基礎架構。5g的來臨進一步催動了物聯網應用的落地,運營商 晶元商 製造商等一眾產業鏈,無不充滿了期待和幹勁兒,要在這場萬億級市場中拔得頭...