介紹

ploadify是JQuery的一個上傳插件，支持多文件上傳，實現的效果非常不錯，帶進度顯示。

下載

前往官網進行下載，但小編髮現，各路人馬提供的官網全都打不開，在Github下載的文件爲uploadifive.js ，小編怎麼看這個文件名都覺得是個山寨貨，所以小編不推薦這種方式。
通過npm下載
```
npm install --save uploadify
```
小編提供

百度網盤

鏈接：https://pan.baidu.com/s/1IhaakTzKvSqCsQaS1IXPAA
提取碼：kxey

參數說明

屬性

{
      auto:true,//設置爲true當選擇文件後就直接上傳了，爲false需要點擊上傳按鈕才上傳 
      buttonClass:"",//按鈕樣式
      buttonCursor:"hand",//鼠標指針懸停在按鈕上的樣子
      buttonImage:null,//瀏覽按鈕的圖片的路徑
      buttonText:"SELECT FILES",//瀏覽按鈕的文本
      checkExisting:false,//文件上傳重複性檢查程序，檢查即將上傳的文件在服務器端是否已存在，存在返回1，不存在返回0
      debug:false,//如果設置爲true則表示啓用SWFUpload的調試模式
      fileObjName:"Filedata",//文件上傳對象的名稱，如果命名爲’the_files’，PHP程序可以用$_FILES['the_files']來處理上傳的文件對象
      fileSizeLimit:0,//上傳文件的大小限制 ，如果爲整數型則表示以KB爲單位的大小，如果是字符串，則可以使用(B, KB, MB, or GB)爲單位，比如’2MB’；如果設置爲0則表示無限制
      fileTypeDesc:"All Files",//這個屬性值必須設置fileTypeExts屬性後纔有效，用來設置選擇文件對話框中的提示文本，如設置fileTypeDesc爲“請選擇rar doc pdf文件”
      fileTypeExts:"*.*",//設置可以選擇的文件的類型，格式如：’*.doc;*.pdf;*.rar’
      formData:null,//JSON格式上傳每個文件的同時提交到服務器的額外數據，可在’onUploadStart’事件中使用’settings’方法動態設置
      height:30,//設置瀏覽按鈕的高度 ，默認值
      itemTemplate:false,//用於設置上傳隊列的HTML模版，可以使用以下標籤：instanceID – Uploadify實例的ID
                          /*fileID – 列隊中此文件的ID,或者理解爲此任務的ID
                          fileName – 文件的名稱
                          fileSize – 當前上傳文件的大小
                          插入模版標籤時使用格式如：${fileName}*/
      method:"Post",//提交方式Post或Get
      multi:true,//設置爲true時可以上傳多個文件
      overrideEvents:null,//設置哪些事件可以被重寫，JSON格式，如：’overrideEvents’ : ['onUploadProgress']
      preventCaching:true,//如果爲true，則每次上傳文件時自動加上一串隨機字符串參數，防止URL緩存影響上傳結果
      progressData:"percentage",//設置上傳進度顯示方式，percentage顯示上傳百分比，speed顯示上傳速度
      queueID:false,//設置上傳隊列容器DOM元素的ID，如果爲false則自動生成一個隊列容器
      queueSizeLimit:999,//隊列最多顯示的任務數量，如果選擇的文件數量超出此限制，將會出發onSelectError事件。注意此項並非最大文件上傳數量，如果要限制最大上傳文件數量，應設置uploadLimit
      removeCompleted:true,//是否自動將已完成任務從隊列中刪除，如果設置爲false則會一直保留此任務顯示
      removeTimeout:3,//如果設置了任務完成後自動從隊列中移除，則可以規定從完成到被移除的時間間隔
      requeueErrors:false,//如果設置爲true，則單個任務上傳失敗後將返回錯誤，並重新加入任務隊列上傳
      successTimeout:30,//文件上傳成功後服務端應返回成功標誌，此項設置返回結果的超時時間
      swf:"uploadify.swf",//uploadify.swf 文件的相對路徑
      uploader:"uploadify.php",//後臺處理程序的相對路徑
      uploadLimit:999,//最大上傳文件數量，如果達到或超出此限制將會觸發onUploadError事件
      width:120//設置文件瀏覽按鈕的寬度
  }

事件

