ExtJs_FileUpLoad的那些花样作死法

浏览数：33 / 时间：2015年06月09日

　　文件上传下载是必不可少,躲不过去的一个功能.无论什么时候,总会忽然蹦出来个功能需求.上传吧~下载呗...所以......就有了这个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 }