檔案上傳利器SWFUpload入門簡易教程

2022-07-16 22:51:15 字數 1362 閱讀 1713

凡做過**開發的都應該知道表單file的確雞肋。

ajax解決了不重新整理頁面提交表單,但是卻沒有解決檔案上傳不重新整理頁面,當然也有其它技術讓不重新整理頁面而提交檔案,該技術主要是利用隱藏的iframe, 較ajax要麻煩許多,而且其提交方式依然在底層是使用的表單file,這裡我們不詳談。而且如果是提交較小的檔案,我們能接受,如果提交的檔案較大,我 們便要忍受很長的等待時間,而瀏覽器卻沒有任何提示,我們也沒有辦法知道檔案上傳的進度…

但是現在,網上出現了乙個名為swfupload的上傳元件,該元件利用flash自身的檔案提交技術而無需重新整理頁面,而且能夠獲取檔案上傳進度,可以提交多個檔案,而且還能控制上傳檔案的大小,型別等資訊。這麼乙個強大而易用的東西,你還在尋找麼?

下面就是是swfuupload的簡易教程,服務端大同小異,我這裡以php為例。(該教程基於swfupload2.2.0.1,雖然 swfupload v2.5.0 beta 3已經放出,但是考慮到是測試版,肯定用不穩定的因素,我決定將穩定的2.2.0.1作為本次學習的版本)。

新增乙個上傳頁面,我們放在swfu下,但不一定非要放在swfu下,命名為tutor-1.html。

head中插入用於引入swfupload.js的**

script>

然我我們還需要乙個swfupload佔位符和乙個上傳按鈕。佔位符用於當swfupload載入並初始化後被swfupload按鈕替換的乙個dom元素。

div>

接著,載入並初始化swfupload.swf。

varswfuoption= 。這個沒什麼好說的,主要作用為儲存一些和swfupload有關的資訊,而且防止與其它變數或者函式重名。

custom_settings: 

外掛程式不想多說,以cookies外掛程式為例講乙個。

這個外掛程式主要目的為解決ie下的乙個bug,flash不能將瀏覽器的cookie提交到伺服器。

以至於服務端不能驗證使用者的登陸態,而在以外掛程式形式允許的flash在ff或者chrome下就沒有該問題。該外掛程式的原理為使用js獲取瀏覽器

cookie,存放到請求的post資料中一起提交給伺服器。這裡需要注意的一點是,使用者提交的post資料如果和cookie中某個資料重名會將覆蓋掉

cookie的值。

用法:在head中載入外掛程式的js,就可以了

script>

我們可以通過debug框看到cookie資料已經存入到post_params中了。

是不是soeasy吧,還是那句話,師傅帶進門,修行靠個人,swfupload帶給我們體驗和可定制度都是非常高的,繼續享受把。

官方**:英文)

官方例子:英文)

swfupload v2.2.0.1 手冊:英文)

本教程demo

SWFUpload上傳檔案

一 swfupload介紹 1.首先為什麼要使用該組建進行上傳檔案?而不使用以往的上傳檔案的方式。答 因為以往的上傳檔案會造成表單頁面的重新整理。這樣上傳檔案會很不方便。但是swfupload能夠很好的解決該困惑。二 swfupload的使用,建議去看看別人寫的demo,然後再去使用該外掛程式。1....

swfupload 多檔案上傳的屬性與事件方法總結

swfupload的原理 利用flash選擇檔案後上傳,通過flash和js互動,對整個過程進行控制 包括頁面的dom操作之類的,都可以通過js來進行控制。說白了,就是用flash上傳,js操作dom 使用時首先必須要初始化 var swfobject,paramsobject window.onl...

檔案上傳 HTML5與SWFUpload(2)

不支援html5上傳的只能是flash 不過發現網上關於swfupload的文章實在太多了,還有中文手冊 英文手冊 中文手冊 需要注意下更新時間 1 就像手冊中提到的,用swfupload做上傳的時候,需要在頁面中加個js 2 需要對swf物件初始化,傳入配置的引數 var settings obj...