web 前端常用元件 06 Upload 控制項

2022-07-29 08:03:08 字數 2179 閱讀 6546

閱讀目錄

因為有萬惡的ie存在,所以當web專案初始化並進入開發階段時。

如果是專案經理,需要知道客戶將會用什麼瀏覽器來訪問系統。

明確知道限定瀏覽器的情況下,你才能從容的讓手下的封裝必要的前端元件。

回到頂部

當然你也可以不用任何成熟的上傳元件,表單提交檔案,像這樣:

多個檔案一起提交,新增裡面的 input 選項即可,但 name 名稱需要一致。

當然你也可以在提交檔案的時候,提交一些其他的引數資料上去,像下面這樣:

注意其中的 enctype 設定為multipart/form-data。

這種上傳檔案的方式,優缺點顯而易見,不需要使用任何第三方 js,純天然 html 標籤、走到哪用到哪、沒有瀏覽器障礙.....

對於多變的專案需求,比如這些特性:實時上傳的進度條、能拖拽檔案上傳、上傳前壓縮、md5加密驗證等.....

你需要耐著性子自己實現,有造好的輪子,你為什麼不用呢?

所以說這種**撩人的 的標籤能出現的專案,定位在小型簡單、客戶好說話的web應用中。

回到頂部

這個元件想必是用的比較廣泛,提供 flash 和 html5 兩個不同的版本,能讓你避免很多瀏覽器相容性的問題。

支援顯示檔案上傳實時進度條,拖拽檔案上傳、多樣化的引數配置、高度可定製化....能滿足絕大部分專案的上傳需求。

使用這個元件的前提,需要先引入 jquery:

開始上傳

選擇檔案

初始化元件方法(具體的引數設定和**函式的入參請查閱官方文件):

$("#upfilebtn").uploadify(,

'multi': true,// 是否支援多檔案上傳

'width': '95px',// 瀏覽按鈕的寬度

'height': '30px',// 瀏覽按鈕的高度

'progressdata' : 'speed', //檔案進度條的樣式

'buttontext': ' 選擇檔案', //按鈕文字

'filesizelimit': '10240',//上傳檔案大小限制

'filetypeexts': '*.bmp;*.png;*.jpeg;*.jpg;*.gif',//可上傳的檔案型別

'overrideevents': ['ondialogclose','onuploadsuccess','onuploaderror'],

'onfallback': function () ,

'ondialogclose': function () ,

'onuploadsuccess': function (file, data, response) ,

'onuploaderror' : function ()

});

網上有很多上傳元件都是修改 uploadify 的原始碼的某一部分,然後重新命名的。

這個元件在專案中表現確實不錯,使用 flash version 瀏覽器中只需要安裝 flash player 即可。

當下瀏覽器中不安裝 flash player 的確找不出幾個。

但不置可否的是 flash 效率 沒有 h5 的高,相容性和穩定性必須捨棄一部分,讓兩者都有相對最優解。

回到頂部

除了 uploadify 的所有特性,最吸引人的特點是檔案可以分片併發上傳、同一元件內部決定使用 flash 還是 h5 上傳....

最後出場的一般都是壓軸人物,不否認的是現在我們中專案中使用的就是 web uploader 元件。

不在為瀏覽器的相容性而頻繁更換元件調整**,uploader 會根據執行環境切換上傳的方式,讓你更省心。

點選新增檔案

開始上傳

初始化元件方法(具體的引數設定和**函式的入參請查閱官方文件):

view code

uploadify 和 uploader 都可以動態的新增表單引數。

還需要注意的是,在實現獲取上傳檔案的過程中,我發現只有表單提交上去的多檔案是在一次請求當中。

而 uploadify 和 uploader 都是點選全部上傳後,多次請求後端的 action,每次只攜帶乙個檔案。

請求次數等於你的檔案上傳次數,我在實現過程中是通過新增時間戳的方式解決的該問題。

也有可能是我使用的有問題,檔案上傳後肯定需要和具體的業務掛鉤,業務問題這裡就不贅述了。

Web前端學習 06

今天寫頁面的時候,在定位側面的固定欄的時候遇到了一些小問題 我給它加了fixed定位 然後測試的時候發現當我縮放瀏覽器時這個div會往右上偏移 因為我只是單純的用了top xx px right xx px 之後審查jd頁面後發現 在乙個頁面中實現乙個固定導航欄的話,需要先將其固定在頁面中心位置 t...

前端常用UI元件

這段時間對我了解的一些框架知識的總結 桌面端 view ui 即原先的 iview,是一套基於 vue.js 的開源 ui 元件庫,主要服務於 pc 介面的中後台產品。相容性 大部分元件和功能支援 ie9 及以上瀏覽器,部分元件和功能不支援 ie layui 諧音 類ui 是一款採用自身模組規範編寫...

Web前端面試常用技巧

有技巧面試可以幫助大家更好的準備面試,提高面試成功率,走向高薪。找工作的第乙個重要問題就是寫簡歷了,簡歷就是乙個人的門面。簡歷寫的不好,用人方也沒有多大興趣再深入了解你,畢竟行業人太多了。所以簡歷應該是經常去更新的,隔幾個月去更新一次簡歷,了解自己這幾個月以來的成長在 結果是什麼。當我們準備投遞簡歷...