Ext 学习之简单学习快乐开发 文件上传
先引用js和css<link type="text/css" rel="stylesheet" href="../../resources/css/ext-all.css" /><script type="text/javascript" src="../../adapter/ext/ext-base.js"></script><script type="text/javascript" src="../../ext-all.js"></script> 然后复写样式表：
<style type="text/css">.tabs {background-image:url("../desktop/images/tabs.gif") !important;} .ux-lovcombo-icon { width:16px; height:16px; float:left; background-position: -1px -1px ! important; background-repeat:no-repeat ! important; } .ux-lovcombo-icon-checked { background: transparent url(../ext/resources/images/default/menu/checked.gif); } .ux-lovcombo-icon-unchecked { background: transparent url(../ext/resources/images/default/menu/unchecked.gif); }</style> 然后写ext脚本引用弹出窗口
<script type="text/javascript">var i = 0;var currentField;//上传form var uploadForm = new Ext.form.FormPanel({ baseCls : 'x-plain', labelWidth : 80,// layout:'fit', autoHeight:true, style:'margin-top:10', frame : true, disabledClass : "x-item-disabled", tbar : [{ xtype : 'button', text : '添加上传', labelAlign : 'right', icon : "image/add_16.gif", handler : function() { var uf = getUploadField(); uploadForm.add(uf); uploadForm.doLayout(true); upload_win.setHeight(upload_win.getHeight() + 47); } }, { xtype : 'label', text : '(单个最大允许上传50M)' }], //url : '',//__jadPath + '/sm/fileUploadAction!fileUpLoad.action', fileUpload : true, defaultType : 'textfield', items : }); //alert(__jadPath);function getUploadField(callFun) {//增加一行文件框var fileName = "文件 " + (++i) + " :";var uploadFileTf = new Ext.form.TextField({xtype : 'textfield',columnWidth : .7,name : 'file',inputType : 'file',allowBlank : false,blankText : '请选择上传文件',anchor : '90%'});var lbl = new Ext.form.Label({ text : fileName, columnWidth : .15, style : 'font-weight:bold;vertical-align: middle'});var fieldSet = new Ext.form.FieldSet({ layout : 'column', border : false});fieldSet.add(lbl);fieldSet.add(uploadFileTf);if (i != 1) { var deleteBtn = new Ext.Button({ text : '删除', icon : "image/remove.png", columnWidth : .15, handler : function() { fieldSet.destroy(); upload_win.setHeight(upload_win.getHeight() - 37); uploadForm.doLayout(true); } }); fieldSet.add(deleteBtn); } return fieldSet; } var upload_win = new Ext.Window({ title: '文件上传', width: 500, layout: 'fit', plain: true, bodyStyle : 'padding:5px;', buttonAlign : 'center', items: uploadForm, resizable : false, closeAction : 'close', iconCls: 'tabs', loadMask : true, autoHeight: true, height:160, buttons : [{text : '开始上传',icon : "image/upload.png",handler : function() {if (uploadForm.form.isValid()) { Ext.MessageBox.show({ title : 'Please wait', msg : '上传中...', progressText : '- - - -上传中- - - -', width : 300, progress : true, closable : false, animEl : 'loding'});uploadForm.getForm().submit({ url : '/uploadFileAttach.action', success : function(form, action) { var result = Ext.util.JSON.decode(action.response.responseText); Ext.Msg.alert('信息提示', result.message); var fn = callFunc.createCallback(result); fn(); upload_win.hide(); }, failure : function() { Ext.Msg.alert('信息提示', '文件上传失败'); upload_win.show(); }})}}}, { text : '关闭', icon : "image/btn-cancel.png", handler : function() { upload_win.hide(); }}]});upload_win.show();</script>后台Java处理代码： /** * 文件上传 * @return */public String upload() {File uploadFileDir = new File(ServletActionContext.getServletContext().getRealPath(Constants.FILE_ATTACH_PATH+"/"+fileType));if (!uploadFileDir.exists())uploadFileDir.mkdirs();SimpleDateFormat sdFormat = new SimpleDateFormat("yyyyMMddhhmmssSSS");int i = 0;List<FileAttach> listFile = new ArrayList<FileAttach>();for (File fileItem : file) {// 原文件名String oldFileName = fileFileName.get(i++);// 新文件名String newFileName = sdFormat.format(new Date()) + i;// 文件后缀String suffix = null;int index = oldFileName.lastIndexOf('.');if (-1 != index) {suffix = oldFileName.substring(index + 1, oldFileName.length());newFileName += "." + suffix;}InputStream bis = null;OutputStream bos = null;try {FileInputStream fs = new FileInputStream(fileItem);bis = new BufferedInputStream(fs);bos = new BufferedOutputStream(new FileOutputStream(new File(uploadFileDir, newFileName)));byte[] buf = new byte;int len = -1;while ((len = bis.read(buf)) != -1) {bos.write(buf, 0, len);}bos.flush();} catch (Exception e) {outJson("{success:false,message:'文件上传失败'}");e.printStackTrace();return null;} finally {try {if (null != bos)bos.close();if (null != bis)bis.close();} catch (IOException e) {e.printStackTrace();}}FileAttach file = file = new FileAttach();file.setCreateDate(new Date());file.setCreator("UNKown");file.setExt(suffix);file.setFileName(newFileName);file.setFilePath(Constants.FILE_ATTACH_PATH+"/"+fileType+"/"+newFileName);file.setFileType(fileType);file.setNote(" bytes");listFile.add(file);}try{this.fileAttachService.saveFiles(listFile);JSONObject jo=new JSONObject();jo.put("success", true);jo.put("list", listFile);jo.put("message", "上传完成！");outJson(jo.toString());}catch(Exception e){outJson("{success:false,message:'文件上传失败'}");e.printStackTrace();}return null;}
页:
[1]