EXT制作了一个带有验证码的文件上传FORM

最新推荐文章于 2024-09-26 01:42:12 发布

小强提包包

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量528

点赞数

文章标签： ext function stylesheet action javascript file

本文链接：https://blog.csdn.net/yiming910/article/details/3727239

版权

最近自己编写了一个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');
}
 