ExtJS Form表单下传 _JavaScript

ExtJS Form表单上传

一、在页面引入相关的JS文件

Ext.ux.form.FileUploadField是ExtJS的文件上传组件，如果要使用它，可以从ExtJS的安装目录下的/examples/ux目录拷贝到项目中，然后在head里面引入js文件，比如放在网站的script目录下，可以这样写：

<script type="text/javascript" src="../ext-3.4.0/ux/fileuploadfield/FileUploadField.js"></script>

当然，其他和ExtJS相关的JS文件和CSS文件照常引入。

<link rel="stylesheet" type="text/css" href="../ext-3.4.0/ux/fileuploadfield/css/fileuploadfield.css">

当然，其他和ExtJS相关的JS文件和CSS文件照常引入。

以下是upload.js

Ext.onReady(function(){
	var fp = new Ext.FormPanel(
	{
		renderTo : 'd',
		fileUpload : true,
		width: 500,
		border : true,
		labelWidth :70,
		title: '上传文件',
		frame:true,
		bodyStyle : 'padding: 10px;',
		defaults:{width:200},
		items :[{
            xtype: 'textfield',
            fieldLabel: '文件名称',
            name:'name'

        },{
        	//第一个上传控件
			 xtype: 'fileuploadfield',
			 buttonText : '文件1...',
			 name : 'upload1',
			 emptyText: '请您选择文件',
             fieldLabel: 'Photo1',
             name: 'path'  
//            buttonCfg: {
//                text: '浏览'
//                iconCls: 'upload-icon'     //按钮图标
//            }	
			},
			//第二个上传控件
			new Ext.ux.form.FileUploadField( //这里和上面的xtype是一样的意思
			{
				buttonText : '文件2...',
				name : 'upload2',
				fieldLabel:'Photo2'
			}),
			//第三个上传控件
			new Ext.ux.form.FileUploadField(
			{
				buttonText : '文件3...', 
				name : 'upload3',
				fieldLabel:'Photo3'
			})],
			
 		buttons: [{
            text: '保存',
            handler: function(){
            	alert(fp.getForm().findField('path').getValue());
                if(fp.getForm().isValid()){
                     fp.getForm().submit({
                         url: '/MyWeb/servlet/MyServlet',     //后台处理页面（可以是php，asp，aspx，jsp等等）
                         waitMsg: '正在上传...',
                         success: function(fp, o){
                             Ext.MessageBox.alert('恭喜您', '上传 "'+o.result.file+'" 成功！');
                         }
                     });
                }
            }
        },{
            text: '重置',
            handler: function(){
               fp.getForm().reset();
            }
        }]
	});	
});

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="../ext-3.4.0/resources/css/ext-all.css">
    <script type="text/javascript" src="../ext-3.4.0/adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="../ext-3.4.0/ext-all-debug.js"></script>
    
     <link rel="stylesheet" type="text/css" href="../ext-3.4.0/ux/fileuploadfield/css/fileuploadfield.css">
    <script type="text/javascript" src="../ext-3.4.0/ux/fileuploadfield/FileUploadField.js"></script>
    
    <script type="text/javascript" src="upload.js"></script>
  </head>
  <body>
  	<div id="d"></div>
  </body>
</html>

要导FileUploadField.js才能运行

更多请查看:http://www.itzhai.com/extjss-fileuploadfield-multiple-files-upload-component.html