您的位置:首页 > Web前端 > JavaScript

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先:

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("");
});
}
}
}


  试试证明 写出来就这个么样子 略显丑陋什么的,那些细节先略过.主要是功能~



  注意到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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: