jQuery文件上傳控件 Uploadify 詳解
基于jquery的文件上傳控件,支持ajax無(wú)刷新上傳,多個(gè)文件同時(shí)上傳,上傳進(jìn)行進(jìn)度顯示,刪除已上傳文件。
要求使用jquery1.4或以上版本,flash player 9.0.24以上。
有兩個(gè)版本,一個(gè)用flash,一個(gè)是html5。html5的需要付費(fèi)~所以這里只說(shuō)flash版本的用法。
官網(wǎng):http://www.uploadify.com/
控件截圖:
用法:
首先引用下面的文件
<link rel="stylesheet" type="text/css" href="uploadify.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
創(chuàng)建一個(gè)file input,或者其它任何帶ID的元素,并對(duì)其初始化Uploadify(注意目錄下要有uploadify.swf這個(gè)文件,和uploadify.php后臺(tái)文件,路徑按項(xiàng)目中的目錄結(jié)構(gòu))
<input type="file" name="file_upload" id="file_upload" /> <script> $(function(){ $('#file_upload').uploadify({ 'swf' :'uploadify.swf', 'uploader':'uploadify.php' // Put your options here }); }); </script>
這樣子就完成了一個(gè)最基礎(chǔ)的上傳組建?;驹硎歉淖兡銊?chuàng)建的file input生成一個(gè)DOM結(jié)構(gòu),創(chuàng)建一個(gè)DIV按鈕,按鈕樣式修改在uploadify.css文件中的.uploadify-button,將swf文件定位在按鈕上面,這樣當(dāng)你點(diǎn)擊按鈕時(shí)實(shí)際上點(diǎn)擊的是swf
選項(xiàng):
$('#file_upload').uploadify({ auto:false, //接受true or false兩個(gè)值,當(dāng)為true時(shí)選擇文件后會(huì)自動(dòng)上傳;為false時(shí)只會(huì)把選擇的文件增加進(jìn)隊(duì)列但不會(huì)上傳,這時(shí)只能使用upload的方法觸發(fā)上傳。不設(shè)置auto時(shí)默認(rèn)為true buttonClass: "some-class", //設(shè)置上傳按鈕的class buttonCursor: 'hand', //設(shè)置鼠標(biāo)移到按鈕上的開(kāi)狀,接受兩個(gè)值'hand'和'arrow'(手形和箭頭) buttonImage: 'img/browse-btn.png', //設(shè)置圖片按鈕的路徑(當(dāng)你的按鈕是一張圖片時(shí))。如果使用默認(rèn)的樣式,你還可以創(chuàng)建一個(gè)鼠標(biāo)懸停狀態(tài),但要把兩種狀態(tài)的圖片放在一起,并且默認(rèn)的放上面,懸停狀態(tài)的放在下面(原文好難表達(dá)?。簓ou can create a hover state for the button by stacking the off state above the hover state in the image)。這只是一個(gè)比較便利的選項(xiàng),最好的方法還是把圖片寫(xiě)在CSS里面。 buttonText: '<div>選擇文件</div>', //設(shè)置按鈕文字。值會(huì)被當(dāng)作html渲染,所以也可以包含html標(biāo)簽 checkExisting: '/uploadify/check-exists.php', //接受一個(gè)文件路徑。此文件檢查正要上傳的文件名是否已經(jīng)存在目標(biāo)目錄中。存在時(shí)返回1,不存在時(shí)返回0(應(yīng)該主要是作為后臺(tái)的判斷吧),默認(rèn)為false debug: false, //開(kāi)啟或關(guān)閉debug模式 fileObjName:'filedata', //設(shè)置在后臺(tái)腳本使用的文件名。舉個(gè)例子,在php中,如果這個(gè)選項(xiàng)設(shè)置為'the_files',你可以使用$_FILES['the_files']存取這個(gè)已經(jīng)上傳的文件。 fileSizeLimit:'100MB', //設(shè)置上傳文件的容量最大值。這個(gè)值可以是一個(gè)數(shù)字或者字符串。如果是字符串,接受一個(gè)單位(B,KB,MB,GB)。如果是數(shù)字則默認(rèn)單位為KB。設(shè)置為0時(shí)表示不限制 fileTypeExts: '*.*', //設(shè)置允許上傳的文件擴(kuò)展名(也就是文件類型)。但手動(dòng)鍵入文件名可以繞過(guò)這種級(jí)別的安全檢查,所以你應(yīng)該始終在服務(wù)端中檢查文件類型。輸入多個(gè)擴(kuò)展名時(shí)用分號(hào)隔開(kāi)('*.jpg;*.png;*.gif') fileTypeDesc: 'All Files', //可選文件的描述。這個(gè)值出現(xiàn)在文件瀏覽窗口中的文件類型下拉選項(xiàng)中。(chrome下不支持,會(huì)顯示為'自定義文件',ie and firefox下可顯示描述) formData: { timestamp: '<?php echo $timestamp;?>', token: '<?php echo md5('unique_salt' . $timestamp);?>' }, //通過(guò)get或post上傳文件時(shí),此對(duì)象提供額外的數(shù)據(jù)。如果想動(dòng)態(tài)設(shè)置這些值,必須在onUploadStartg事件中使用settings的方法設(shè)置。在后臺(tái)腳本中使用 $_GET or $_POST arrays (PHP)存取這些值??垂倬W(wǎng)參考寫(xiě)法:http://www.uploadify.com/documentation/uploadify/formdata/ height: 30, //設(shè)置按鈕的高度(單位px),默認(rèn)為30.(不要在值里寫(xiě)上單位,并且要求一個(gè)整數(shù),width也一樣) width: 120, //設(shè)置按鈕寬度(單位px),默認(rèn)120 itemTemplate:false, //模板對(duì)象。給增加到上傳隊(duì)列中的每一項(xiàng)指定特殊的html模板。模板格式請(qǐng)看官網(wǎng)http://www.uploadify.com/documentation/uploadify/itemtemplate/ method:'post', //提交上傳文件的方法,接受post或get兩個(gè)值,默認(rèn)為post multi: false, //設(shè)置是否允許一次選擇多個(gè)文件,true為允許,false不允許 overrideEvents: [], //重寫(xiě)事件,接受事件名稱的數(shù)組作為參數(shù)。所設(shè)置的事件將可以被用戶重寫(xiě)覆蓋 preventCaching:true, //是否緩存swf文件。默認(rèn)為true,會(huì)給swf的url地址設(shè)置一個(gè)隨機(jī)數(shù),這樣它就不會(huì)被緩存。(有些瀏覽器緩存了swf文件就會(huì)觸發(fā)不了里面的事件--by rainweb) progressData: 'percentage', //設(shè)置文件上傳時(shí)顯示數(shù)據(jù),有‘percentage' or ‘speed'兩個(gè)參數(shù)(百分比和速度) queueID: false, //設(shè)置上傳隊(duì)列DOM元素的ID,上傳的項(xiàng)目會(huì)增加進(jìn)這個(gè)ID的DOM中。設(shè)置為false時(shí)則會(huì)自動(dòng)生成隊(duì)列DOM和ID。默認(rèn)為false queueSizeLimit: 999, //設(shè)置每一次上傳隊(duì)列中的文件數(shù)量。注意并不是限制總的上傳文件數(shù)量(那是uploadLimit).如果增加進(jìn)隊(duì)列中的文件數(shù)量超出這個(gè)值,將會(huì)觸發(fā)onSelectError事件。默認(rèn)值為999 removeCompleted: true, //是否移除掉隊(duì)列中已經(jīng)完成上傳的文件。false為不移除 removeTimeout: 3, //設(shè)置上傳完成后刪除掉文件的延遲時(shí)間,默認(rèn)為3秒。如果removeCompleted為false的話,就沒(méi)意義了 requeueErrors: false, //設(shè)置上傳過(guò)程中因?yàn)槌鲥e(cuò)導(dǎo)致上傳失敗的文件是否重新加入隊(duì)列中上傳 successTimeout: 30, //設(shè)置文件上傳后等待服務(wù)器響應(yīng)的秒數(shù),超出這個(gè)時(shí)間,將會(huì)被認(rèn)為上傳成功,默認(rèn)為30秒 swf: 'uploadify.swf', //swf的相對(duì)路徑,必寫(xiě)項(xiàng) uploader: 'uploadify.php' //服務(wù)器端腳本文件路徑,必寫(xiě)項(xiàng) uploadLimit: 999 //上傳文件的數(shù)量。達(dá)到或超出這數(shù)量會(huì)觸發(fā)onUploadError方法。默認(rèn)999 })
事件:
$('#file_upload').uploadify({ onCancel: function(file){ console.log('The file'+ file.name + 'was cancelled.') }, //文件被移除出隊(duì)列時(shí)觸發(fā),返回file參數(shù) onClearQueue: function(queueItemCount){ console.log(queueItemCount+'file(s) were removed frome the queue') }, //當(dāng)調(diào)用cancel方法且傳入'*'這個(gè)參數(shù)的時(shí)候觸發(fā),其實(shí)就是移除掉整個(gè)隊(duì)列里的文件時(shí)觸發(fā),上面有說(shuō)cancel方法帶*時(shí)取消整個(gè)上傳隊(duì)列 onDestroy: function(){ //調(diào)用destroy方法的時(shí)候觸發(fā) }, onDialogClose: function(queueData){ console.log(queueData.filesSelected+'\n'+queueData.filesQueued+'\r\n'+queueData.filesReplaced+'\r\n'+queueData.filesCancelled+'\r\n'+ queueData.filesErrored) }, //關(guān)閉掉瀏覽文件對(duì)話框時(shí)觸發(fā)。返回queueDate參數(shù),有以下屬性: /* filesSelected 瀏覽文件對(duì)話框中選取的文件數(shù)量 filesQueued 加入上傳隊(duì)列的文件數(shù) filesReplaced 被替換的文件個(gè)數(shù) filesCancelled 取消掉即將加入隊(duì)列中的文件個(gè)數(shù) filesErrored 返回錯(cuò)誤的文件個(gè)數(shù) */ onDialogOpen:function(){ //打開(kāi)選擇文件對(duì)話框時(shí)觸發(fā) }, onDisable:function(){ //禁用uploadify時(shí)觸發(fā)(通過(guò)disable方法) }, onEnalbe: function(){ //啟用uploadify時(shí)觸發(fā)(通過(guò)disable方法) }, onFallback:function(){ //在初始化時(shí)檢測(cè)不到瀏覽器有兼容性的flash版本時(shí)實(shí)觸發(fā) }, onInit: function(instance){ console.log('The queue ID is'+ instance.settings.queueID) }, //每次初始化一個(gè)隊(duì)列時(shí)觸發(fā),返回uploadify對(duì)象的實(shí)例 onQueueComplete:function(queueData){ console.log(queueData.uploadsSuccessful+'\n'+queueData.uploadsErrored) }, //隊(duì)列中的文件都上傳完后觸發(fā),返回queueDate參數(shù),有以下屬性: /* uploadsSuccessful 成功上傳的文件數(shù)量 uploadsErrored 出現(xiàn)錯(cuò)誤的文件數(shù)量 */ onSelect: function(file){ console.log(file.name) }, //選擇每個(gè)文件增加進(jìn)隊(duì)列時(shí)觸發(fā),返回file參數(shù) onSelectError: function(file,errorCode,errorMsg){ console.log(errorCode) console.log(this.queueData.errorMsg) }, //選擇文件出錯(cuò)時(shí)觸發(fā),返回file,erroCode,errorMsg三個(gè)參數(shù) /* errorCode是一個(gè)包含了錯(cuò)誤碼的js對(duì)象,用來(lái)查看事件中發(fā)送的錯(cuò)誤碼,以確定錯(cuò)誤的具體類型,可能會(huì)有以下的常量: QUEUE_LIMIT_EXCEEDED:-100 選擇的文件數(shù)量超過(guò)設(shè)定的最大值; FILE_EXCEEDS_SIZE_LIMIT:-110 文件的大小超出設(shè)定 INVALID_FILETYPE:-130 選擇的文件類型跟設(shè)置的不匹配 errorMsg 完整的錯(cuò)誤信息,如果你不重寫(xiě)默認(rèn)的事件處理器,可以使用‘this.queueData.errorMsg' 存取完整的錯(cuò)誤信息 */ onSWFReady: function(){ //swf動(dòng)畫(huà)加載完后觸發(fā),沒(méi)有參數(shù) }, onUploadComplete: function(file){ //在每一個(gè)文件上傳成功或失敗之后觸發(fā),返回上傳的文件對(duì)象或返回一個(gè)錯(cuò)誤,如果你想知道上傳是否成功,最后使用onUploadSuccess或onUploadError事件 }, onUploadError: function(file,errorCode,erorMsg,errorString){ }, //一個(gè)文件完成上傳但返回錯(cuò)誤時(shí)觸發(fā),有以下參數(shù) /* file 完成上傳的文件對(duì)象 errorCode 返回的錯(cuò)誤代碼 erorMsg 返回的錯(cuò)誤信息 errorString 包含所有錯(cuò)誤細(xì)節(jié)的可讀信息 */ onUploadProgress: function(file,bytesUploaded,bytesTotal,totalBytesUploaded,totalBytesTotal){ $('#pregress').html('總共需要上傳'+bytesTotal+'字節(jié),'+'已上傳'+totalBytesTotal+'字節(jié)') }, //每更新一個(gè)文件上傳進(jìn)度的時(shí)候觸發(fā),返回以下參數(shù) /* file 正上傳文件對(duì)象 bytesUploaded 文件已經(jīng)上傳的字節(jié)數(shù) bytesTotal 文件的總字節(jié)數(shù) totalBytesUploaded 在當(dāng)前上傳的操作中(所有文件)已上傳的總字節(jié)數(shù) totalBytesTotal 所有文件的總上傳字節(jié)數(shù) */ onUploadStart: function(file){ console.log('start update') }, //每個(gè)文件即將上傳前觸發(fā) onUploadSuccess: function(file,data,respone){ alert( 'id: ' + file.id + ' - 索引: ' + file.index + ' - 文件名: ' + file.name + ' - 文件大小: ' + file.size + ' - 類型: ' + file.type + ' - 創(chuàng)建日期: ' + file.creationdate + ' - 修改日期: ' + file.modificationdate + ' - 文件狀態(tài): ' + file.filestatus + ' - 服務(wù)器端消息: ' + data + ' - 是否上傳成功: ' + response); } //每個(gè)文件上傳成功后觸發(fā) })
方法:
Uploadify使用jquery推薦的插件模式,這意味著所有方法的調(diào)用都保持在一個(gè)命名空間里。 調(diào)用這些不同的方法,只需要把方法當(dāng)成第一個(gè)參數(shù)傳進(jìn)uploadify里調(diào)用就行。在這些方法后面增加參數(shù)會(huì)被傳進(jìn)這個(gè)方法里(這兩句翻譯得不是很順暢,附原文: To use the different method calls, simply call Uploadify on the DOM element with the method call as the first argument.Any additional arguments added after the method name are passed to the method.)
cancel:取消第一個(gè)上傳的文件,如果后面帶參數(shù)"*"則是取消掉整個(gè)上傳隊(duì)列,如$(el).uploadify('cancel', '*')
upload:上傳第一個(gè)上傳的文件,如果后面帶參數(shù)"*"則上傳整個(gè)隊(duì)列,跟cancel一樣
destroy:移除掉上傳組建,按html默認(rèn)的方法上傳
disable:有true or false 兩個(gè)參數(shù),表示是否禁止上傳按鈕,true表示禁止,false表示允許上傳
settings:返回或者更新一個(gè)實(shí)例的方法值,接受一個(gè)方法名的參數(shù)時(shí)是返回那個(gè)方法的值,當(dāng)后面再跟一個(gè)參數(shù),則是更新那個(gè)方法的值。如
$(el).uploadify('settings','buttonText','BROWSE'); //設(shè)置buttonText的值為BROWSE $(el).uploadify('settings','buttonText') //返回buttonText的值
stop:停止正在上傳中的文件或隊(duì)列
以上就是本文的全部?jī)?nèi)容,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 詳解jQuery uploadify文件上傳插件的使用方法
- Javascript使用uploadify來(lái)實(shí)現(xiàn)多文件上傳
- uploadify java實(shí)現(xiàn)多文件上傳和預(yù)覽
- jQuery.uploadify文件上傳組件實(shí)例講解
- ASP.NET多文件上傳控件Uploadify的使用方法
- ASP.NET文件上傳控件Uploadify的使用方法
- uploadify多文件上傳參數(shù)設(shè)置技巧
- php+jQuery.uploadify實(shí)現(xiàn)文件上傳教程
- jQuery文件上傳插件Uploadify使用指南
- JavaScript Uploadify文件上傳實(shí)例
相關(guān)文章
Jquery動(dòng)態(tài)替換div內(nèi)容及動(dòng)態(tài)展示的方法
這篇文章主要介紹了Jquery動(dòng)態(tài)替換div內(nèi)容及動(dòng)態(tài)展示的方法,動(dòng)態(tài)替換div內(nèi)容并展示的使用技巧與注意事項(xiàng),需要的朋友可以參考下2015-01-01jquery插件star-rating.js實(shí)現(xiàn)星級(jí)評(píng)分特效
Bootstrap Star Rating是一個(gè)簡(jiǎn)單而強(qiáng)大的jQuery插件實(shí)現(xiàn)星級(jí)分?jǐn)?shù)評(píng)級(jí)。支持像分?jǐn)?shù)星填充和RTL輸入先進(jìn)的功能。在利用純CSS-3造型使控制重點(diǎn)開(kāi)發(fā)。該插件使用引導(dǎo)標(biāo)記和造型默認(rèn)情況下,但它可以覆蓋與其他任何CSS的標(biāo)記。2015-04-04jQuery特殊符號(hào)轉(zhuǎn)義的實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇jQuery特殊符號(hào)轉(zhuǎn)義的實(shí)現(xiàn)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11jquery.pager.js實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了jquery.pager.js實(shí)現(xiàn)分頁(yè)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07

基于jquery的橫向滾動(dòng)條(滑動(dòng)條)

Jquery AJAX POST與GET之間的區(qū)別詳細(xì)介紹