extjs实现文件上传

ext的官方网站有许多大侠写了许多狠牛的上传控件,但是功能太炫,我感觉反而不适用!效果如下 上传完了之后地址会加载到上传内容这个文本框里面 里面还做了类型判断,用于上传文本和相片代码如下,把一下代码封装在一个js文件里面
Jscript代码 复制代码  收藏代码
  1. //*****************************************上传的公共js***************************************************************//   
  2.   
  3. /**  
  4.  
  5.  * 约定:types为调用时传来的参数.形式为jsp-gig-png  
  6.  
  7.  *      uploadid为上传后要填充路径的控件id  
  8.  
  9.  *      上传的属性均为upload  
  10.  
  11.  * 功能:页面调用openUpload("","");方法即可  
  12.  
  13.  */  
  14.   
  15. //...允许上传的后缀名   
  16.   
  17. var types = "";   
  18.   
  19.   
  20.   
  21. //...上传后填充控件的id   
  22.   
  23. var uploadid = "";   
  24.   
  25.   
  26.   
  27. function openUpload(type,id){   
  28.   
  29.     types = type;   
  30.   
  31.     uploadid = id;   
  32.   
  33.     winUpload.show();   
  34.   
  35.   }   
  36.   
  37.   
  38.   
  39. var formUpload = new Ext.form.FormPanel({   
  40.   
  41.     baseCls: 'x-plain',   
  42.   
  43.     labelWidth: 80,   
  44.   
  45.     fileUpload:true,   
  46.   
  47.     defaultType: 'textfield',   
  48.   
  49.     items: [{   
  50.   
  51.       xtype: 'textfield',   
  52.   
  53.       fieldLabel: '文 件',   
  54.   
  55.       name: 'upload',   
  56.   
  57.       inputType: 'file',   
  58.   
  59.       allowBlank: false,   
  60.   
  61.       blankText: '请上传文件',   
  62.   
  63.       anchor: '90%'  // anchor width by percentage   
  64.   
  65.     }]   
  66.   
  67.   });   
  68.   
  69.   
  70.   
  71. var winUpload = new Ext.Window({   
  72.   
  73.     title: '资源上传',   
  74.   
  75.     width: 400,   
  76.   
  77.     height:200,   
  78.   
  79.     minWidth: 300,   
  80.   
  81.     minHeight: 100,   
  82.   
  83.     layout: 'fit',   
  84.   
  85.     plain:true,   
  86.   
  87.     bodyStyle:'padding:5px;',   
  88.   
  89.     buttonAlign:'center',   
  90.   
  91.     items: formUpload,   
  92.   
  93.     buttons: [{   
  94.   
  95.       text: '上 传',   
  96.   
  97.       handler: function() {   
  98.   
  99.         if(formUpload.form.isValid()){   
  100.   
  101.           Ext.MessageBox.show({   
  102.   
  103.                title: 'Please wait',   
  104.   
  105.                msg: 'Uploading...',   
  106.   
  107.                progressText: '',   
  108.   
  109.                width:300,   
  110.   
  111.                progress:true,   
  112.   
  113.                closable:false,   
  114.   
  115.                animEl: 'loding'  
  116.   
  117.              });   
  118.   
  119.           formUpload.getForm().submit({       
  120.   
  121.             url:'uploadAction.action?types='+types,   
  122.   
  123.             success: function(form, action){   
  124.   
  125.                var objxzdz = Ext.get(uploadid).dom;   
  126.   
  127.                var value = action.result.msg;   
  128.   
  129.                objxzdz.value = value;   
  130.   
  131.                Ext.Msg.alert('成功','上传成功.');   
  132.   
  133.                winUpload.hide();     
  134.   
  135.             },       
  136.   
  137.              failure: function(form, action){       
  138.   
  139.               //... action生成的json{msg:上传失败},页面就可以用action.result.msg得到非常之灵活   
  140.   
  141.               Ext.Msg.alert('Error', action.result.msg);       
  142.   
  143.              }   
  144.   
  145.           })              
  146.   
  147.         }   
  148.   
  149.        }   
  150.   
  151.     },{   
  152.   
  153.       text: '取 消',   
  154.   
  155.       handler:function(){winUpload.hide();}   
  156.   
  157.     }]   
  158.   
  159.   });   
  160.   
  161. //*****************************************上传的公共js***************************************************************//   
  162.   
  163. 现在已经封装完毕了,我们看看在页面上如何调用   
  164. openUpload("txt-xls-doc-docs-pds","xzdzid");   
  165. 就这一句话,嘿嘿,简单吧?第一个参数为允许上传的类型,第二个参数为上传后地址要绑定到哪个控件(是该控件的id)   
  166.   
  167. action的代码还是贴下吧   
  168. <PRE class=java name="code">import java.io.File;   
  169.   
  170. import java.io.FileInputStream;   
  171.   
  172. import java.io.FileOutputStream;   
  173.   
  174.   
  175.   
  176. import org.apache.struts2.ServletActionContext;   
  177.   
  178.   
  179.   
  180. import net.ask123.ecommerce.common.util.Common;   
  181.   
  182. import net.ask123.ecommerce.common.util.Constants;   
  183.   
  184. import net.ask123.ecommerce.common.util.FileOperate;   
  185.   
  186. import net.ask123.ecommerce.common.util.VeDate;   
  187.   
  188.   
  189.   
  190. /**  
  191.  
  192.  * 上传的公共方法  
  193.  
  194.  *   
  195.  
  196.  * @author sam.zhang  
  197.  
  198.  *   
  199.  
  200.  */  
  201.   
  202. public class UploadAction extends ExtJsonActionSuport {   
  203.   
  204.   
  205.   
  206.     /**  
  207.  
  208.      *   
  209.  
  210.      */  
  211.   
  212.     private static final long serialVersionUID = 1L;   
  213.   
  214.   
  215.         //和前台的名字一样,这里约定是 upload   
  216.         private File upload;   
  217.   
  218.   
  219.   
  220.     private String uploadContentType;   
  221.   
  222.   
  223.   
  224.     private String uploadFileName;   
  225.   
  226.   
  227.   
  228.     private String savePath;   
  229.   
  230.   
  231.   
  232.     // 存放允许上传的后缀名   
  233.   
  234.     private String types;   
  235.   
  236.   
  237.   
  238.     public String getSavePath() {   
  239.   
  240.         return savePath;   
  241.   
  242.     }   
  243.   
  244.   
  245.   
  246.     public void setSavePath(String savePath) {   
  247.   
  248.         this.savePath = savePath;   
  249.   
  250.     }   
  251.   
  252.   
  253.   
  254.     public File getUpload() {   
  255.   
  256.         return upload;   
  257.   
  258.     }   
  259.   
  260.   
  261.   
  262.     public void setUpload(File upload) {   
  263.   
  264.         this.upload = upload;   
  265.   
  266.     }   
  267.   
  268.   
  269.   
  270.     public String getUploadContentType() {   
  271.   
  272.         return uploadContentType;   
  273.   
  274.     }   
  275.   
  276.   
  277.   
  278.     public void setUploadContentType(String uploadContentType) {   
  279.   
  280.         this.uploadContentType = uploadContentType;   
  281.   
  282.     }   
  283.   
  284.   
  285.   
  286.     public String getUploadFileName() {   
  287.   
  288.         return uploadFileName;   
  289.   
  290.     }   
  291.   
  292.   
  293.   
  294.     public void setUploadFileName(String uploadFileName) {   
  295.   
  296.         this.uploadFileName = uploadFileName;   
  297.   
  298.     }   
  299.   
  300.   
  301.   
  302.     public String getTypes() {   
  303.   
  304.         return types;   
  305.   
  306.     }   
  307.   
  308.   
  309.   
  310.     public void setTypes(String types) {   
  311.   
  312.         this.types = types;   
  313.   
  314.     }   
  315.   
  316.   
  317.   
  318.     @SuppressWarnings("deprecation")   
  319.   
  320.     public String execute() throws Exception {   
  321.   
  322.         String msg = "";   
  323.   
  324.         FileOperate fo = new FileOperate();   
  325.   
  326.   
  327.   
  328.         String sid = VeDate.getNo(4);   
  329.   
  330.   
  331.   
  332.         this.savePath = "/updownFiles";   
  333.   
  334.   
  335.   
  336.         try {   
  337.   
  338.   
  339.   
  340.             // ...获取文件后缀名   
  341.   
  342.             String ext = fo.getFileExt(getUploadFileName());   
  343.   
  344.   
  345.   
  346.             if ("".equals(this.types)   
  347.   
  348.                     || Common.indexofString(this.types, "-") == -1) {   
  349.   
  350.                 msg = "上传失败";   
  351.   
  352.                 this.setJsonString("{success:false,msg:'" + msg + "'}");   
  353.   
  354.                 return SUCCESS;   
  355.   
  356.             }   
  357.   
  358.   
  359.   
  360.             // ...判断上传的文件是否合法   
  361.   
  362.             boolean istrue = FileOperate.trueExt(this.types.split("-"), ext);   
  363.   
  364.             if (!istrue) {   
  365.   
  366.                 msg = "您上传的文件格式不正确,正确格式为" + this.types;   
  367.   
  368.                 this.setJsonString("{success:false,msg:'" + msg + "'}");   
  369.   
  370.                 return SUCCESS;   
  371.   
  372.             }   
  373.   
  374.   
  375.   
  376.             // ...文件存放的位置   
  377.   
  378.             String sPath = ServletActionContext.getRequest().getRealPath(   
  379.   
  380.                     this.getSavePath())   
  381.   
  382.                     + Constants.FILESPARA   
  383.   
  384.                     + sid.substring(0, 4)   
  385.   
  386.                     + Constants.FILESPARA   
  387.   
  388.                     + sid.substring(4, 6)   
  389.   
  390.                     + Constants.FILESPARA;   
  391.   
  392.   
  393.   
  394.             // ...保存在数据库的路径   
  395.   
  396.             String filePath = this.savePath + "/" + sid.substring(0, 4) + "/"  
  397.   
  398.                     + sid.substring(4, 6) + "/" + sid + "." + ext;   
  399.   
  400.   
  401.   
  402.             // 如果目录不存在则创建它   
  403.   
  404.   
  405.   
  406.             fo.createFolder(sPath);   
  407.   
  408.   
  409.   
  410.             FileOutputStream fileOutputStream = new FileOutputStream(sPath   
  411.   
  412.                     + sid + "." + ext);   
  413.   
  414.   
  415.   
  416.             FileInputStream fileInputStream = new FileInputStream(getUpload());   
  417.   
  418.             // ...   
  419.   
  420.             byte[] buffer = new byte[1024];   
  421.   
  422.             int len = 0;   
  423.   
  424.             while ((len = fileInputStream.read(buffer)) > 0) {   
  425.   
  426.                 fileOutputStream.write(buffer, 0, len);   
  427.   
  428.             }   
  429.   
  430.             this.setJsonString("{success:true,msg:'" + filePath + "'}");   
  431.   
  432.         } catch (Exception e) {   
  433.   
  434.             this.setJsonString("{success:false}");   
  435.   
  436.             e.printStackTrace();   
  437.   
  438.         }   
  439.   
  440.         return SUCCESS;   
  441.   
  442.     }   
  443.   
  444.   
  445.   
  446. }   
  447.   
  448. </PRE>   
  449. 这里就大致贴贴一下吧,如果看不懂的话把struts2学习下就ok了,这里不一定后台一定是java的,  
  • 3
    点赞
  • 4
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值