名稱	說明
onCancel(file)	當點擊文件隊列中文件的關閉按鈕或點擊取消上傳時觸發，file參數爲被取消上傳的文件對象
onClearQueue(queueItemCount)	當調用函數cancel方法時觸發，queueItemCount參數爲被取消上傳的文件數量
onDestroy()	當destory方法被調用時觸發
onDialogClose(queueData)	當文件瀏覽框關閉時觸發，如果將此事件被重寫，則當向隊列添加文件上傳出錯時不會彈出錯誤消息提示。 queueData對象包含如下屬性： filesSelected – 文件選擇對話框中共選擇了多少個文件 filesQueued – 已經向隊列中添加了多少個文件 filesReplaced – 已經向隊列中替換了多少個文件 filesCancelled – 取消了多少個文件 filesErrored 出錯了多少個文件
onDialogOpen()	當文件選擇對話框彈出時立即出發，但可能在文件選擇對話框被關閉之前並不能全部執行
onDisable()	當disable方法禁用Uploadify上傳按鈕時被調用時觸發
onEnable()	當disable方法啓用Uploadify上傳按鈕時被調用時觸發
onFallback()	當Uploadify初始化過程中檢測到當前瀏覽器不支持flash時觸發
onInit()	首次初始化Uploadify結束時觸發
onQueueComplete(queueData)	文件上傳隊列處理完畢後觸發。 queueData對象包含如下屬性： uploadsSuccessful – 上傳成功的文件數量 uploadsErrored – 上傳失敗的文件數量
onSelect(file)	選擇文件後向隊列中添加每個上傳任務時都會觸發
onSelectError(file, errorCode, errorMsg)	選擇文件後向隊列中添加每個上傳任務時如果失敗都會觸發。 file – 文件對象 errorCode – 錯誤代碼如下： QUEUE_LIMIT_EXCEEDED – 任務數量超出隊列限制 FILE_EXCEEDS_SIZE_LIMIT – 文件大小超出限制 ZERO_BYTE_FILE – 文件大小爲0 INVALID_FILETYPE – 文件類型不符合要求 errorMsg – 錯誤提示，可通過’this.queueData.errorMsg’定製
onSWFReady()	Flash文件載入成功後觸發
onUploadComplete(file)	每個文件上傳完畢後無論成功與否都會觸發
onUploadError(file, errorCode, errorMsg, errorString)	文件上傳出錯時觸發，參數由服務端程序返回
nUploadProgress(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal)	處理上傳隊列的過程中會多次觸發此事件，每當任務狀態有更新時都會觸發 file – 文件對象 bytesUploaded – 已上傳的字節數 bytesTotal – 文件總字節數 totalBytesUploaded – 當前任務隊列中全部文件已上傳的總字節數 totalBytesTotal – 當前任務隊列中全部文件的總字節數
onUploadStart(file)	當文件即將開始上傳時立即觸發
onUploadSuccess(file, data, response)	當文件上傳成功時觸發 file – 文件對象 data – 服務端輸出返回的信息 response – 有輸出時爲true,如果無響應爲false，如果返回的是false,當超過successTimeout設置的時間後假定爲true

方法

