1.項(xiàng)目中需要圖片的異步上傳,度娘之后發(fā)現(xiàn)有一個(gè)插件可以完成這個(gè)需求,即是:Uploadify

下面是這個(gè)異步上傳的插件的一個(gè)簡(jiǎn)單介紹:
基于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/
控件截圖：

插件圖片.png

2.下面簡(jiǎn)單的介紹一下這個(gè)插件的用法

2.1 首先我們需要在項(xiàng)目中引用下面的文件:

<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>

2.2 創(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' 　　 //這里設(shè)置你的選項(xiàng)　
        });　
　});
</script>

通過(guò)上面的步驟,就完成了一個(gè)最基本的上傳插件的組建.
基本原理是改變你創(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

3.Options:

$('#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á)跋啃浮：you 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ò)展名（也就是文件類(lèi)型）。但手動(dòng)鍵入文件名可以繞過(guò)這種級(jí)別的安全檢查授药，所以你應(yīng)該始終在服務(wù)端中檢查文件類(lèi)型。輸入多個(gè)擴(kuò)展名時(shí)用分號(hào)隔開(kāi)('*.jpg;*.png;*.gif')
                fileTypeDesc: 'All Files',
                //可選文件的描述悔叽。這個(gè)值出現(xiàn)在文件瀏覽窗口中的文件類(lèi)型下拉選項(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ǎ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ě)事件稠腊，接受事件名稱(chēng)的數(shù)組作為參數(shù)躁染。所設(shè)置的事件將可以被用戶(hù)重寫(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的話(huà)，就沒(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
            })

4.** Events:**

$('#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ì)話(huà)框時(shí)觸發(fā)。返回queueDate參數(shù)臀稚，有以下屬性：
                /*
                    filesSelected 瀏覽文件對(duì)話(huà)框中選取的文件數(shù)量
                    filesQueued 加入上傳隊(duì)列的文件數(shù)
                    filesReplaced 被替換的文件個(gè)數(shù)
                    filesCancelled 取消掉即將加入隊(duì)列中的文件個(gè)數(shù)
                    filesErrored 返回錯(cuò)誤的文件個(gè)數(shù)
                */
                onDialogOpen:function(){
                    //打開(kāi)選擇文件對(duì)話(huà)框時(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ò)誤的具體類(lèi)型，可能會(huì)有以下的常量：
                    QUEUE_LIMIT_EXCEEDED:-100 選擇的文件數(shù)量超過(guò)設(shè)定的最大值抒钱；
                    FILE_EXCEEDS_SIZE_LIMIT:-110 文件的大小超出設(shè)定
                    INVALID_FILETYPE:-130 選擇的文件類(lèi)型跟設(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
　　　　　　　　　　　　　　　　+ ' - 類(lèi)型: ' + file.type
　　　　　　　　　　　　　　　　+ ' - 創(chuàng)建日期: ' + file.creationdate
　　　　　　　　　　　　　　　　+ ' - 修改日期: ' + file.modificationdate
　　　　　　　　　　　　　　　　+ ' - 文件狀態(tài): ' + file.filestatus
　　　　　　　　　　　　　　　　+ ' - 服務(wù)器端消息: ' + data
　　　　　　　　　　　　　　　　+ ' - 是否上傳成功: ' + response);
                }
                //每個(gè)文件上傳成功后觸發(fā)              
})

5.Methods：

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ì)列

總結(jié)到這里就暫時(shí)完結(jié)啦,關(guān)于異步上傳圖片插件的用法還需要去深入的研究,以后再更.今天就到這里了,鼓掌撒花~么么噠