最近自己编写了一个EXR带有验证码的文件上传FORM,先看一个效果图,不多说了,看看代码吧
Index.jsp的代码
- <%@ page language="java" pageEncoding="GBK"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <link rel="stylesheet" type="text/css"
- href="ext-2.2/resources/css/ext-all.css">
- <script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="ext-2.2/ext-all.js"></script>
- <script type="text/javascript"
- src="ext-2.2/build/locale/ext-lang-zh_CN.js"></script>
- <script type="text/javascript" src="jslib/form.js"></script>
- </head>
- <body>
- <div id="formDiv"></div> <!-- form显示的地点-->
- </body>
- </html>
FORM.JS的代码
- Ext.onReady(function(){
- Ext.QuickTips.init();
- Ext.form.Field.prototype.msgTarget = "qtip";
- var f=new Ext.form.FormPanel({
- renderTo:"formDiv",
- timeout:60,
- fileUpload: true,//file upload!
- title:"DS",
- height:250,
- width:300,
- labelWidth:60,
- labelAlign:"left",
- frame:true,
- defaults:{xtype:"textfield",width:180},
- items:[
- {name:"username",fieldLabel:"Name",allowBlank:false,blankText:"Please Input Username"},
- {name:"password",fieldLabel:"Password",allowBlank:false,inputType:"password", blankText:"Please Input Password"},
- {name:"email",fieldLabel:"File" ,allowBlank:false,inputType:"file", allowBlank:false,blankText:"Please Input File Path"},
- {
- name: 'verifycode',
- id: 'randCode',
- fieldLabel: 'Verify Code',
- maxLength: 4,
- width: 80,
- allowBlank: false,
- blankText: 'Verify Code Can Not Be Empty!'
- },
- {xtype:"textarea",name:"intro",fieldLabel:"Result"}
- ],
- buttons:[{text:"OK",
- handler:function() {
- if(f.form.isValid()) {
- f.form.submit({
- waitTitle:"please wait for server executing..",
- waitMsg:"it is submiting..",
- url:"servlet/UploadServet",
- method:"POST",
- success:function(form,action)
- {
- reloadcode();
- var su = action.result.success;
- Ext.Msg.alert("success",action.result.data['result0']);
- },
- failure:function(form,action) {
- reloadcode();
- Ext.Msg.alert("failure",'Verify Code Wrong');
- }
- })
- }
- }
- },
- {text:"Cancel",
- handler:function() {
- f.form.reset();
- }
- }]
- })
- var bd = Ext.getDom('randCode');
- var bd2 = Ext.get(bd.parentNode);
- bd2.createChild([{
- tag: 'span',
- html: '<a href="javascript:reloadcode();">'
- }, {
- tag: 'img',
- id: 'safecode',
- src: 'verify/verify.jsp',
- align: 'absbottom'
- }]);
- });
- function reloadcode(){
- var verify = document.getElementById('safecode');
- verify.setAttribute('src', 'verify/verify.jsp');
- }