一个Ext2+SWFUpload做的图片上传对话框
一个Ext2+SWFUpload做的图片上传对话框的例程
我们先看看对话框的布局:
- var Application={};
- Application.uploadDialog={
- progressBarText:'正在上传:{0},{1}%完成',
- statuBarText:'文件总数:{0}个 ,大小:{1}',
- show:function(data){
- if(!this.dialog)
- this.initDialog();
- //this.uploadGrid.store.removeAll();
- if(data)
- this.classStore.loadData(data);
- this.uploadAction[0].enable();
- this.uploadAction[1].disable();
- this.uploadAction[2].disable();
- this.uploadAction[3].disable();
- this.uploadAction[4].enable();
- //this.uploadProgressBar.updateProgress(0,'');
- this.dialog.show();
- },
- hide:function(){
- this.dialog.hide();
- },
- classStore:new Ext.data.SimpleStore({fields: ["id", "text"],data:[]}),
- uploadAction:[
- new Ext.Action({text:'增加',
- handler:function(){
- Application.uploadDialog.swfu.selectFiles();
- }
- }),
- new Ext.Action({text:'删除',disabled:true,handler:function(){
- var obj=Application.uploadDialog;
- var grid=obj.uploadGrid;
- var store=grid.store;
- var selection=grid.getSelectionModel().getSelections();
- for(var i=0;i<selection.length;i++){
- var rec=store.getAt(store.indexOfId(selection[i].id));
- obj.swfu.cancelUpload(rec.data.id);
- store.remove(rec);
- }
- obj.stateInfo.getEl().innerHTML=String.format(obj.statuBarText,obj.uploadGrid.store.getCount(),Ext.util.Format.fileSize(obj.uploadGrid.store.sum('size')));
- if(obj.uploadGrid.store.getCount()==0){
- obj.uploadGrid.store.removeAll();
- obj.uploadAction[1].disable();
- obj.uploadAction[2].disable();
- obj.uploadAction[3].disable();
- }
- }}),
- new Ext.Action({text:'清空',disabled:true,handler:function(){
- var obj=Application.uploadDialog;
- var store=obj.uploadGrid.store;
- var len=store.getCount();
- for(var i=0;i<len;i++){
- var rec=store.getAt(i);
- obj.swfu.cancelUpload(rec.data.id);
- }
- store.removeAll();
- obj.classCombo.clearValue();
- obj.stateInfo.getEl().innerHTML=String.format(obj.statuBarText,0,Ext.util.Format.fileSize(0));
- obj.uploadProgressBar.updateProgress(0,'');
- obj.uploadProgressBar.updateText("");
- obj.uploadAction[0].enable();
- obj.uploadAction[1].disable();
- obj.uploadAction[2].disable();
- obj.uploadAction[3].disable();
- }}),
- new Ext.Action({text:'上传',disabled:true,handler:function(){
- var obj=Application.uploadDialog;
- obj.uploadAction[0].disable();
- obj.uploadAction[1].disable();
- obj.uploadAction[2].disable();
- obj.uploadAction[3].disable();
- obj.uploadAction[4].disable();
- var store=obj.uploadGrid.store;
- var len=store.getCount();
- var classid=obj.classCombo.getValue();
- obj.swfu.setPostParams({'classid':classid});
- obj.swfu.startUpload();
- }}),
- new Ext.Action({text:'关闭',handler:function(){
- Application.uploadDialog.hide();
- }}),
- ],
- initDialog:function(){
- this.classCombo=new Ext.form.ComboBox({
- hiddenName:'classid',name: 'classid_name',valueField:"id",displayField:"text",mode:'local',
- store:this.classStore,blankText:'请选择类别',emptyText:'请选择类别',editable:true,anchor:'90%'
- })
- this.swfu=new SWFUpload({
- upload_url:"upload.asp",
- file_size_limit : "102400",
- file_types : "*.jpg;*.gif",
- file_types_description : "图片文件(*.jpg,*.gif)",
- file_upload_limit : "30",
- file_dialog_start_handler : this.fileDialogStart,
- file_queued_handler : this.fileQueued,
- file_queue_error_handler : this.uploadError,
- file_dialog_complete_handler : this.fileDialogComplete,
- upload_start_handler : this.uploadFileStar,
- upload_progress_handler : this.uploadProgress,
- upload_error_handler : this.uploadError,
- upload_complete_handler : this.uploadQueueComplete,
- file_complete_handler : this.uploadFileComplete,
- flash_url:"swfupload.swf",
- ui_container_id : "SWFUploadTarget",
- degraded_container_id : "divDegraded",
- debug: false
- })
- this.dialog=new Ext.Window({
- layout:'fit',width:600,height:500,title:'上传图片',closeAction:'hide',border:false,modal:true,
- plain:true,closable:false,resizable:false,
- bbar:[this.uploadProgressBar=new Ext.ProgressBar({width:586})],
- items:[
- Application.uploadDialog.uploadGrid=new Ext.grid.GridPanel({
- autoExpandColumn:2,enableHdMenu:false,
- tbar:[Application.uploadDialog.uploadAction[0],Application.uploadDialog.uploadAction[1],Application.uploadDialog.uploadAction[2],
- '-',Application.uploadDialog.uploadAction[3],"-",Application.uploadDialog.classCombo,"->"
- ,Application.uploadDialog.uploadAction[4]],
- bbar:[Application.uploadDialog.stateInfo=new Ext.Toolbar.TextItem(String.format(Application.uploadDialog.statuBarText,0,Ext.util.Format.fileSize(0)))],
- store: new Ext.data.SimpleStore({fields: ["id","state", "file","size","type"],data:[]}),
- columns:[
- new Ext.grid.RowNumberer(),
- {id:'id',header: "id",hidden:true,width:150,dataIndex:'id',resizable:false,sortable:false},
- {header: "文件名",width:Ext.grid.GridView.autoFill,dataIndex:'file',sortable:true},
- {header: "大小", width: 80,renderer:Ext.util.Format.fileSize,dataIndex:'size',sortable:true,align:'right'},
- {header: "类型", width: 80,dataIndex:'type',align:'center',sortable:true},
- {header: "状态", width: 100,dataIndex:'state',align:'center',sortable:true}
- ]
- })
- ]
- })
- },
- fileQueued:function(file){
- var obj=Application.uploadDialog;
- var filetype=(file.type.substr(1)).toUpperCase();
- if(filetype=='JPG' | filetype=='GIF'){
- var data=[];
- data.push([file.id,'未上传',file.name,file.size,filetype]);
- obj.uploadGrid.store.loadData(data,true);
- obj.uploadAction[1].enable();
- obj.uploadAction[2].enable();
- obj.uploadAction[3].enable();
- obj.stateInfo.getEl().innerHTML=String.format(obj.statuBarText,obj.uploadGrid.store.getCount(),Ext.util.Format.fileSize(obj.uploadGrid.store.sum('size')));
- }
- },
- uploadFileStar:function(file){
- var obj=Application.uploadDialog;
- var index=obj.findData(file.id);
- if(index>=0){
- obj.uploadGrid.store.getAt(index).set('state','正在上传……');
- }
- obj.uploadProgressBar.updateProgress(0,String.format(obj.progressBarText,file.name,0));
- return true;
- },
- uploadProgress:function(file,bytesloaded){
- var obj=Application.uploadDialog
- var percent = Math.ceil((bytesloaded / file.size) * 100);
- obj.uploadProgressBar.updateProgress(percent/100,String.format(obj.progressBarText,file.name,percent));
- },
- uploadFileComplete:function(file){
- var obj=Application.uploadDialog;
- var index=obj.findData(file.id);
- if(index>=0){
- obj.uploadGrid.store.getAt(index).set('state','已上传');
- }
- if(obj.swfu.getStats().files_queued>0)
- obj.swfu.startUpload();
- },
- uploadFileCancelled:function(file, queuelength){
- },
- uploadQueueComplete:function(file,server_data){
- console.log(server_data);
- if(server_data=='ok'){
- var obj=Application.uploadDialog;
- obj.uploadProgressBar.updateProgress(1,'完成上传');
- obj.uploadAction[2].enable();
- obj.uploadAction[4].enable();
- }else{
- alert(server_data);
- }
- },
- uploadError:function(file,errcode,msg){
- var index=Application.uploadDialog.findData(file.id);
- if(index>=0)
- Application.uploadDialog.uploadGrid.store.getAt(index).set('state','上传失败');
- //alert(errcode+','+file.name+','+msg)
- },
- uploadCancel:function(file, queuelength){
- var index=Application.uploadDialog.findData(file.id);
- if(index>=0)
- Application.uploadDialog.uploadGrid.store.getAt(index).set('state','取消上传');
- },
- fileDialogStart:function(){
- },
- fileDialogComplete:function (num_files_queued){
- },
- findData:function(id){
- var rowindex=Application.uploadDialog.uploadGrid.store.find('id',id);
- return rowindex;
- }
- }//Application.uploadDialog
在文件里我先定义了一个Application 对象(Application={}),对象为JSON结构,主要方便将应用的各个功能模块作为Application的一个子对象,方便未来调用与区分。当然了,如果你不喜欢的话可以不要这个,不过这文件就要修改不少东西(:))。
- <div id="SWFUploadTarget" style="height:0px;width:0px;disply:none;z-index:-1"></div>
- <div id="divDegraded" style="height:0px;width:0px;disply:none;z-index:-2"></div>
- tbar:[Application.uploadDialog.uploadAction[0],Application.uploadDialog.uploadAction[1],Application.uploadDialog.uploadAction[2],
- '-',Application.uploadDialog.uploadAction[3],"-",Application.uploadDialog.classCombo,"->"
- ,Application.uploadDialog.uploadAction[4]],
- new Ext.Toolbar.TextItem(String.format(Application.uploadDialog.statuBarText,0,Ext.util.Format.fileSize(0)))
例程下载地址:http://download.csdn.net/source/262788
一个Ext2+SWFUpload做的图片上传对话框相关推荐
- struts+swfupload实现批量图片上传(上):swfupload
custom_settings : {progressTarget : "fsUploadProgress",cancelButtonId : "btnCancel&qu ...
- 关于这些年做的 图片上传下载做的处理总结(including根据图片url上传文件)
下载文档 我们查柜的认知是后端给前端传一个链接地址,将地址放在a标签上,点击链接下载文件. 可有时候往往不是这样的,后端给前端返回了一个文档流,这就需要我们自己转换为Blob格式的数据,再使用这个数据 ...
- 接口自动化实现图片上传(selenium/RF)
最近做自动化碰到一个问题: 就是带图片上传的不知道怎么实现自动化:整理了下实现如下: 上传图片postman 结果请求如下,上传图片后返回一个图片地址: post请求 body 是form-data ...
- 使用FCKeditor2.2图片上传的小技巧
FCKeditor的确是个错的编辑器,从ASP.NET 1.1就开始在用. 之前没做过图片上传,最近要做个产品发布的小东西,使用ASP.NET2.0的文件上传组件老是出问题.考虑到FCKeditor中 ...
- Ueditor编辑器图片上传
Ueditor编辑器图片上传 UEditor的图片上传采用了Flash上传的方式,在功能上支持批量.本地预览和实时进度提示,在界面上支持自定义背景.上传按钮和预览框等视觉元素的样式属性,基本能够满足各 ...
- 用Swift实现iOS相机及相册图片上传
最近要做一个iOS相机及相册图片上传,其中遇到了这些问题:1.图片增删在UICollectionView里的变化:2.获取相机拍摄的照片和相册的照片:3.将PHAsset对象转为UIImage对象: ...
- $_post 数据上传到那个位置_如何实现图片上传并保存到数据库?
(给Web前端雪儿加星标,提升前端技能) 之前写过图片上传的案例,但是时间一长就忘了,这次写的这个程序用到了图片的上传,并且能够图文显示,所以写了这篇文章来记录一下.由于人们的生活质量的提高及网络的发 ...
- Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一)
图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core Web Api实现图片上传存储以及生成缩略图呢?今天我就使用MongoDB作为图片存储 ...
- Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程
Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程 原文:Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程 Asp.Net Cor ...
最新文章
- 百度快照被劫持跳转的解决办法
- 利用mem数组在MM32 MicroPython中实现COMP的功能
- 二十五、长短时记忆神经网络
- C和指针之函数之把数字字符串转为整数并且返回这个数字(ascii_to_integer)
- keepalived mysql双主架构图_MySQL双机热备(keepalived+mysql双主)
- iOS:Covert p12 back to CSR
- [转]Java5泛型的用法,T.class的获取和为擦拭法站台
- java扑克牌排序_扑克牌排列 运用List ArrayList Arrays
- 让lubuntu13.10中的virtualbox使用u盘
- java remove map_Java HashMap remove()方法
- JavaScript学习(二十七)—解决IE以及IE8之前的浏览器下面的添加事件或者删除事件
- Clean Code 《代码整洁之道》前四章读书笔记
- 模式识别 算法练习(一)——C均值算法
- mmap设备文件操作
- GlobalSign 企业型SSL 证书
- 记录MEMORY_MANAGEMENT蓝屏解决过程
- with recompile
- 有效学习python
- 使用OpenLayers根据经纬度对地图进行单个标点,以及点击标点弹框的实现(没有从后台获取经纬度数据)
- C 语言 宏定义 :字符串化 stringify 的应用
热门文章
- Tomcat关闭后,重新启动,session中保存的对象为什么还存在解决方法
- NFS企业级网络文件共享
- Ubuntu 安装mysql和简单操作
- dd skip 和 seek参数理解(转)
- java部署web service的方式
- flutter中的生命周期函数
- 26期20180626 rpm 安装软件包的方法 yum
- Docker+Jenkins持续集成环境(3)集成PMD、FindBugs、Checkstyle静态代码检查工具并邮件发送检查结果...
- 阿里年会的马老师说:认真生活、快乐工作、保持理想
- 远程SSH连接服务与基本排错