日期:2014-05-16 浏览次数:20439 次
???? 项目中有一个页面的功能需要用到文件上传,文件上传以前做的非常多了,这次换成了extjs做的前台,本以为应该没有什么问题,谁料到,做的时候发现是问题多多
??? 总结了一下一共下列几点
1:extjs官方并不提供文件上传的组件,所以要借助第三方的插件去实现文件上传的功能,这里说的并不是用extjs不能做文件上传,而是不能较好的实现文件上传,网上提供可选择的组件不多,目前较多的是使用Ext.ux.UploadDialog.Dialog这个玩意
把Ext.ux.UploadDialog.Dialog的开发包任意放入一个路径,注意要引入这两个文件
<link rel="stylesheet" type="text/css" href="../../../js/extjs/UploadDialog/css/Ext.ux.UploadDialog.css" />
?<script type="text/javascript" src="../../../js/extjs/UploadDialog/Ext.ux.UploadDialog.packed.js"></script>
网上说的引入文件乱七八糟,可以是因为插件的版本不太一样,我用的是在官方下载的,我的extjs的开发包是2.2版本跟这个组件兼容是没有问题的
2:组件的使用
var dialog = new Ext.ux.UploadDialog.Dialog(null, {
autoCreate: true,
closable: true,
collapsible: false,
draggable: true,
minWidth: 400,
minHeight: 200,
width: 400,
height: 350,
permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif'],
proxyDrag: true,
resizable: true,
constraintoviewport: true,
title: '文件上传',
url: 't_file_upload.php',
reset_on_hide: false,
allow_close_on_upload: true
});
dialog.show();
?3:servlet代码
File tmp = new File("d:/tmp_common_apache");
File saveDir = new File("d:/iocommon");
tmp.mkdir();
saveDir.mkdir();
if (ServletFileUpload.isMultipartContent(event.getRequest()))
{
DiskFileItemFactory dfif = new DiskFileItemFactory();
dfif.setRepository(tmp);
dfif.setSizeThreshold(1073741824);
ServletFileUpload sfu = new ServletFileUpload();
sfu.setSizeMax(1073741824L);
try
{
FileItemIterator fii = sfu.getItemIterator(event.getRequest());
while (fii.hasNext())
{
FileItemStream fis = fii.next();
if ((fis.isFormField()) || (fis.getName().length() <= 0))
continue;
System.out.println(fis.getName().substring(fis.getName().lastIndexOf(".")));
String idd = fis.getName().substring(fis.getName().lastIndexOf("."));
int index = fis.getName().lastIndexOf("\\");
String newFileName = fis.getName().substring(index + 1);
String fileName = fis.getName().substring(fis.getName().lastIndexOf("."));
System.out.println(newFileName + "~~~~~~");
BufferedInputStream in = new BufferedInputStream(fis.openStream());
BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(new File("d:/iocommon/" + newFileName)));
Streams.copy(in, out, true);
}
}
catch (FileUploadException e)
{
e.printStackTrace();
}
}
else
{
}
return "{success:true,message:'成功'}";
?4:使用时其他问题?
? a:多文件上传的疑惑
? 办法:这个组件可以多文件上传的,但是我们在写servlet的时候会非常奇怪,同时提交多个文件如何处理,其实看是多问的提交不过是单个文件的重复提交,所以传统的文件上传的servlet是不用任何修改就可以执行的,我这里使用的是apache的一个上传组件
?b:文件上传成功但是页面显示确实失败
?办法:这种问题是是返回的数据问题“{success:true,message:'成功'}”返回这样的一个json字符串就可以正确的显示结果了,这种格式是这个组件约定好的
?c : 进度条不准确
?办法: 这个没有什么办法,这个进度条,我感觉就是一个摆设,不能正确的显示目前文件上传的状态
?