- 浏览: 584676 次
- 性别:
- 来自: 西安
文章分类
最新评论
-
青春依旧:
html5教学哪家强!当然要上华清远见!
深入理解浏览器兼容性模式 -
ashur:
真机智,看得我都笑自己了
js 字符串转dom 和dom 转字符串 -
panghaoyu:
实现一个智能提示功能需要ajax、数据库、jsp/php、算法 ...
solr第一弹 autocomplete(自动补全) -
FakLove:
连线如何删除啊
基于html5 的拖拽连线 -
FakLove:
连线可以再删除吗?
基于html5 的拖拽连线
项目中有一个页面的功能需要用到文件上传,文件上传以前做的非常多了,这次换成了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 : 进度条不准确
办法: 这个没有什么办法,这个进度条,我感觉就是一个摆设,不能正确的显示目前文件上传的状态
发表评论
-
浏览器事件是冒泡还是捕获
2016-07-27 16:37 2940这是三种事件处理的模型 (1)冒泡型事件:事件按照从最特定 ... -
javascript 编程反思1 new 原理
2016-04-27 14:05 0我们在定义对象的时候通常使用两种方式 1:通过new 关键 ... -
javascript 设计模式1 单例模式
2015-06-15 15:10 0... -
facebook html5开发app 失败的原因,
2015-06-08 11:56 1913Here’s why the Facebook iOS a ... -
jQuery zepto 用法区别
2015-05-22 11:50 0以前都是用jQuery 因为移动项目中在使用zepto 基本 ... -
js 加载机制和defer async用法
2015-05-15 17:45 0这是今天我一个 ... -
grunt 不是内部命令
2015-05-04 19:21 1426grunt 不是内部命令!! ... -
你不知道的URL中#井号用法
2015-02-10 12:36 7018URL 中 # 井号的用法 ... -
JS 伪数组原理详解
2014-12-01 11:24 2441jav ... -
jquery 滚动条插件nanoScroller 的用法
2014-11-27 11:17 5643scroller 插件nanoSc ... -
h5,hybrid 开发中问题汇总
2014-10-17 11:26 8059H5开发问题总结 和jqu ... -
backbone中的 reuter 和histroy
2014-10-13 10:45 582Router和History (路由控制) Back ... -
animate 技术分析 raphael
2014-07-28 16:40 0Animate 什么是animate,一般我 ... -
Raphaeljs 插件实现任意SVG节点加载
2014-07-14 09:26 8552SVG 和Raphael http://rap ... -
ECMAScript 5
2014-07-08 14:36 1027新版本在给基本库带来 ... -
jQueryUI Widget 代码详解
2014-07-07 12:20 0为什么需要研究JqueryUI 中Widget 的代码 ... -
typescript 用法介绍
2014-07-01 09:58 1199前言 Typescript的形態 如何定義va ... -
window.eval 与eval 区别
2014-06-27 10:57 1037它们之间有区别吗? 开发过程中似乎很少有人去加个额外的win ... -
jQuery 学习分析系列1 jQuery是个什么东西
2014-06-23 10:06 0jQuery 的基本结构 过去使用jQuery ... -
Sizzle 引擎--原理与实践3
2014-06-18 14:05 756Sizzle引擎--原理与实践(三) 查找的入口对 ...
相关推荐
官方或网上ExtJS实现多文件上传的UploadDialog只适用于ExtJS2.x,我经过修改使其使用于ExtJS3.x,并在修改时尽量尊重于原始功能代码,请大家放心使用!
NULL 博文链接:https://dejazhan.iteye.com/blog/870539
Ext.ux.UploadDialog extjs上传文件的组件,免费下载
ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...
将struts-2.1.6\lib目录下的struts2-codebehind-plugin-2.1.6.jar、struts2-core-2.1.6.jar、struts2-spring-plugin-2.1.6.jar、xwork-2.1.2.jar、ognl-2.6.11.jar、freemarker-2.3.13.jar、commons-fileupload-...
批量上传文件,完整的列子,部署既可以使用,
EXTjs的上传组件
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
ExtJS验证文件上传类型,详细讲述ExtJS如何验证文件上传文件的类型!
Extjs 文件上传 strut2
用extjs实现的多文件上传,界面很好看,而且很好用的,失望大家试试看
EXTJS 上传组件及示例EXTJS 上传组件及示例EXTJS 上传组件及示例
Extjs4文件上传,后台struts2
struts+extjs实现UploadDialog struts+extjs实现UploadDialog
漂亮的Extjs图片展示组件实例,类似于幻灯片,可直接拿去用,非常不错的哦
1、Extjs3.0 常用组件介绍ppt 2、怎样安装开发利器Spket 3、Spket安装包
extjs 多文件上传extjs 多文件上传
NULL 博文链接:https://332590882-qq-com.iteye.com/blog/1450832
对应的描述看本人博文《ExtJS4 上传文件类型和大小的判断方法(实例) 》:http://blog.csdn.net/biboheart/article/details/10579175 在这里不具体描述了。看题也大概可以知道这些代码实现了什么应用。