首页 > 代码库 > ExtJs_FileUpLoad的那些花样作死法
ExtJs_FileUpLoad的那些花样作死法
文件上传下载是必不可少,躲不过去的一个功能.无论什么时候,总会忽然蹦出来个功能需求.上传吧~下载呗...所以......就有了这个upload~ 不过这次相对来说容易点,在ExtJs下的,只需要给form一个 fileUpload : true 就ok~ 之后的没啥问题. 但是做的时候碰见个事儿. 就是IE这个货总是跟我对着干,我本来模仿form的出处我又忘记了 - -# 对不起啊大兄弟.我也忘记当时记下你的名字了. 在form里有这么一点,获取上传文件的文件名,或者安全路径比如 C:/fakepath/xxx.xxx 其实在Chrome下是这个,在FireFox下直接就是xxx.xxx 这样挺好,但是在IE下就不是,这货是 .看到了么? 空,毛都没有~ 本来的file是可以获取到的,跟Chrome一样,是一个安全路径加文件名.但是file要在后面做流传送不是,读到的file是个文件不是? 那咋办? 换参数喽...看咱的js先:
1 XZWindow = function(config) { 2 infoheadAddWin = false; 3 4 if (!infoheadAddWin) { 5 Ext.apply(config, { 6 XZWindow : infoheadAddWin 7 }); 8 form = XZForm(config); 9 Ext.apply(config, { 10 WindowForm : form 11 }); 12 infoheadAddWin = new Ext.Window({ 13 title : ‘新增‘, 14 width : 300, 15 height : 100, 16 bodyStyle : ‘padding:0px‘, 17 // resizable : true, 18 y : 100, 19 closeAction : ‘close‘, 20 maximizable : true, 21 items : form.getObj() 22 }); 23 } 24 infoheadAddWin.on("close", function() { 25 if (form) 26 form.getObj().getForm().reset(); 27 }) 28 form.reset(); 29 infoheadAddWin.show(); 30 31 } 32 33 // **********************新增**************************** 34 XZForm = function(config) { 35 36 var add_form = new Ext.form.FormPanel({ 37 layout : ‘form‘, 38 id : ‘XZForm‘, 39 border : false, 40 baseCls : ‘x-plain‘, 41 bodyStyle : ‘padding-top:2px;‘, 42 fileUpload : true, 43 items : [{ 44 layout : ‘column‘, 45 baseCls : ‘x-plain‘, 46 defaults : { 47 layout : ‘form‘, 48 baseCls : ‘x-plain‘, 49 }, 50 items : [ { 51 columnWidth : 1, 52 items : [{ 53 xtype : ‘textfield‘, 54 fieldLabel : ‘图片‘, 55 inputType : "file", 56 id : ‘form-file‘, 57 name : ‘file‘, 58 allowBlank : false, 59 anchor : ‘90%‘, 60 listeners : { 61 change : function(o) { 62 var sec = Ext.getCmp("form-file") 63 .getValue(); 64 Ext.getCmp("fileName").setValue(sec) 65 } 66 } 67 }] 68 }, { 69 xtype : ‘hidden‘, 70 id : ‘fileName‘, 71 name : ‘fileFileName‘, 72 text : Ext.getCmp("form-file") 73 // 在上传这个框中，getCmp可以获取整条路径的最后的名称 74 /** 75 * @author zhaolf 2015/01/16 76 * @ carefully 77 * 此方法实际证明在IE内核浏览器下无法获取 78 // * 在Chrome 下 C:/fakepath/xxx.xx 79 * 在Firefox 下 xxx.xx 80 */ 81 }] 82 }], 83 buttons : [{ 84 text : ‘保存‘, 85 iconCls : ‘icon_save‘, 86 handler : function() { 87 pFormSave(); 88 } 89 }, { 90 id : ‘cancel_btn‘, 91 iconCls : ‘icon_cancel‘, 92 text : ‘取消‘, 93 handler : function() { 94 infoheadAddWin.close(); 95 }, 96 scope : this 97 }] 98 }); 99 function pFormSave(params) {100 add_form.getForm().submit({101 url : Ext.getDom("root").value + ‘/base/cfoodinfo!fileupload.do?fuckie=‘+Ext.getCmp(‘form-file‘).getValue(),102 method : ‘post‘,103 params : ‘fileFileName=‘ + Ext.getCmp("form-file").getValue(),104 waitMsg : ‘图片上传中...‘,105 success : function(form, o) {106 hs.MessageHelper.info({107 msg : ‘操作成功！‘108 });109 infoheadAddWin.close();110 config.grid.refresh();111 },112 failure : function(fp, o) {113 hs.MessageHelper.info({114 msg : ‘失败！不支持的图片类型或菜品已存在！‘115 });116 }117 });118 }119 return {120 getObj : function() {121 return add_form;122 },123 load : function(phone) {124 hs.FormHelper.load(URL.GET, {125 id : phone126 }, function(form, action) {127 var data =http://www.mamicode.com/ Ext.util.JSON.decode(action.result.data);128 form.clearInvalid();129 form.setValues(data);130 }, add_form.getForm());131 },132 reset : function() {133 add_form.getForm().items.each(function(f) {134 f.setValue("");135 });136 }137 }138 }
试试证明 写出来就这个么样子 略显丑陋什么的,那些细节先略过.主要是功能~
注意到101(- - #这个行号...)
url : Ext.getDom("root").value + ‘/base/cfoodinfo!fileupload.do?fuckie=‘+Ext.getCmp(‘form-file‘).getValue(),
后面加了个fuckie~ 我只是想表达...
!!!这边还有个问题,带参数的URL 我在&传多个参数的时候后面的无效~嗯,记下需要琢磨一下!!!
话有点多,前面也就这个样子了.下面记录一下后面的写法:
1 private File file;2 String path = Parameter.imgPath;//配置文件 存放路径3 String imgUrlpath = Parameter.imgUrlpath;//配置文件 地址转换路径
需要个这,这个file在这边是当成File类型参数了,所以接收前面的也是文件,文件名称就有待定义了.
1 /* 文件上传 */ 2 public void fileupload() throws IOException { 3 User u = (User) SecurityContextHolder.getContext().getAuthentication().getPrincipal();// 获取session中存储用户信息 4 HttpServletResponse response = this.getResponse(); 5 response.setContentType("text/html;charset=UTF-8"); 6 response.setCharacterEncoding("UTF-8");// 防止弹出的信息出现乱码 7 String fileFileName = this.getRequest().getParameter("fuckie");// 图片名称 8 9 String[] str = { ".JPG", ".jpg", ".JPEG", ".jpeg", ".gif", ".GIF",10 ".PNG", ".png", ".BMP", ".bmp" };// 支持的图片格式11 String strN = "";12 System.out.println("上传文件名"+fileFileName);13 if ((null != fileFileName && !"".equals(fileFileName))&& fileFileName.lastIndexOf(".") != -1) {14 strN = fileFileName.substring(fileFileName.lastIndexOf("."),fileFileName.length());// 获取上传文件名的后缀名15 }else{16 System.out.println("上传失败:无法解析后缀名");17 }18 19 boolean bimg = false;20 for (int j = 0; j < str.length; j++) {21 if (str[j].equals(strN)) {22 bimg = true;23 }24 }25 if (bimg) {26 String shopid = "";// 店铺标识27 shopid = u.getDuty();28 try {29 //判断商户个人文件夹是否存在,如存在则使用,不存在则创建 30 // 双层目录嵌套,需首先创建上级目录后创建下级目录31 // 如 mkdir /home/a/b 如无a则无法创建b32 File stfFile = new File(path + shopid);33 if (!stfFile.exists() && !stfFile.isDirectory()) {34 System.out.println("首次创建" + path + shopid);35 stfFile.mkdir();36 }37 File tfFile = new File(path + shopid + "/audit");38 if (!tfFile.exists() && !tfFile.isDirectory()) {39 System.out.println("首次创建" + path + shopid + "/audit");40 tfFile.mkdir();41 }42 43 InputStream is = new FileInputStream(file);44 // 拼接保存路径, 图片命名为 i_urlbase64(菜名)+strN(原图片后缀名) 45 String rootRdir = imgUrlpath + shopid + "/i_"+ UrlBase64Coder.encoded("图片测试") + strN;46 47 File destFile = new File(path + shopid + "/audit/", "/i_"+ UrlBase64Coder.encoded("图片测试") + strN);48 OutputStream os = new FileOutputStream(destFile);49 byte[] buffer = new byte[1024 * 10];50 int length = 0;51 while ((length = is.read(buffer)) > 0) {52 os.write(buffer, 0, length);53 }54 os.close();55 is.close();56 System.out.println(rootRdir);57 58 FoodInfo fi = new FoodInfo();59 //设置菜品ID为商户ID_i_菜品名称URLBASE64编码 60 System.out.println("上传成功!");61 PrintWriter out = response.getWriter();62 out.print("{\"success\":true}");63 out.flush();64 65 } catch (Exception e1) {66 e1.printStackTrace();67 }68 } else {69 PrintWriter out = response.getWriter();70 out.print("{\"success\":false}");71 out.flush();72 System.out.println("上传失败:不支持的图片类型！");73 }74 }
有个64URLsafe编码的问题:
1 class UrlBase64Coder { 2 public final static String ENCODING = "UTF-8"; 3 4 // 加密 5 public static String encoded(String data) 6 throws UnsupportedEncodingException { 7 byte[] b = Base64.encodeBase64(data.getBytes(ENCODING)); 8 return new String(b, ENCODING).replace("/", "_").replace("+", "-"); 9 }10 11 // 解密12 public static String decode(String data)13 throws UnsupportedEncodingException {14 15 byte[] b = Base64.decodeBase64(data.replace("_", "/").replace("-", "+")16 .getBytes(ENCODING));17 return new String(b, ENCODING);18 }19 }
用的是import org.apache.commons.codec.binary.Base64;这个 commons-codec-1.3.jar 基本就这个样子了
上传没啥东西.我想要记录的就是那个恶心人的IE...给加了个参数传递它的值...后面的就没啥意义了~也就是写长点,显得很专业的样子 ^. ^
下载的话...没啥问题吧? 后面有时间补上一个.
叶落星辰 W
ExtJs_FileUpLoad的那些花样作死法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。