【全網首創】修改 Ext.ux.UploadDialog.Dialog 原始碼支援多選新增檔案,批量上傳檔案
阿新 • • 發佈:2019-09-24
公司老框架的一個頁面需要用到檔案上傳,本以為修改一個配置引數即可解決,百度一番發現都在說這個第三方外掛不支援檔案多選功能,還有各種各樣缺點,暫且不討論這些吧。先完成領導安排下來的任務。
任務一:支援多選新增檔案
任務二:支援批量新增檔案
我們先來說第二個任務吧,第二個任務相比較容易些,經過半天研究原始碼,發現他每次都將檔案,新增到佇列中“queue”然後不停的拿佇列中的資料
新增佇列原始碼(大約在原始碼的第35行左右)
1 this.postEvent = function(event, data) 2 { 3 data = data || null; 4 this.queue.push({event: event, data: data}); 5 if (!this.is_processing) { 6 this.process(); 7 } 8 }
獲取佇列原始碼(大約在原始碼的第47行左右),拿到一條資料,就回調一次相應的方法
1 this.process = function() 2 { 3 while (this.queue.length > 0) { 4 this.is_processing = true; 5 var event_data = this.queue.shift(); 6 this.handler.call(this.scope, event_data.event, event_data.data); 7 } 8 this.is_processing = false; 9 }
經過大半天的除錯,發現是這個問題造成的,從佇列裡拿到一條資料後,誤認為上傳已完成,直接執行下面的操作,我是這樣解決他的,寫了個定時器,實時監控佇列中的個數,如果佇列中的個數不為0,不繼續執行其他的操作
解決方案部分截圖:
下面開始講解第一個任務
第一步:建立input標籤時,新增屬性:multiple: "multiple"(大約在原始碼的第283行左右)
1 this.input_file = Ext.DomHelper.append( 2 button_container, 3 { 4 tag: 'input', 5 type: 'file', 6 size: 1, 7 multiple: "multiple", 8 name: this.input_name || Ext.id(this.el), 9 style: 'position: absolute; display: block; border: none; cursor: pointer' 10 }, 11 true 12 );
第二步:修改新增檔案到上傳佇列原始碼,這裡沒辦法區分修改了那些程式碼,用的SVN區分(大約在原始碼的第1050行左右)
1 addFileToUploadQueue : function(browse_btn) 2 { 3 var input_file = browse_btn.detachInputFile(); 4 5 input_file.appendTo(this.form); 6 input_file.setStyle('width', '100px'); 7 input_file.dom.disabled = true; 8 //by:cyb,2019-9-24-相容多選新增檔案,會重複提交資料,建議後臺將上傳的資料去重操作!!! 9 var store = this.grid_panel.getStore(); 10 for (var i = 0; i < input_file.dom.files.length; i++) { 11 store.add( 12 new Ext.ux.UploadDialog.FileRecord({ 13 state: Ext.ux.UploadDialog.FileRecord.STATE_QUEUE, 14 filename: input_file.dom.value.replace(input_file.dom.files[0].name, input_file.dom.files[i].name), 15 note: this.i18n.note_queued_to_upload, 16 input_element: input_file 17 }) 18 ); 19 } 20 this.fsa.postEvent('file-added', input_file.dom.value); 21 }
修改原始碼支援新增多選,雖然功能實現了,稍微有點不足,開始上傳的時候,會重複提交佇列中的資料,建議後天做去重操作,暫時沒想到好的辦法解決,如果你有好的方案,歡迎下方留言!!!
創作不易,轉載請註明出處,覺得對你有幫助的話,幫忙推薦下,有不懂的地方,歡迎下方留言!~~
&n