名稱	說明	示例
cancel(fileID, suppressEvent)	取消隊列中的任務，不管此任務是否已經開始上傳 fileID – 要取消的文件ID，如果爲空則取消隊列中第一個任務，如果爲’*'則取消所有任務 suppressEvent – 是否阻止觸發onUploadCancel事件，當清空隊列時非常實用	`<a href="javascript:$(‘#file_upload’).uploadify(‘cancel’)">取消第一個</a> <a href="javascript:$(‘#file_upload’).uploadify(‘cancel’, ‘’)">清空隊列</a> <a href="javascript:$(‘#file_upload’).uploadify(‘upload’, ‘’)">開始上傳所有任務</a>`
destroy()	銷燬Uploadify實例並將文件上傳按鈕恢復到原始狀態	`<a href="javascript:$(‘#file_upload’).uploadify(‘destroy’)">銷燬Uploadify實例</a>`
disable(setDisabled)	禁用或啓用文件瀏覽按鈕 setDisabled – 設置爲true表示禁用，false爲啓用	`<a href="javascript:$(‘#file_upload’).uploadify(‘disable’, true)">禁用按鈕</a> <a href="javascript:$(‘#file_upload’).uploadify(‘disable’, false)">啓用按鈕</a>`
settings(name, value, resetObjects)	獲取或設置Uploadify實例參數 name – 屬性名稱，如果只提供屬性名稱則表示獲取其值 value – 屬性值 resetObjects – 設置爲true時，更新postData對象將清空現有的值。否則，新的值將被添加到其末尾	`$(‘#file_upload’).uploadify(‘settings’,'buttonText’,'BROWSE’); $(‘#file_upload’).uploadify(‘settings’,'buttonText’));`
stop()	停止當前正在上傳的任務	`<a href="javascript:$(‘#file_upload’).uploadify(‘upload’, ‘*’)">開始上傳</a> <a href="javascript:$(‘#file_upload’).uploadify(‘stop’)">停止上傳</a>`
upload(fileID)	立即上傳指定的文件，如果fileID爲’*'表示上傳所有文件，要指定上傳多個文件，則將每個文件的fileID作爲一個參數	`<a href="javascript:$(‘#file_upload’).uploadify(‘upload’,'*’)">開始上傳所</a>`

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="uploadify/uploadify.css">
</head>
<body>
    <h1>Uploadify Demo</h1>
    <form>
        <div id="queue"></div>
        <input id="file_upload" name="file_upload" type="file" multiple="true">
    </form>



    <h4>操作:</h4>
    <a href="javascript:$('#file_upload').uploadify('upload', '*');">開始上傳</a>
    |
    <a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除隊列</a>
    |
    <a href="javascript:$('#file_upload').uploadify('destroy');">銷燬上傳</a> |
    <a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上傳</a>
    |
    <a href="javascript:$('#file_upload').uploadify('disable', false);">激活上傳</a>
    |
    <a href="javascript:$('#file_upload').uploadify('stop');">停止上傳</a> |
    <a href="changeBtnText();">變換按鈕</a> |
    <h4>大小:</h4>
    <div id='progress'></div>

    <script src="js/jquery.min.js"></script>
    <script src="uploadify/jquery.uploadify.v2.1.4.js"></script>
    <script src="uploadify/swfobject.js"></script>

    <script type="text/javascript">
        $(function() {
            $('#file_upload').uploadify({
                'debug' 			: false,
                'auto' 				: true, //是否自動上傳,
                'buttonClass' 		: 'haha', //按鈕輔助class
                'buttonText' 		: '上傳圖片', //按鈕文字
                'height' 			: 30, //按鈕高度
                'width' 			: 100, //按鈕寬度
                'checkExisting' 	: 'check-exists.php',//是否檢測圖片存在,不檢測:false
                'fileObjName'		: 'files', //默認 Filedata, $_FILES控件名稱
                'fileSizeLimit'		: '1024KB', //文件大小限制 0爲無限制 默認KB
                'fileTypeDesc'		: 'All Files', //圖片選擇描述
                'fileTypeExts' 		: '*.gif; *.jpg; *.png',//文件後綴限制 默認：'*.*'
                'formData' 			: {
                    'someKey' : 'someValue',
                    'someOtherKey' : 1
                },//傳輸數據JSON格式
                // 'formData'		:{ 'albumid':$("#albumid").val() },
                //'overrideEvents'	: ['onUploadProgress'],  // The progress will not be updated
                //'progressData'	: 'speed',             //默認percentage 進度顯示方式
                'queueID' 			: 'queue', //默認隊列ID
                'queueSizeLimit' 	: 20, //一個隊列上傳文件數限制
                'removeCompleted'	: true, //完成時是否清除隊列 默認true
                'removeTimeout'		: 3, //完成時清除隊列顯示秒數,默認3秒
                'requeueErrors'		: false, //隊列上傳出錯，是否繼續回滾隊列
                'successTimeout'	: 5, //上傳超時
                'uploadLimit' 		: 99, //允許上傳的最多張數
                'swf' 				: '/uploadify/uploadify.swf', //swfUpload
                'uploader' 			: 'uploadify.php', //服務器端腳本

                //修改formData數據
                'onUploadStart' : function(file) {
                    //$("#file_upload").uploadify("settings", "someOtherKey", 2);
                },
                'onUploadStart' : function(file) {
                    //  $("#perpic").uploadify("settings","formData",{"albumid":$("#albumid").val()});
                },
                //刪除時觸發
                'onCancel' : function(file) {
                    //alert('The file ' + file.name + '--' + file.size + ' was cancelled.');
                },
                //清除隊列
                'onClearQueue' : function(queueItemCount) {
                    //alert(queueItemCount + ' file(s) were removed from the queue');
                },
                //調用destroy是觸發
                'onDestroy' : function() {
                    alert('我被銷燬了');
                },
                //每次初始化一個隊列是觸發
                'onInit' : function(instance) {
                    //alert('The queue ID is ' + instance.settings.queueID);
                },
                //上傳成功
                'onUploadSuccess' : function(file, data,
                                             response) {
                    //alert(file.name + ' | ' + response + ':' + data);
                },
                //上傳錯誤
                'onUploadError' : function(file, errorCode,
                                           errorMsg, errorString) {
                    //alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
                },
                //上傳彙總
                'onUploadProgress' : function(file,
                                              bytesUploaded, bytesTotal,
                                              totalBytesUploaded, totalBytesTotal) {
                    $('#progress').html(
                        totalBytesUploaded
                        + ' bytes uploaded of '
                        + totalBytesTotal
                        + ' bytes.');
                },
                //上傳完成
                'onUploadComplete' : function(file) {
                    //alert('The file ' + file.name + ' finished processing.');
                }
            });
        });

        //變換按鈕
        function changeBtnText() {
            $('#file_upload').uploadify('settings', 'buttonText', '繼續上傳');
        }

        //返回按鈕
        function returnBtnText() {
            alert('The button says '
                + $('#file_upload').uploadify('settings', 'buttonText'));
        }
    </script>
</body>
</html>

注：文件上傳需要後臺服務檯的支持，故小編在此只貼出前端代碼，畢竟，後臺不歸小編管呀~

uploadify---jQuery多文件上傳

介紹

下載

參數說明

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

vue項目中多行文本超出省略失效解決方式

uploadify---jQuery多文件上傳

input框輸入文本限制

metisMenu側邊欄插件

js 調用 IOS 、Android原生方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結