ux.plup.File plupload 集成 ux.plup.FileLis 批量上傳預覽

  1 //plupload 集成
  2 Ext.define('ux.plup.File', {
  3     extend: 'Ext.form.field.Text',
  4     xtype: 'plupFile',
  5     alias: ['widget.plupFile'],
  6     requires: ['Ext.form.trigger.Component', 'Ext.button.Button', 'Ext.window.Toast'],
  7     //plup對象
  8     uploader: null,
  9     //上傳文件最大數量限制,最小隻能設置爲1
 10     maxFileCount: 1,
 11     //是否單文件上傳,結合FileList使用時必須設置爲false,不然不會有預覽效果
 12     onlyOne: true,
 13     //上傳地址,必須
 14     url: 'upload.php',
 15     //上傳控件配置
 16     pluploadConfig: {
 17         //url 服務器端的上傳頁面地址,必須指定
 18         //swf文件，當須要使用swf方式進行上傳時須要配置該參數,必須指定
 19         flash_swf_url: 'app/js/plupload/js/Moxie.swf',
 20         //用來指定上傳方式，指定多個上傳方式請使用逗號隔開。通常狀況下，你不須要配置該參數，由於Plupload默認會根據你的其餘的參數配置來選擇最合適的上傳方式。若是沒有特殊要求的話，Plupload會首先選擇html5上傳方式，若是瀏覽器不支持html5，則會使用flash或silverlight，若是前面二者也都不支持，則會使用最傳統的html4上傳方式。若是你想指定使用某個上傳方式，或改變上傳方式的優先順序，則你能夠配置該參數。
 21         //html5,flash,silverlight,html4
 22         runtimes: 'html5,flash,html4',
 23         // 可使用該參數來限制上傳文件的類型，大小等，該參數以對象的形式傳入，它包括三個屬性： 
 24         filters: {
 25             //mime_types：用來限定上傳文件的類型，爲一個數組，該數組的每一個元素又是一個對象，該對象有title和extensions兩個屬性，title爲該過濾器的名稱，extensions爲文件擴展名，有多個時用逗號隔開。該屬性默認爲一個空數組，即不作限制。
 26             //max_file_size:用來限定上傳文件的大小，若是文件體積超過了該值，則不能被選取。值能夠爲一個數字，單位爲b,也能夠是一個字符串，由數字和單位組成，如'200kb'
 27             //prevent_duplicates:是否容許選取重複的文件，爲true時表示不容許，爲false時表示容許，默認爲false。若是兩個文件的文件名和大小都相同，則會被認爲是重複的文件
 28             prevent_duplicates: true
 29         }
 30         // multi_selection:是否能夠在文件瀏覽對話框中選擇多個文件，true爲能夠，false爲不能夠。默認true，便可以選擇多個文件。須要注意的是，在某些不支持多選文件的環境中，默認值是false。好比在ios7的safari瀏覽器中，因爲存在bug，形成不能多選文件。固然，在html4上傳方式中，也是沒法多選文件的。 
 31     },
 32     /**
 33      * @cfg {String} emptyText
 34      * Overridden to undefined as {@link #emptyText} is not supported with {@link #inputType inputType}:'file' and should be avoided.
 35      * The default text to place into an empty field.
 36      */
 37     emptyText: undefined,
 38 
 39     needArrowKeys: false,
 40 
 41     triggers: {
 42         //禁用時顯示的按鈕
 43         //由於上傳按鈕禁用效果無效，因此在禁用時顯示另一個按鈕
 44         //這樣就能夠避免禁用按鈕失效的bug
 45         disableButton: {
 46             type: 'component',
 47             hideOnReadOnly: false,
 48             hidden: true,
 49             // Most form fields prevent the default browser action on mousedown of the trigger.
 50             // This is intended to prevent the field's input element from losing focus when
 51             // the trigger is clicked.  File fields disable this behavior because:
 52             // 1. The input element does not receive focus when the field is focused. The button does.
 53             // 2. Preventing the default action of touchstart (translated from mousedown
 54             // on mobile browsers) prevents the browser's file dialog from opening.
 55             preventMouseDown: false
 56         },
 57         filebutton: {
 58             type: 'component',
 59             hideOnReadOnly: false,
 60             // Most form fields prevent the default browser action on mousedown of the trigger.
 61             // This is intended to prevent the field's input element from losing focus when
 62             // the trigger is clicked.  File fields disable this behavior because:
 63             // 1. The input element does not receive focus when the field is focused. The button does.
 64             // 2. Preventing the default action of touchstart (translated from mousedown
 65             // on mobile browsers) prevents the browser's file dialog from opening.
 66             preventMouseDown: false
 67         }
 68     },
 69 
 70     //<locale>
 71     /**
 72      * @cfg {String} buttonText
 73      * The button text to display on the upload button. Note that if you supply a value for
 74      * {@link #buttonConfig}, the buttonConfig.text value will be used instead if available.
 75      */
 76     buttonText: '選擇文件',
 77     //</locale>
 78     /**
 79      * @cfg {Boolean} buttonOnly
 80      * True to display the file upload field as a button with no visible text field. If true, all
 81      * inherited Text members will still be available.
 82      */
 83     buttonOnly: false,
 84 
 85     /**
 86      * @cfg {Number} buttonMargin
 87      * The number of pixels of space reserved between the button and the text field. Note that this only
 88      * applies if {@link #buttonOnly} = false.
 89      */
 90     buttonMargin: 3,
 91 
 92     /**
 93      * @cfg {Boolean} clearOnSubmit
 94      * 提交後清除值
 95      */
 96     clearOnSubmit: true,
 97 
 98     /**
 99      * @private
100      */
101     extraFieldBodyCls: Ext.baseCSSPrefix + 'form-file-wrap',
102 
103     /**
104      * @private
105      */
106     inputCls: Ext.baseCSSPrefix + 'form-text-file',
107 
108     /**
109      * @cfg {Boolean} [readOnly=true]
110      *只讀，禁止修改
111      */
112     readOnly: true,
113 
114     /**
115      * @cfg {Boolean} editable
116      * @inheritdoc
117      */
118     editable: false,
119     //form表單中不提交值
120     submitValue: true,
121 
122     /**
123      * Do not show hand pointer over text field since file choose dialog is only shown when clicking in the button
124      * @private
125      */
126     triggerNoEditCls: '',
127 
128     /**
129      * @private
130      * Extract the file element, button outer element, and button active element.
131      */
132     childEls: ['browseButtonWrap'],
133 
134     /**
135      * @private 建立上傳按鈕
136      */
137     applyTriggers: function (triggers) {
138         var me = this,
139         triggerCfg = (triggers || {}).filebutton,
140         disableCfg = triggers.disableButton;
141         //增長禁用按鈕
142         if (disableCfg) {
143             disableCfg.component = Ext.apply({
144                 xtype: 'button',
145                 ownerCt: me,
146                 id: me.id + '-disableButton',
147                 ui: me.ui,
148                 disabled: true,
149                 text: me.buttonText
150             })
151         }
152         //增長上傳按鈕
153         if (triggerCfg) {
154             triggerCfg.component = Ext.apply({
155                 xtype: 'button',
156                 ownerCt: me,
157                 id: me.id + '-button',
158                 ui: me.ui,
159                 disabled: me.disabled,
160                 text: me.buttonText,
161                 //設置margin-left
162                 style: me.buttonOnly ? '' : me.getButtonMarginProp() + me.buttonMargin + 'px',
163                 listeners: {
164                     scope: me,
165                     render: me.createPlup
166                 }
167             },
168             me.buttonConfig);
169 
170             return me.callParent([triggers]);
171         }
172             // <debug>
173         else {
174             Ext.raise(me.$className + ' requires a valid trigger config containing "button" specification');
175         }
176         // </debug>
177     },
178 
179     /**
180      * @private
181      */
182     onRender: function () {
183         var me = this,
184         inputEl, button, buttonEl, trigger;
185 
186         me.callParent(arguments);
187 
188         inputEl = me.inputEl;
189         //它不該該有name
190         inputEl.dom.name = '';
191 
192         //有些瀏覽器會顯示在該領域的閃爍的光標，即便它是隻讀的。若是咱們有這樣的事情
193         //得到焦點，就轉發給咱們focusEl。還注意到，在IE中，文件輸入做爲處理
194         //2元素Tab鍵的目的（文本，而後按鈕）。因此，當你經過TAB鍵，這將須要2
195         //標籤才能到下一個字段。據我知道有沒有辦法解決這個在任何一種合理的方式。
196         inputEl.on('focus', me.onInputFocus, me);
197         inputEl.on('mousedown', me.onInputMouseDown, me);
198         //獲取上傳按鈕
199         trigger = me.getTrigger('filebutton');
200         button = me.button = trigger.component;
201         buttonEl = button.el;
202         if (me.buttonOnly) {
203             me.inputWrap.setDisplayed(false);
204             me.shrinkWrap = 3;
205         }
206 
207         // Ensure the trigger element is sized correctly upon render
208         trigger.el.setWidth(buttonEl.getWidth() + buttonEl.getMargin('lr'));
209         if (Ext.isIE) {
210             me.button.getEl().repaint();
211         }
212     },
213     /**
214      * Gets the markup to be inserted into the subTplMarkup.
215      */
216     getTriggerMarkup: function () {
217         console.log('getTriggerMarkup');
218         return '<td id="' + this.id + '-browseButtonWrap" data-ref="browseButtonWrap" role="presentation"></td>';
219     },
220     onShow: function () {
221         this.callParent();
222         //若是咱們開始了隱藏，按鈕可能有一個搞砸佈局
223         //由於咱們不像個容器
224         this.button.updateLayout();
225     },
226     //建立上傳控件
227     createPlup: function (btn) {
228         var me = this,
229         //上傳配置
230         config = me.pluploadConfig,
231         //name值
232         name = me.getName(),
233         //設置上傳地址
234         url = me.url,
235         uploader;
236         //獲取當前按鈕id
237         config.browse_button = btn.getId();
238         //指定文件上傳時文件域的名稱，默認爲file,例如在php中你可使用$_FILES['file']來獲取上傳的文件信息
239         if (name) {
240             config.file_data_name = name;
241         }
242         if (url) {
243             config.url = url;
244         }
245         //上傳文件最大數量限制爲1時，選擇文件只能選擇一個
246         if (me.maxFileCount === 1) {
247             config.multi_selection = false;
248         }
249 
250         //建立上傳對象
251         uploader = me.uploader = new plupload.Uploader(config);
252         //初始化
253         uploader.init();
254         //監聽錯誤文件被添加到上傳隊列時
255         uploader.bind('FilesAdded',
256         function (uploader, files) {
257             me.filesAdded(uploader, files);
258         });
259         //監聽錯誤
260         //-602 重複文件
261         uploader.bind('Error',
262         function (uploader, file) {
263             var code = file.code;
264             if (code === -200) {
265                 //上傳失敗
266                 me.loadedFailure(uploader, {
267                     message: file.message
268                 });
269             } else {
270                 //拋出內部錯誤
271                 me.markInvalid(file.message);
272             }
273         });
274         //上傳完成
275         uploader.bind('FileUploaded',
276         function (loader, file, response) {
277             response = Ext.decode(response.response);
278             if (response.success) {
279                 //上傳成功
280                 me.loadedSuccess(response);
281             } else {
282                 //上傳失敗
283                 me.loadedFailure(loader, response);
284             }
285         });
286         //會在文件上傳過程當中不斷觸發，能夠用此事件來顯示上傳進度 
287         uploader.bind('UploadProgress',
288         function (loader, file) {
289              Ext.Msg.updateProgress(loader.total.percent / 100, loader.total.percent + '%', '正在上傳：' + file.name);
290             //console.log(loader.total.percent);
291             if (loader.total.percent == 100) {
292                 Ext.Msg.wait('上傳成功，正在處理數據...','上傳文件');
293             } 
294         });
295     },
296     //文件被添加到上傳隊列
297     //uploader 上傳對象
298     //files 當前選中文件組
299     filesAdded: function (uploader, files) {
300         var me = this,
301         //上傳文件最大數量限制
302         maxFileCount = me.maxFileCount,
303         //現有文件（包括新選擇的文件）
304         oldFiles = uploader.files,
305         //現有文件總數
306         length = oldFiles.length,
307         i, count;
308 
309         //上傳文件最大數量限制爲1,而且onlyOne爲true時
310         if (maxFileCount === 1 && me.onlyOne) {
311             length = length - 2;
312             //移除除最新文件以外全部文件
313             for (i = length; i >= 0; i--) {
314                 uploader.removeFile(oldFiles[i]);
315             }
316             //設置文本框顯示值
317             me.setValue(oldFiles[0].name);
318         } else {
319             //文件數量超過或等於最大限制，禁用文件選擇
320             if (length >= maxFileCount) {
321                 count = length - maxFileCount;
322                 //從files中移除多於最大數量限制的文件，從最新選擇的文件開始移除
323                 for (i = 0; i < count; i++) {
324                     files.pop();
325                 }
326                 me.onDisable();
327             }
328             length = length - 1;
329             maxFileCount = maxFileCount - 1;
330             //移除多於最大數量限制的文件，從最新選擇的文件開始移除
331             for (i = length; i > maxFileCount; i--) {
332                 uploader.removeFile(oldFiles[i]);
333             }
334             //設置文本框顯示值
335             me.setValue(files[0].name);
336             //拋出事件,供FileList使用
337             me.fireEvent('addField', files);
338         }
339     },
340     //移除文件
341     removeFile: function (file) {
342         var me = this,
343         uploader = me.uploader,
344         files;
345         //移除文件
346         uploader.removeFile(file);
347         files = uploader.files;
348         //取消禁用
349         me.onEnable();
350         //設置文本框的值
351         if (uploader.files.length <= 0) {
352             me.setValue(null);
353         } else {
354             me.setValue(files[0].name);
355         }
356     },
357     submit: function (params) {
358         var me = this,
359         url = params.url,
360         waitMsg = params.waitMsg || '正在上傳',
361         optionParams = params.params,
362         uploader = me.uploader;
363         //設置上傳地址
364         if (url) {
365             uploader.setOption('url', url);
366         }
367         //設置參數
368         if (optionParams) {
369             uploader.setOption('multipart_params', optionParams);
370         }
371         //上傳成功執行方法
372         me.success = params.success || Ext.emptyFn;
373         //上傳失敗執行方法
374         me.failure = params.failure || Ext.emptyFn;
375         uploader.start();
376         Ext.Msg.progress('上傳文件', waitMsg);
377     },
378     //上傳成功
379     loadedSuccess: function (response) {
380         Ext.MessageBox.hide();
381         this.reset();
382         //拋出事件
383         this.fireEvent('loadedSuccess', this);
384         //執行成功函數
385         this.success(response);
386     },
387     //上傳失敗
388     loadedFailure: function (loader, response) {
389         //中止上傳
390         loader.stop();
391         //隱藏進度條
392         Ext.MessageBox.hide();
393         //重置
394         this.reset();
395         //拋出事件
396         this.fireEvent('loadedFailure', this);
397         //執行失敗函數
398         this.failure(response);
399     },
400     //上傳成功執行,submit方法回調
401     success: Ext.emptyFn,
402     //上傳失敗執行,submit方法回調
403     failure: Ext.emptyFn,
404     //重置上傳控件
405     reset: function () {
406         var uploader = this.uploader,
407         files = uploader.files,
408         //現有文件總數
409         length = files.length - 1,
410         i;
411         //移除全部文件
412         for (i = length; i > -1; i--) {
413             uploader.removeFile(files[i]);
414         }
415         this.onEnable();
416         this.callParent();
417     },
418     //禁用控件tab鍵切換功能
419     getSubTplData: function (fieldData) {
420         var data = this.callParent([fieldData]);
421         //由於它是上傳控件不該該獲取焦點;
422         //然而input元素天然是可聚焦，因此咱們必須
423         //由它的tabIndex設置爲-1停用。
424         data.tabIdx = -1;
425 
426         return data;
427     },
428     //禁用
429     onDisable: function () {
430         this.callParent();
431         this.setFileEnable(true);
432     },
433     //取消禁用
434     onEnable: function () {
435         this.callParent();
436         this.setFileEnable(false);
437     },
438     //更改禁用狀態
439     setFileEnable: function (is) {
440         var me = this;
441         //設置上傳控件是否禁用
442         //某些狀況下設置會失效，緣由不明
443         me.uploader.disableBrowse(is);
444         //當上傳按鈕隱藏時顯示一個假按鈕
445         //上傳按啓用時隱藏加按鈕
446         //這個解決方案是爲了不上面說的禁用失效問題
447         me.getTrigger('disableButton').setHidden(!is);
448         me.getTrigger('filebutton').setHidden(is);
449         //重繪佈局
450         me.updateLayout();
451     },
452     //銷燬
453     onDestroy: function () {
454         this.uploader.destroy();
455         this.callParent();
456     },
457     restoreInput: function (el) {
458         //若是咱們不渲染，咱們不須要作任何事情，它會建立
459         //當咱們刷新到DOM。
460         if (this.rendered) {
461             var button = this.button;
462             button.restoreInput(el);
463             this.fileInputEl = button.fileInputEl;
464         }
465     },
466     getButtonMarginProp: function () {
467         return 'margin-left:';
468     },
469     //輸入框得到焦點
470     onInputFocus: function () {
471         this.focus();
472         //從只讀輸入元素切換焦點文件輸入
473         //結果在文件輸入的不正確的定位。
474         //添加和刪除位置：相對有助於解決這個問題。
475         //見https://sencha.jira.com/browse/EXTJS-18933
476         if (Ext.isIE9m) {
477             this.fileInputEl.addCls(Ext.baseCSSPrefix + 'position-relative');
478             this.fileInputEl.removeCls(Ext.baseCSSPrefix + 'position-relative');
479         }
480     },
481     //點擊輸入框
482     onInputMouseDown: function (e) {
483         //console.log('onInputMouseDown');
484         //有些瀏覽器將顯示即便輸入是隻讀的光標，
485         //這將在inputEl之間聚焦隨後的聚焦跳躍的短瞬間
486         //和文件按鈕是可見的。 
487         //從閃爍的重點消除防止inputEl。
488         e.preventDefault();
489 
490         this.focus();
491     },
492     privates: {
493         getFocusEl: function () {
494             return this.button;
495         },
496 
497         getFocusClsEl: Ext.privateFn
498     }
499 });

