ExtJs_FileUpLoad的那些花样作死法
2015-01-19 11:26
183 查看
文件上传下载是必不可少,躲不过去的一个功能.无论什么时候,总会忽然蹦出来个功能需求.上传吧~下载呗...所以......就有了这个upload~ 不过这次相对来说容易点,在ExtJs下的,只需要给form一个 fileUpload : true 就ok~ 之后的没啥问题. 但是做的时候碰见个事儿. 就是IE这个货总是跟我对着干,我本来模仿form的出处我又忘记了 - -# 对不起啊大兄弟.我也忘记当时记下你的名字了. 在form里有这么一点,获取上传文件的文件名,或者安全路径比如 C:/fakepath/xxx.xxx 其实在Chrome下是这个,在FireFox下直接就是xxx.xxx 这样挺好,但是在IE下就不是,这货是 .看到了么? 空,毛都没有~ 本来的file是可以获取到的,跟Chrome一样,是一个安全路径加文件名.但是file要在后面做流传送不是,读到的file是个文件不是? 那咋办? 换参数喽...看咱的js先:
试试证明 写出来就这个么样子 略显丑陋什么的,那些细节先略过.主要是功能~
![](http://images.cnitblog.com/blog/660992/201501/191051036563033.png)
注意到101(- - #这个行号...)
url : Ext.getDom("root").value + '/base/cfoodinfo!fileupload.do?fuckie='+Ext.getCmp('form-file').getValue(),
后面加了个fuckie~ 我只是想表达...
!!!这边还有个问题,带参数的URL 我在&传多个参数的时候后面的无效~嗯,记下需要琢磨一下!!!
话有点多,前面也就这个样子了.下面记录一下后面的写法:
需要个这,这个file在这边是当成File类型参数了,所以接收前面的也是文件,文件名称就有待定义了.
有个64URLsafe编码的问题:
用的是import org.apache.commons.codec.binary.Base64;这个 commons-codec-1.3.jar 基本就这个样子了
上传没啥东西.我想要记录的就是那个恶心人的IE...给加了个参数传递它的值...后面的就没啥意义了~也就是写长点,显得很专业的样子 ^. ^
下载的话...没啥问题吧? 后面有时间补上一个.
叶落星辰 W
XZWindow = function(config) { infoheadAddWin = false; if (!infoheadAddWin) { Ext.apply(config, { XZWindow : infoheadAddWin }); form = XZForm(config); Ext.apply(config, { WindowForm : form }); infoheadAddWin = new Ext.Window({ title : '新增', width : 300, height : 100, bodyStyle : 'padding:0px', // resizable : true, y : 100, closeAction : 'close', maximizable : true, items : form.getObj() }); } infoheadAddWin.on("close", function() { if (form) form.getObj().getForm().reset(); }) form.reset(); infoheadAddWin.show(); } // **********************新增**************************** XZForm = function(config) { var add_form = new Ext.form.FormPanel({ layout : 'form', id : 'XZForm', border : false, baseCls : 'x-plain', bodyStyle : 'padding-top:2px;', fileUpload : true, items : [{ layout : 'column', baseCls : 'x-plain', defaults : { layout : 'form', baseCls : 'x-plain', }, items : [ { columnWidth : 1, items : [{ xtype : 'textfield', fieldLabel : '图片', inputType : "file", id : 'form-file', name : 'file', allowBlank : false, anchor : '90%', listeners : { change : function(o) { var sec = Ext.getCmp("form-file") .getValue(); Ext.getCmp("fileName").setValue(sec) } } }] }, { xtype : 'hidden', id : 'fileName', name : 'fileFileName', text : Ext.getCmp("form-file") // 在上传这个框中,getCmp可以获取整条路径的最后的名称 /** * @author zhaolf 2015/01/16 * @ carefully * 此方法实际证明在IE内核浏览器下无法获取 // * 在Chrome 下 C:/fakepath/xxx.xx * 在Firefox 下 xxx.xx */ }] }], buttons : [{ text : '保存', iconCls : 'icon_save', handler : function() { pFormSave(); } }, { id : 'cancel_btn', iconCls : 'icon_cancel', text : '取消', handler : function() { infoheadAddWin.close(); }, scope : this }] }); function pFormSave(params) { add_form.getForm().submit({ url : Ext.getDom("root").value + '/base/cfoodinfo!fileupload.do?fuckie='+Ext.getCmp('form-file').getValue(), method : 'post', params : 'fileFileName=' + Ext.getCmp("form-file").getValue(), waitMsg : '图片上传中...', success : function(form, o) { hs.MessageHelper.info({ msg : '操作成功!' }); infoheadAddWin.close(); config.grid.refresh(); }, failure : function(fp, o) { hs.MessageHelper.info({ msg : '失败!不支持的图片类型或菜品已存在!' }); } }); } return { getObj : function() { return add_form; }, load : function(phone) { hs.FormHelper.load(URL.GET, { id : phone }, function(form, action) { var data = Ext.util.JSON.decode(action.result.data); form.clearInvalid(); form.setValues(data); }, add_form.getForm()); }, reset : function() { add_form.getForm().items.each(function(f) { f.setValue(""); }); } } }
试试证明 写出来就这个么样子 略显丑陋什么的,那些细节先略过.主要是功能~
![](http://images.cnitblog.com/blog/660992/201501/191051036563033.png)
注意到101(- - #这个行号...)
url : Ext.getDom("root").value + '/base/cfoodinfo!fileupload.do?fuckie='+Ext.getCmp('form-file').getValue(),
后面加了个fuckie~ 我只是想表达...
!!!这边还有个问题,带参数的URL 我在&传多个参数的时候后面的无效~嗯,记下需要琢磨一下!!!
话有点多,前面也就这个样子了.下面记录一下后面的写法:
private File file; String path = Parameter.imgPath;//配置文件 存放路径 String imgUrlpath = Parameter.imgUrlpath;//配置文件 地址转换路径
需要个这,这个file在这边是当成File类型参数了,所以接收前面的也是文件,文件名称就有待定义了.
/* 文件上传 */ public void fileupload() throws IOException { User u = (User) SecurityContextHolder.getContext().getAuthentication().getPrincipal();// 获取session中存储用户信息 HttpServletResponse response = this.getResponse(); response.setContentType("text/html;charset=UTF-8"); response.setCharacterEncoding("UTF-8");// 防止弹出的信息出现乱码 String fileFileName = this.getRequest().getParameter("fuckie");// 图片名称 String[] str = { ".JPG", ".jpg", ".JPEG", ".jpeg", ".gif", ".GIF", ".PNG", ".png", ".BMP", ".bmp" };// 支持的图片格式 String strN = ""; System.out.println("上传文件名"+fileFileName); if ((null != fileFileName && !"".equals(fileFileName))&& fileFileName.lastIndexOf(".") != -1) { strN = fileFileName.substring(fileFileName.lastIndexOf("."),fileFileName.length());// 获取上传文件名的后缀名 }else{ System.out.println("上传失败:无法解析后缀名"); } boolean bimg = false; for (int j = 0; j < str.length; j++) { if (str[j].equals(strN)) { bimg = true; } } if (bimg) { String shopid = "";// 店铺标识 shopid = u.getDuty(); try { //判断商户个人文件夹是否存在,如存在则使用,不存在则创建 // 双层目录嵌套,需首先创建上级目录后创建下级目录 // 如 mkdir /home/a/b 如无a则无法创建b File stfFile = new File(path + shopid); if (!stfFile.exists() && !stfFile.isDirectory()) { System.out.println("首次创建" + path + shopid); stfFile.mkdir(); } File tfFile = new File(path + shopid + "/audit"); if (!tfFile.exists() && !tfFile.isDirectory()) { System.out.println("首次创建" + path + shopid + "/audit"); tfFile.mkdir(); } InputStream is = new FileInputStream(file); // 拼接保存路径, 图片命名为 i_urlbase64(菜名)+strN(原图片后缀名) String rootRdir = imgUrlpath + shopid + "/i_"+ UrlBase64Coder.encoded("图片测试") + strN; File destFile = new File(path + shopid + "/audit/", "/i_"+ UrlBase64Coder.encoded("图片测试") + strN); OutputStream os = new FileOutputStream(destFile); byte[] buffer = new byte[1024 * 10]; int length = 0; while ((length = is.read(buffer)) > 0) { os.write(buffer, 0, length); } os.close(); is.close(); System.out.println(rootRdir); FoodInfo fi = new FoodInfo(); //设置菜品ID为商户ID_i_菜品名称URLBASE64编码 System.out.println("上传成功!"); PrintWriter out = response.getWriter(); out.print("{\"success\":true}"); out.flush(); } catch (Exception e1) { e1.printStackTrace(); } } else { PrintWriter out = response.getWriter(); out.print("{\"success\":false}"); out.flush(); System.out.println("上传失败:不支持的图片类型!"); } }
有个64URLsafe编码的问题:
class UrlBase64Coder { public final static String ENCODING = "UTF-8"; // 加密 public static String encoded(String data) throws UnsupportedEncodingException { byte[] b = Base64.encodeBase64(data.getBytes(ENCODING)); return new String(b, ENCODING).replace("/", "_").replace("+", "-"); } // 解密 public static String decode(String data) throws UnsupportedEncodingException { byte[] b = Base64.decodeBase64(data.replace("_", "/").replace("-", "+") .getBytes(ENCODING)); return new String(b, ENCODING); } }
用的是import org.apache.commons.codec.binary.Base64;这个 commons-codec-1.3.jar 基本就这个样子了
上传没啥东西.我想要记录的就是那个恶心人的IE...给加了个参数传递它的值...后面的就没啥意义了~也就是写长点,显得很专业的样子 ^. ^
下载的话...没啥问题吧? 后面有时间补上一个.
叶落星辰 W
相关文章推荐
- 关于Extjs和struts2的那些个事儿
- extjs采用fileupload进行文件上传后台实现
- ExtJS中FormPanel设置FileUpload为true后,提交返回下载文件的解决
- 第 1 章 闪烁吧!看看extjs那些美丽的例子
- extjs 上传文件 fileUpload
- ExtJs 4.2 xtype: 'fileuploadfield'如何设置值
- extjs - 解决那些没有需要的事件但又想截获此事件的解决方案
- extjs 上传文件 fileUpload
- Extjs的FileUploadField文件上传出现了两个上传按钮
- 上传 Fileupload 的那些小事(图片,txt文字,文件...)实例
- Extjs 使用fileupload插件上传文件 带进度条显示
- extjs中的fileuploadfield出现两个按钮
- 第 1 章 闪烁吧!看看extjs那些美丽的例子。
- 第 1 章 闪烁吧!看看extjs那些美丽的例子。
- 第 1 章 闪烁吧!看看extjs那些美丽的例子。
- extjs 上传文件 fileUpload
- Asp.net的FileUpload控件的文件上传与Extjs文件上传的简单Demo
- ExtJS fileupload组件上传文件后从服务端解析JSON格式数据
- Extjs的FileUploadField文件上传解决方案