国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
HTML5+flash打造兼容各瀏覽器的文件上傳方案

  上一篇文章介紹了HTML5版的文件上傳插件,相比flash,采用HTML5的新技術(shù)無疑可以提升程序的加載速度。但是在目前的情況看來,HTML5的特性支持度不高,插件的可用性范圍確實(shí)比較窄。例如,我在插件中使用到的新特性有:

  1. <input type="file' />標(biāo)簽的multiple屬性
  2. File和FileList API
  3. XMLHttpRequest2的upload和onprogress
  4. FormData

  就拿File來講,IE9都不支持,所以在當(dāng)前環(huán)境下IE系列瀏覽器幾乎無法使用。因此做一個(gè)兼容方案還是有必要的。如何做兼容呢?這不是廢話,忘了你的H5版uploadify是怎么來的了?我們可以在不支持這些特性的瀏覽器上運(yùn)行flash版的uploadify。

  鎖定目標(biāo),我們要做的其實(shí)只需三步:

  1. 寫一個(gè)適配器,用來檢測客戶端瀏覽器對HTML5的這些特性的支持程度
  2. 如果支持,則動(dòng)態(tài)加載HTML5版本的插件所需的js和css文件,調(diào)用H5版本的插件
  3. 如果不支持,動(dòng)態(tài)加載flash版本的插件所需的js和css文件,調(diào)用flash版本的插件

  我給適配器命名為uploadAdapter,這樣一來,我們的文件結(jié)構(gòu)應(yīng)該變成了這樣:

  其中Huploadify就是我上一篇所寫的HTML5版,uploadify為官方的flash版本,原封不動(dòng)放在這里。為了動(dòng)態(tài)調(diào)用js和css文件,我還專門寫了一個(gè)jquery.loadscript.js,用來動(dòng)態(tài)加載文件。這樣所需的東西就全了。

使用方法

  因?yàn)楦臑榱藙?dòng)態(tài)加載文件,頁面上需引入的文件只有下面三個(gè):

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.loadscript.js"></script><script type="text/javascript" src="jquery.uploadAdapter.js"></script>

  在調(diào)用的時(shí)候,我們直接使用uploadAdapter就可以了,其他的工作適配器自動(dòng)完成了,像這樣:

$('#upload').uploadAdapter({        auto:true,        buttonText:'選擇文件',        fileObjName:'file',        fileTypeExts:'*.jpg;*.png;*.exe',        multi:true,        formData:{key:123456,key2:'vvvv'},        fileSizeLimit:9999,        showUploadedPercent:true,        showUploadedSize:true,        removeTimeout:9999999,        uploader:'upload.php'    });

  為了避免使用在項(xiàng)目中的時(shí)候出現(xiàn)動(dòng)態(tài)調(diào)用的路徑錯(cuò)誤,在uploadAdapter中還新增了一個(gè)配置項(xiàng):

baseUrl : 'url/uploadAdapter' //指定uploadAdapter的根目錄

  另外,如果你想手工指定想要調(diào)用的插件類型,這里也提供了一個(gè)配置:

pluginType : 'html5' //手工指定插件類型,字符串,html5或flash

截圖

  下面分別是flash版和HTML5版的截圖:

                      flash版

                     HTML5版

  樣式上有一些區(qū)別,我這里也懶得修改了。css文件都是獨(dú)立出來的,可以自行修改樣式。

源碼

  源碼我依然打?yàn)橐粋€(gè)完整的包,包含了demo文件。需部署在PHP環(huán)境中。

  猛戳這里下載:http://files.cnblogs.com/lvdabao/uploadAdapter.zip

  同樣,若在使用中發(fā)現(xiàn)了bug或有其他建議,歡迎留言~

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
HTML5離線緩存在tomcat下部署可實(shí)現(xiàn)圖片flash等離線瀏覽
critters 開發(fā)包的使用案例分享
詳解關(guān)于html,css,js三者的加載順序問題
網(wǎng)頁設(shè)計(jì)簡史
分享10款最棒的免費(fèi)HTML5視頻播放器
用javascript預(yù)加載圖片、css、js的方法研究
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服