用法等同form.submit()方法，獲取控件後plupFile.submit()便可提交，可能有坑

  1 //自定義批量上傳預覽控件
  2 //isUpload爲true時每選擇一個文件都會觸發onAddField事件，須要自行處理上傳，多用於修改場景
  3 //isUpload爲false時每選擇一個文件都會在本地自增file控件，最後在表單中手動批量提交
  4 Ext.define('ux.plup.FileList', {
  5     extend: 'Ext.container.Container',
  6     alias: ['widget.plupFileList'],
  7     requires: ['Ext.DataView', 'ux.plup.File'],
  8     //樣式
  9     cls: 'uxFileList',
 10     config: {
 11         //數據
 12         data: null,
 13         //預覽視圖
 14         dataview: {
 15             itemTpl: new Ext.XTemplate('<div class="thumb-wrap bb" style="background-image:url({img});">', '<button type="button" class="x-fa fa-trash"></button>', '</div>', '<p>{name}</p>')
 16         },
 17         //上傳控件配置
 18         uploaderField: {
 19             onlyOne: false,
 20             buttonOnly: true,
 21             //提交後清除
 22             clearOnSubmit: false,
 23             fieldLabel: '上傳文件',
 24             msgTarget: 'under'
 25         },
 26         //uploader配置
 27         pluploadConfig:null
 28     },
 29     //是否當即上傳
 30     isUpload: false,
 31     //是否只能查看
 32     isSee: false,
 33     //當前文件總數
 34     fieldCount:0,
 35     //上傳文件數量限制,默認一個
 36     maxFileCount: 1,
 37     //默認預覽圖片路徑，上傳文件非圖片時使用
 38     preview: {
 39         //文件
 40         file: 'classic/resources/images/file.png',
 41         //視頻
 42         video: 'classic/resources/images/video.jpg'
 43     },
 44     //初始化
 45     initComponent: function () {
 46         var me = this;
 47         me.callParent(arguments);
 48         //新增上傳控件、圖片列表
 49         me.add([me.getUploaderField(), me.getDataview()]);
 50     },
 51     //設置isSee
 52     setIsSee: function (isSee) {
 53         this.isSee = isSee;
 54     },
 55     //設置isUpload
 56     setIsUpload: function (isUpload) {
 57         this.isUpload = isUpload;
 58     },
 59     /*建立上傳控件*/
 60     applyUploaderField: function (config) {
 61         config.maxFileCount = this.maxFileCount;
 62         return Ext.factory(config, ux.plup.File, this.getUploaderField());
 63     },
 64     /*更新上傳控件*/
 65     updateUploaderField: function (newItem) {
 66         if (newItem) {
 67             //監聽上傳控件
 68             newItem.on({
 69                 scope: this,
 70                 addField: 'onAddField',
 71                 loadedFailure: 'removeAll'
 72             });
 73         }
 74     },
 75     //更新上傳控件配置
 76     updatePluploadConfig: function (option) {
 77         if (option) {
 78             var uploaderField = this.getUploaderField(),
 79                 uploader = uploaderField.uploader;
 80             uploader.setOption(option);
 81             uploaderField.reset();
 82             this.removeAll();
 83         }
 84     },
 85     //選擇文件完成
 86     onAddField: function (files) {
 87         var me = this,
 88            length = files.length,
 89            i;
 90         if (me.isUpload) {
 91             //拋出事件
 92             me.fireEvent('onAddField', me, files);
 93         } else {
 94             //添加預覽圖片
 95             for (i = 0; i < length; i++) {
 96                 me.previewImage(files[i], function (file, src) {
 97                     me.addData({
 98                         //預覽圖片
 99                         img: src,
100                         //文件名稱
101                         name: file.name,
102                         file: file
103                     });
104                 })
105             }
106         }
107     },
108     //獲取上傳文件預覽圖
109     //plupload中爲咱們提供了mOxie對象
110     //有關mOxie的介紹和說明請看：https://github.com/moxiecode/moxie/wiki/API
111     previewImage: function (file, callback) {
112         //若是不是圖片,返回默認預覽圖
113         if (!file || !/image\//.test(file.type)) {
114             var url = this.preview.file;
115             //若是是視頻格式
116             if (/video\//.test(file.type)) {
117                 url = this.preview.video;
118             } 
119             callback && callback(file, url);
120         };
121         //確保文件是圖片
122         if (file.type === 'image/gif') {
123             //gif使用FileReader進行預覽,由於mOxie.Image只支持jpg和png
124             var fr = new mOxie.FileReader();
125             fr.onload = function () {
126                 callback && callback(file, fr.result);
127                 fr.destroy();
128                 fr = null;
129             }
130             fr.readAsDataURL(file.getSource());
131         } else {
132             var preloader = new mOxie.Image();
133             preloader.onload = function () {
134                 ////先壓縮一下要預覽的圖片,寬300，高300
135                 //preloader.downsize(300, 300);
136                 var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL(); //獲得圖片src,實質爲一個base64編碼的數據
137                 callback && callback(file, imgsrc); //callback傳入的參數爲預覽圖片的url
138                 preloader.destroy();
139                 preloader = null;
140             };
141             preloader.load(file.getSource());
142         }
143     },
144     /*建立圖片列表*/
145     applyDataview: function (config) {
146         return Ext.factory(config, Ext.DataView, this.getDataview());
147     },
148     /* 更新圖片列表*/
149     updateDataview: function (newItem) {
150         if (newItem) {
151             //監聽預覽列表
152             newItem.on({
153                 itemclick: 'itemclick',
154                 itemdblclick: 'itemdblclick',
155                 scope: this
156             });
157         }
158     },
159     //單擊刪除
160     itemclick: function (t, record, item, index, e) {
161         var me = this,
162         store = t.getStore();
163         //點擊刪除按鈕才執行
164         if (!me.isSee && e.target.tagName === 'BUTTON') {
165             Ext.MessageBox.confirm('刪除確認', '確認刪除?',
166             function (btnText) {
167                 if (btnText === 'yes') {
168                     me.removeFile(me, store, record);
169                 }
170             }, me);
171         }
172     },
173     //雙擊觸發事件
174     itemdblclick: function (t, record, item, index, e) {
175         var me = this;
176         if (e.target.tagName !== 'BUTTON') {
177             me.fireEvent('onItemDbClick', me, record);
178         }
179     },
180     //新增圖片
181     addData: function (data) {
182         var me = this,
183         store = me.getStore(), //獲取最大限制
184         maxFileCount = me.maxFileCount;
185         if (store && store.storeId !== 'ext-empty-store') {
186             //已有數據，新增
187             store.add(data);
188             if (!data.file) {
189                 //檢測數目
190                 me.fieldCount = me.fieldCount || 0;
191                 //總數加1
192                 me.fieldCount++;
193                 //若是達到最大限制禁用
194                 if (me.fieldCount >= maxFileCount) {
195                     me.onDisable();
196                 }
197                 me.setValue(data.name);
198             }
199         } else {
200             //沒有數據，建立
201             me.setData([data]);
202         }
203     },
204     /*建立data*/
205     applyData: function (data) {
206         return data;
207     },
208     /*更新data*/
209     updateData: function (data) {
210         if (data && data.length > 0) {
211             //有數據則建立store
212             var me = this,
213             dataview = me.getDataview(),
214             //獲取最大限制
215             maxFileCount = me.maxFileCount;
216             dataview.setStore(Ext.create('Ext.data.Store', {
217                 data: data,
218                 autoDestroy: true
219             }));
220             me.fieldCount = data.length;
221             //若是達到最大限制禁用
222             if (me.fieldCount >= maxFileCount) {
223                 me.onDisable();
224             }
225             me.setValue(data[0].name);
226         }
227     },
228     //獲取全部數據
229     getStore: function () {
230         return this.getDataview().getStore();
231     },
232     //清除全部數據
233     removeAll: function () {
234         var store = this.getStore();
235         if (store) {
236             store.removeAll();
237         }
238     },
239     //移除單個文件
240     removeFile: function (me, store, record) {
241         var file = record.get('file'),
242             uploaderField = this.getUploaderField();
243         if (file) {
244             uploaderField.removeFile(record.get('file'));
245         } else {
246             me.onEnable();
247         }
248         me.fieldCount--;
249         store.remove(record);
250         if (me.fieldCount<=0) {
251             uploaderField.setValue(null);
252         } else {
253             uploaderField.setValue(store.getAt(0).get('name'));
254         }
255     },
256     //上傳附件
257     submit: function (params) {
258         this.getUploaderField().submit(params);
259     },
260     //禁用
261     onDisable: function () {
262         var file = this.getUploaderField();
263         file.onDisable();
264     },
265     //取消禁用
266     onEnable: function () {
267         this.getUploaderField().onEnable();
268     },
269     //設置文本框的值
270     setValue: function (value) {
271         this.getUploaderField().setValue(value);
272     }
273 
274 });