Extjs 使用fileupload外掛上傳檔案 帶進度條顯示
阿新 • • 發佈:2018-12-10
一.首先我們看看官方給出的外掛的解釋:
一個檔案上傳表單項具有自定義的樣式,並且可以控制按鈕的文字和 像文字表單的空文字類似的其他特性。 它使用一個隱藏的檔案輸入元素,並在使用者選擇檔案後 在form提交的同時執行實際的檔案上傳。
因為沒有安全的跨瀏覽器以程式設計的方式對file表單項設值的方式, 所以標準表單項的 setValue
方法是無效的。 getvalue方法的返回值取決於使用何種瀏覽器; 一些僅僅返回檔名, 一些返回一個完整的檔案路徑, 一些則返回檔案的虛擬路徑。
二.在我看來這個外掛就是在使用Ext的時候需要用到上傳檔案時的最好選擇,能夠做出效果,實現功能就是王道。
三.下面我們就看看實際運用的程式碼,我會在在難懂的地方做出解釋,希望對大家的理解有所幫助。
uploadEvent:function(){ //自定義點選“上傳”時觸發的事件。 var me =this; var uploadArea = Ext.create('Ext.form.Panel', { title : '', width : 350,height:105, bodyPadding : 10, margin:'-15 0 0 -20', frame : false, fileUpload: true, items : [{ xtype : 'filefield', name : 'file', id:'fileinput', margin:'5 0 0 0', fieldLabel : '檔案路徑', labelWidth : 60, msgTarget : 'side', allowBlank : false, anchor : '100%', buttonText : '請選擇檔案' }], buttons : [{ text : '上傳',margin:'0 10 25 0', handler : function() { var url = me.getUrl('flow_check/flow_new'); var form = uploadArea.getForm(); Ext.MessageBox.show({ //顯示上傳的提示資訊的視窗,有了此方法,下面的Ext.MessageBox.updateProgress函式才能使用 title: '請稍等', msg: '正在上傳...', progressText: '', width:300, progress:true, //這個也是和Ext.MessageBox.updateProgress函式想對應的,必須設定為true closable:false, animEl: 'loding' }); var updateProgress = function (progress) { if (progress >= 1) { Ext.MessageBox.updateProgress(1, "處理完成"); return; } Ext.MessageBox.updateProgress(progress, Math.round(progress * 100) + "%");//動態在進度條顯示百分比 Ext.defer(function () {//延遲500毫秒執行一次下面的函式。 updateProgress(progress + 0.1); }, 500); } form.submit({//表單提交,ajax請求,配置上傳成功與失敗的函式事件。 url: url, method: 'POST', success: function(f,a) { var result = Ext.JSON.decode(a.response.responseText); if(result.success == true){ me.fileName = result.data.filename; me.fileUrl = result.data.url; Ext.getCmp('uploadWindow').destroy(); Ext.getCmp('txt_filename').setText(me.fileName); } Ext.MessageBox.alert("提示:",result.msg); }, error: function() { } }); } }] }); Ext.create('Ext.Window', {//建立彈出的視窗,items設定為上面定義的uploadArea。 title: '上傳檔案', id:'uploadWindow', width:350, height:140, autoShow: true, modal: true, y: 200, bodyCls: 'um-create-form', items: uploadArea, animateTarget: event.target }); }
這樣就能夠實現一個帶進度條的extjs上傳檔案的控制元件了。
效果圖如下圖所示: