`
erikchang
  • 浏览: 50667 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

Ext中使用file类型预览图片

阅读更多

最近写一个系统,使用了Ext,涉及到图片预览功能,本来在html中是非常简单的问题,到Ext中变得也很麻烦,自己也没有写过,找了一些资料,么有发现能用的,结合网上的一些资料,自己整理了一下,给代码贴一下!

                                                最终效果图: 

var  electron_form=new Ext.form.FormPanel({
	  url:"employeeManage.jhtml?method=saveElec",
	  height:600,
	  width:800,
	  labelWidth:80,
	  labelAlign:"left",
	  frame:true,
	  fileUpload:true,
	  defaults:{xtype:"field",width:350},
	  items:[{
			  xtype:"textfield",
			  name:"userName",
			  value:name,
			  fieldLabel:"职工姓名"
			 },{
			  xtype:"hidden",
			  name:"uid",
			  value:id
			 },{
			  xtype:"numberfield",
			  name:"sequence",
			  fieldLabel:"档案序号",
			  allowDecimals:false,
			  allowBlank:false,
			  blankText:"档案序号不能为空"
			 },{
			 id: 'imageUpload',
			 name:'imageUpload',
			 fieldLabel:"电子档案",
			 inputType:"file"
			 },{   
            id:'browseImage',   
			fieldLabel:"预览档案",
            autoCreate:{   
			    width:400,
				height:500,
                tag: 'input',   
                type: 'image',   
                src: Ext.BLANK_IMAGE_URL,   
                style:'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);' , 
                name: 'imageBrowse'  
               }   
             }
			 ],
	   buttons:[{text:"添加电子档案",handler:addElectron},{text:"取消添加",handler:function(){electron_win.close();}}]
	})
var	img_reg=/\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/    
    electron_form.on('render',function(f){   
        electron_form.form.findField('imageUpload').on('render',function(){   
            Ext.get('imageUpload').on('change',function(field,newValue,oldValue ){   
                var url = 'file:///'+Ext.get('imageUpload').dom.value;   
           if(img_reg.test(url)){   
                                   
                                if(Ext.isIE7){   
        var image = Ext.get('imageBrowse').dom;   
image.src = Ext.BLANK_IMAGE_URL;//覆盖原来的图片   
image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src= url;   
                                }else{   
                                    Ext.get('imageBrowse').dom.src = url;   
                                }   
                            }   
                            },this);   
        },this);   
    },this);  
	var electron_win= new Ext.Window({
		  id:"electron_add_win",						   
		  title:'职工电子档案添加',
		  layout:'fit',
		  width:500,
		  height:600,
		  labelWidth:80,
		  labelAlign:'right',
          buttonAlign:'center', 
		  modal:true,
		  resizable:false,
          frame:true,
		  animal:true,
		  items:[electron_form]
		})

 

 

  • 大小: 184.2 KB
分享到:
评论

相关推荐

    ext图片上传前预览小demo

    在EXT中,处理图片上传并实现预览功能是一项常见的需求,尤其在用户交互丰富的应用中,允许用户在正式上传前预览图片,可以提供更好的用户体验。 在EXT中,图片预览通常涉及到以下几个关键知识点: 1. **File ...

    EXT 上传图片 删除图片,显示图片,PHP

    在EXT中,处理图片上传、删除和显示是一项常见的任务,特别是在构建涉及多媒体内容的Web应用时。本篇文章将深入探讨EXT如何与PHP配合,实现这些功能。 1. **图片上传** 在EXT中,我们可以使用`Ext.form.FileField`...

    EXT扩展Htmleditor,在工具栏中添加插入图片按钮,可选择图片插入到编辑器中(也可添加其他功能按钮)

    以上只是一个简单的示例,实际开发中可能需要处理更多细节,如图片大小限制、上传到服务器、预览图片等。EXT Htmleditor的强大之处在于它的高度可定制性,你可以根据需要添加任意数量的按钮,甚至创建复杂的自定义...

    ext图片上传

    3. **预览功能**: 在用户选择文件后,可以利用File API在前端展示图片预览。 4. **自定义上传策略**: 你可以编写自定义的上传插件,根据业务需求实现特定的文件上传逻辑。 **总结** EXT图片上传功能利用`Ext.form....

    Ext相册实现文件拖拽,实时上传进度,本地预览

    2. **EXT4的Image组件**:对于图片文件,我们可以利用EXT4的Image组件,设置其`src`属性为数据URL,达到本地预览的效果。 **Servlet/Struts2处理** 在服务器端,我们可以使用Servlet或Struts2框架接收上传的文件。...

    Ext.ux.UploadDialog

    使用Ext.ux.UploadDialog扩展时,开发者需要在Ext JS应用中引入这个组件的JavaScript文件,并进行适当的配置,例如指定上传URL、设置上传参数等。以下是一个简单的使用示例: ```javascript Ext.onReady(function()...

    EXT 3.0 文件上传对话框

    上传组件的使用.doc是一个文档,详细介绍了如何在EXT3应用中集成和使用UploadDialog组件。文档中可能涵盖了安装步骤、配置选项、示例代码和常见问题解答等内容,对于开发者来说是非常宝贵的参考资料。 Ext.ux....

    ext上传组件,可以多文件上传

    2. **文件选择和预览**:利用EXT上传组件,用户可以一次性选择多个文件,并在上传前进行预览,这需要在JavaScript中配置SwfUpload的相关参数。 3. **进度条和状态提示**:SwfUpload.js支持文件上传进度的实时显示,...

    Ext 文件上传参考文档

    Ext 文件上传参考文档主要涉及的是在Web开发中处理文件上传的场景,特别是使用ExtJS框架进行前端交互。ExtJS是一个强大的JavaScript库,用于构建复杂的、数据驱动的Web应用程序。文件上传是用户界面中的常见功能,...

    高级Ext上传功能,绝对精彩

    7. **预览与缩略图**:对于图像文件,高级上传功能可能提供预览功能,用户可以在上传前查看选定的图片。这通常通过HTML5的File API实现,生成缩略图并在界面上显示。 8. **文件大小和类型限制**:为了保证服务器...

    ext_image.rar_ext_image_extjs_extjs 4.2 img_extjs image_extjs图片上

    图片上传功能通常借助于ExtJS的表单组件(`Ext.form.Panel`)和上传字段(`Ext.form.field.File`)。在ExtJS 4.2中,上传组件可能需要配合第三方插件,如SWFUpload或jQuery File Upload,以实现浏览器兼容性和异步...

    Ext多文件上传

    在ExtJS中,可以使用`Ext.data.FileField`组件来与File API交互。 3. **Ajax上传**:传统的表单提交会导致页面刷新,这并不适合多文件上传。使用Ajax技术,我们可以异步地将文件数据发送到服务器,保持用户界面的...

    上传,页面预览,ftp传输

    预览功能使用的是项目中的 yuLanFile文件夹中的文件 页面index.jsp是jqueryUpload上传 以及上传后删除功能 页面yuLan.jsp是页面文件预览功能~~ ***********最重要的是 文件预览功能*********** Word和Excel预览...

    filemanager

    8. **文件预览与播放**:对于某些常见的文件类型(如图片、音频、视频),文件管理器可能提供了预览或播放功能,这就需要用到对应的媒体播放库,如ExoPlayer或MediaPlayer。 9. **网络文件操作**:如果源码支持FTP...

    ExtJS带进度条的多文件上传和图片预览

    ExtJS的`Image`组件可以用来展示这些预览图片。 6. **事件监听和处理**:在文件上传过程中,需要监听各种事件,如文件选择、上传开始、上传进度、上传成功和失败等。ExtJS提供了丰富的事件模型,通过`listeners`...

    extjs+servlet实现图片上传

    在实际应用中,可能还需要考虑更多细节,比如进度条显示、多文件上传、图片预览等功能,这需要更复杂的前端交互和后端逻辑。总的来说,理解和掌握这些技术将帮助你构建更强大、更安全的Web应用。

    Ext.UploadDialog

    为了控制上传,`UploadDialog`还可以设置文件类型的限制,例如只允许上传特定格式的文件(如图片、文档等)。此外,还可以设置单个文件大小和总文件大小的限制。 ### 异步上传与进度显示 `Ext.UploadDialog`通常...

    File Scavenger 3.2.rar

    扫描过程中,软件会显示预览,让用户可以预览可恢复的文件内容,确保找到的是需要的文件。 在文件恢复过程中,"File Scavenger 3.2"提供了多种选项。例如,用户可以选择原地恢复,即将文件恢复到原来的位置,或者...

    EXtjs 图片批量上传

    这可以通过创建一个按钮,并在其`click`事件中获取所有预览图片并移除它们来实现: ```javascript var deleteButton = Ext.create('Ext.button.Button', { text: '批量删除', handler: function() { previewArea...

Global site tag (gtag.js) - Google Analytics