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 : phone 126 }, function(form, action) { 127 var data = 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则无法创建b 32 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