`
wjm901215
  • 浏览: 154938 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Extjs formPanel 显示图片 + 上传

阅读更多
    //uploadFile.js   

    

    Ext.onReady(function() {   

    

  var fileForm = new Ext.form.FormPanel({   

   title : "",   

   renderTo : "fileUpload",   

   fileUpload : true,   

   layout : "form",   

   id : "fileUploadForm",   

   items : [{   

      id : 'upload',   

      name : 'upload',   

      inputType : "file",   

      fieldLabel : '上传图片',   

      xtype : 'textfield',   

      anchor : '40%'  

    

     }, {   

          

      xtype : 'box',   

      id : 'browseImage',   

      fieldLabel : "预览图片",   

      autoEl : {   

       width : 300,   

       height : 350,   

       tag : 'img',   

       // type : 'image',   

       src : Ext.BLANK_IMAGE_URL,   

       style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',   

       complete : 'off',   

       id : 'imageBrowse'  

      }   

    

     }],   

         

     //form事件   

   listeners : {   

    'render' : function(f) {   

     //   

     this.form.findField('upload').on('render', function() {   

      //通過change事件,图片也动态跟踪选择的图片变化   

      Ext.get('upload').on('change',   

        function(field, newValue, oldValue) {   

    

         //得到选择的图片路径   

         var url = 'file://'  

           + Ext.get('upload').dom.value;   

               

        // alert("url = " + url);   

         //是否是规定的图片类型   

         if (img_reg.test(url)) {   

    

          if (Ext.isIE) {   

           var image = Ext.get('imageBrowse').dom;   

           image.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片   

           image.filters   

             .item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;   

    

          }// 支持FF   

          else {   

           Ext.get('imageBrowse').dom.src = Ext   

             .get('upload').dom.files   

             .item(0).getAsDataURL()   

          }   

         }   

        }, this);   

     }, this);   

    }   

   },   

   buttons : [{   

      text : "提交",   

      name : "submit",   

      handler : submit   

     }]   

  });   

    

  // 上传图片类型   

  var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/   

    

 });   

    

 //上傳圖片到服务器,   

 function submit() {   

  Ext.getCmp("fileUploadForm").getForm().submit({   

    

     url : "uploadAction.action",   

     method : "POST",   

     success : function(form, action) {   

      alert("success");   

     },   

     failure : function(form, action) {   

      alert("failure");   

     }   

    });   

 } 

 

分享到:
评论

相关推荐

    EXTJS网站后台以及JSP+JSTL+EL网站前台

    综合这些知识点,我们可以理解这个项目是一个集成了EXTJS前端和JSP+JSTL+EL后端的网站应用,具备图片和视频上传、播放以及地图显示等功能。开发这样的系统需要掌握前端和后端的多种技术,并能有效地协调前后端数据...

    extjs+servlet实现图片上传

    在本示例中,我们将探讨如何结合ExtJS 3和Servlet技术来实现图片上传功能。 首先,我们需要理解ExtJS的组件体系。在ExtJS中,`FileUploadField`是一个专门用于文件上传的表单字段。通过这个组件,用户可以在浏览器...

    extjs3+springMVC上传文件

    标题“extjs3+springMVC上传文件”指的是使用ExtJS 3版本的JavaScript库与Spring MVC框架结合实现文件上传功能。这篇博文可能是作者在ITEYE博客上分享的一个技术实践,遗憾的是,描述部分为空,没有提供额外的信息。...

    struts2+extjs3 单/多文件上传

    在前端,ExtJS3提供了一个强大的`FormPanel`组件,可以方便地创建表单并支持文件上传。通过添加`FileField`组件,我们可以让用户选择文件。以下是一个简单的例子: ```javascript var formPanel = new Ext....

    extjs上传全代码

    8. **错误处理**: 当上传失败时,EXTJS应用应能够捕获并显示错误信息,以便用户了解问题所在并采取相应措施。 9. **导入到Eclipse**: 提示说项目可以直接导入到Eclipse,这意味着项目可能包含了完整的开发结构,...

    extjs 上传图片(可以上传其他类型的文件)asp 实现

    在本文中,我们将深入探讨如何使用ExtJS框架与ASP(Active Server Pages)技术结合,实现一个功能完善的文件上传功能,特别是针对图片和其他类型文件的上传。ExtJS是一款强大的JavaScript库,用于构建桌面级的Web...

    批量上传文件 EXTJS文件上传 上传组件

    EXTJS的上传组件通常是基于EXTJS的FormPanel和FileField组件构建的,FileField组件可以设置为多选模式,从而支持批量选择文件。 首先,我们需要创建一个EXTJS的FormPanel实例,其中包含一个配置为`multiple: true`...

    extjs图片上传

    在EXTJS框架中,图片上传功能是一个常见的需求,尤其在构建富客户端应用时。EXTJS提供了强大的组件模型,使得开发人员能够轻松实现这样的功能。本文将深入探讨如何使用EXTJS来实现图片上传,包括多图预览、上传以及...

    extjs struts2 多图片批量上传控件

    在多图片批量上传的场景中,ExtJS可能使用了`FileInput`或`FileField`组件来捕获用户选择的文件,以及`UploadButton`或自定义的`FormPanel`来实现文件上传功能。此外,ExtJS还可能利用Ajax技术,通过异步方式将文件...

    extjs3.2+struts2实现多文件上传excel并插入到数据库

    在多文件上传场景下,ExtJS可以提供用户友好的界面元素,如上传按钮和进度条,同时处理文件选择、上传状态显示等交互逻辑。开发者可以通过定义`FormPanel`和`FileField`组件来创建文件上传表单,设置`allowMultiple:...

    批量图片预览上传(extjs,支持html5和flash)

    在IT领域,批量图片预览上传是Web应用中常见的功能,尤其在图像处理、社交媒体或者内容管理系统中。本文将深入探讨如何使用EXTJS框架结合HTML5和Flash技术实现这一功能。 EXTJS是一个强大的JavaScript库,提供了...

    Extjs多文件上传

    在“Extjs多文件上传”这个主题中,我们将深入探讨如何使用ExtJS实现一个支持自由添加和减少上传文件个数的多文件上传功能。 首先,ExtJS的文件上传功能通常依赖于其组件系统,特别是`Ext.form.FileField`(也称为`...

    extjs 多文件上传控件

    ExtJS 是一个强大的...综上所述,实现ExtJS多文件上传控件涉及到前端的文件选择、表单提交、进度显示,以及后端的文件接收和处理等多个环节。通过熟练掌握这些知识点,你可以创建出高效且用户友好的文件上传功能。

    Extjs2.x 实现文件上传组件

    总的来说,ExtJS 2.x实现文件上传组件涉及到的主要知识点包括:FormPanel组件的使用、FileUploadField的创建、表单的Ajax提交、以及可能需要的额外插件如UploadProgress。通过这些技术,开发者可以构建出功能完备、...

    轻松搞定Extjs 带目录

    格式化功能则能够使数据显示更加友好和标准化。 Extjs的组件系统非常丰富,包括按钮、日期选择器、ComboBox等,它们都可以通过配置实现复杂的交互逻辑。数据管理部分涉及到了Extjs对Ajax请求的封装、数据代理、读取...

    Extjs结合Asp.net文件上传

    标题中的“Extjs结合Asp.net文件上传”指的是在Web应用程序开发中,使用Ext JS(一个JavaScript库)和ASP.NET(Microsoft的服务器端技术)来实现文件上传功能。这一组合可以提供用户友好的界面和强大的后台处理能力...

    extjs 多文件上传

    2. **FormPanel**:多文件上传通常嵌入在EXTJS 的FormPanel中,FormPanel提供了提交表单和处理服务器响应的功能。确保在FormPanel配置中启用异步提交(`useAjax`)和设置正确的提交URL。 ```javascript Ext....

    struts+extjs实现UploadDialog

    ExtJS端通过监听Ajax请求的完成事件,解析这个响应,并根据结果更新UI,比如显示上传成功或失败的信息。 在实际开发中,你还需要考虑一些其他因素,比如文件大小限制、文件类型检查、错误处理、进度条显示等。例如...

Global site tag (gtag.js) - Google Analytics