Extjs 使用fileupload插件上传文件 带进度条显示
|
|
摘要：一.首先我们看看官方给出的插件的解释：一个文件上传表单项具有自定义的样式，并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性。 它使用一个隐藏的文件输入元素，并在用户选择文件后 在form提交的同时执行实际的文件上传。因为没有安全的跨浏览器以编程的方式对file表单项设值的方式, 所以标准表...
一.首先我们看看官方给出的插件的解释：
一个文件上传表单项具有自定义的样式，并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性。 它使用一个隐藏的文件输入元素，并在用户选择文件后 在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上传文件的控件了。
效果图如下图所示：
教程完了，大家还有什么不懂的，可以继续提问。希望对大家有帮助。谢谢支持！