- 浏览: 137924 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
huqing2010:
不能直提供war包呀
Spring Security demo -
jqs1124:
pl/sql调试存储过程 -
zhouxianglh:
太全了!
常用bash shell 脚本 -
fcoffee:
1. myeclipse != eclipse2. *.lin ...
Eclipse 插件管理 -
hgalois:
巴错如果再加点path的修改linux下java开发环境配置就 ...
常用Linux命令
一.方法一
Ext.ux.UploadDialog.包下载
使用是出来导入必要的ext包还需要
<link rel="stylesheet" href="Ext.ux.UploadDialog/UploadDialog/css/Ext.ux.UploadDialog.css" />
<script type="text/javascript" src="Ext.ux.UploadDialog/Ext.ux.UploadDialog.packed.js"></script>
使用很简单 弄个onclick事件 核心代码如下
function insertImages()
{
dialog = new Ext.ux.UploadDialog.Dialog({
title: '文件上传__上传过程中关闭窗口,不影响上传_wayfoon',
url:wayfoon.MMS.DataPage +'/xxx.action?action=xxx',
width : 450,
height : 300,
minWidth : 450,
minHeight : 300,
draggable : true,
resizable : true,
//autoCreate: true,
constraintoviewport: true,
permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','bmp','BMP'],
modal: true,
//post_var_name: 'mms',
reset_on_hide: false,
allow_close_on_upload: true, //关闭上传窗口是否仍然上传文件
upload_autostart: false //是否自动上传文件
});
dialog.show();//'show-button'
dialog.on('uploadsuccess', onUploadSuccess);
}
提交时,默认提交的文件名是file 你可以修改 post_var_name: 'myfile',
dialog 有很多事件,如下英文。例子中使用了uploadsuccess事件
filetest - fires before file is added into the queue, parameters:
dialog - reference to dialog
filename - file name
If handler returns false then file will not be queued.
fileadd - fires when file is added into the queue, parameters:
dialog - reference to dialog
filename - file name
fileremove - fires when file is removed from the queue, parameters:
dialog - reference to dialog
filename - file name
record - file record
resetqueue - fires when upload queue is resetted, parameters:
dialog - reference to dialog
beforefileuploadstart - fires when file as about to start uploading:
dialog - reference to dialog
filename - uploaded file name
record - file record
If handler returns false then file upload will be canceled.
fileuploadstart - fires when file has started uploading:
dialog - reference to dialog
filename - uploaded file name
record - file record
uploadsuccess - fires when file is successfuly uploaded, parameters:
dialog - reference to dialog
filename - uploaded file name
data - js-object builded from json-data returned from upload handler response.
record - file record
uploaderror - fires when file upload error occured, parameters:
dialog - reference to dialog
filename - uploaded file name
data - js-object builded from json-data returned from upload handler response.
record - file record
uploadfailed - fires when file upload failed, parameters:
dialog - reference to dialog
filename - failed file name
record - file record
uploadcanceled - fires when file upload canceled, parameters:
dialog - reference to dialog
filename - failed file name
record - file record
uploadstart - fires when upload process starts, parameters:
dialog - reference to dialog
uploadstop - fires when upload process stops, parameters:
dialog - reference to dialog
uploadcomplete - fires when upload process complete (no files to upload left), parameters:
dialog - reference to dialog
注意该多文件上传,每次其实只上传了一个文件,多个文件是分多次上传的。
看到了有很多后台代码采用了多文件 循环读取,只是没有必要的,我们只要当一个文件处理就可以了。
网上很多例子,也只能称为例子,离应用还有点距离,应用的时候,还需要灵活点
比如我们需要传入自己的参数,网上很难找到,其实我们可以在事件中来改变 提交的参数,
采用属性 base_params:{ hehe: "wayfoon" } 来实现,
function onUploadSuccess(dialog, filename, resp_data, record)
{
你可以改变dialog的某些值
resp_data 是返回的json数据
}
方法二。
. 费话一个,先下载 Ext.ux.UploadDialog.zip , Extjs.com上面有得下
2.HTML脚本
<script type="text/javascript" src="JSFrame/UploadDialog/Ext.ux.UploadDialog.js" ></script>
<script type="text/javascript" src="JSFrame/ProgressBar/Ext.ux.ProgressBar.js" ></script>
<link rel="stylesheet" type="text/css" href="JSFrame/ProgressBar/Ext.ux.ProgressBar.css"/>
<link rel="stylesheet" type="text/css" href="JSFrame/UploadDialog/css/Ext.ux.UploadDialog.css"/>
<script language="javascript" src="Upoad.js"></script>
</head>
<body>
<div id="Upload-dlg"></div>
</body>
</html>
3 JS脚本
Ext.onReady(function(){
var dialog = new Ext.ux.UploadDialog.Dialog(null, {
autoCreate: true,
closable: true,
collapsible: false,
draggable: true,
minWidth: 400,
minHeight: 200,
width: 400,
height: 350,
proxyDrag: true,
resizable: true,
constraintoviewport: true,
title: 'File upload queue.',
url: 'upload.asp',
reset_on_hide: false,
allow_close_on_upload: true
});
dialog.show('my-dlg');
});
4 . 服务器端返回代码
接收是用 request("file")
返回要求是一个JSON格式的字符串,引用下原版的
The files in the queue are posted one at a time, the file field name is 'file'. The handler should return json encoded object with following properties:
{
success: true|false, // required
error: 'Error or success message' // optional, also can be named 'message'
}
三。
创建调用的HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/Ext.ux.UploadDialog.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="Ext.ux.UploadDialog.js"></script>
<!--
<script type="text/javascript" src="Ext.ux.UploadDialog.packed.js"></script>
-->
<!--语言包,根据需要添加或修改
<script type="text/javascript" src="./locale/ru.utf-8.js"></script>
-->
<script>
Ext.onReady(function() {
var dialog = new Ext.ux.UploadDialog.Dialog({
url: 'upload-dialog-request.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: true
});
dialog.show('show-button');
});
</script>
</head>
<body>
</body>
</html>
发表评论
-
jdk1.6 堆栈错误信息
2012-02-02 15:21 1147关闭jvm错误堆栈信息优化(不输出) 当有很多异常 ... -
firefox各版本特性
2011-08-14 23:28 898Firefox 4: promising to be mu ... -
览器兼容性的那点问题
2011-06-25 17:04 1959一.主流浏览器内核 ... -
免费空间
2011-05-28 11:02 5穷站长(QIONGZZ.com) - 国内最大的免费空 ... -
js异常处理
2011-03-04 14:55 1125<script language="jav ... -
resin常见问题
2011-02-28 10:01 25281.1. Resin停止响应 ●可 ... -
初始WML
2011-02-27 11:46 1224二、关于WML的常见问 ... -
url中带特殊参数
2011-02-18 10:48 1423URL传值带加号“+”的问题的解决方法 今天有同事问了个 ... -
IE阻止产生cookie
2011-02-15 21:23 1309困扰了几天的问题今天终于找到原因了.....鸡冻啊 现象是这样 ... -
ajax基础
2011-02-09 15:07 680Ajax的原理简单来说通过XmlHttpRequest对象 ... -
浏览器兼容性比较
2010-09-24 13:57 1001首先谈一下浏览器,虽 ... -
反向代理服务器
2010-07-07 21:10 1067反向代理(Reverse Proxy)方式是指以代理服务器 ... -
上传文件实现不刷新页面方法
2010-03-08 17:37 16211.制造一个隐藏的iframe <iframe nam ... -
cache server command
2009-08-22 11:47 785Memcached Server操作命令: 啟動: $ / ... -
随手笔记
2009-08-22 11:45 7261. HashTable 與 HashMap 區別 Hash ... -
my webdisk
2009-07-11 13:28 683http://www.namipan.com/uc.php -
an exciting trip
2009-03-22 22:00 1381An exciting trip Today ,I ... -
六种异常处理的陋习
2009-03-13 22:52 624你觉得自己是一个Java专 ... -
Spring 整合 Hibernate 的一处简化配置
2009-03-07 23:01 697在过去使用 Spring 整合 Hibernate 的时候,都 ... -
Hibernate二級緩存設置
2009-02-19 15:53 9841. applicationContext.xml設定 ...
相关推荐
Ext多文件上传
Java 版Ext多文件上传Java 版Ext 文件上传
ext4.0 多文件上传
完全可运行的Ext多文件上传,带上传速率、进度条等
NULL 博文链接:https://yiminghe.iteye.com/blog/257069
NULL 博文链接:https://canfly2010.iteye.com/blog/545673
Ext 文件上传参考文档 Ext 文件上传参考文档
只是一次不能选取多个文件,而且界面不够美观,大家可以下载下来看看实现的原理,http://download.csdn.net/detail/cbai0722/5077523或者到我的资源下查找:java跨全域兼容ie/ff/chrome浏览器多文件上传. 当前这个依托...
Ext上传文件例子 自己刚学ext写的例子
Ext 文件上传的完整列子,Ext文件上传。。。。
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
EXT3.0实现文件上传EXT3.0实现文件上传EXT3.0实现文件上传EXT3.0实现文件上传EXT3.0实现文件上传EXT3.0实现文件上传
一个Ext的上传文件的控件。修改过的源码。能上传中文文件。
ext结合struts2.0实现文件上传,代码详细,加载项目即可以看到效果。
NULL 博文链接:https://landy-sun.iteye.com/blog/1005811
ext上传组件。此组件使用flash技术,使界面更美观。
附件是ext上传文件的控件使用实例,下载附件后直接打开附件中的html页面,点击页面中的上传按钮就可以看到上传文件的对话框
这是我写的一个Ext如何上传文件的 Demo 程序,你可以进我的博客看里面的一篇文章就可以. 这是前后台代码结合写的.
Ext.net中上传控件在文件上传到服务器后在判断后缀、大小是否符合要求,这样在网速限制的情况下用户体验非常糟糕,往往等很长时间后得到“上传文件过大”的错误。本组件在客户端判断文件大小、类型,有效避免了上述...