ExtJs中怎么上传文件

下面为大家介绍在ExtJs中上传文件的几种方法

第漏嫌滑一种方法：传统的上传方式

在formpanal中增加一个fileUpload的属性

例子代码：

JScript 代码 复制

Ext.onReady(function(){

var form = new Ext.form.FormPanel({

renderTo:'file',

labelAlign: 'right',

title: '文件上传',

labelWidth: 60,

frame:true,

url: 服务器处理上传功能的url地址,//fileUploadServlet

width: 300,

height:200,

fileUpload: true,

items: [{

xtype: 'textfield',

fieldLabel: '文件名',

name: 'file',

inputType: 'file'//文件类型

}],

buttons: [{

text: '上传',

handler: function() {

form.getForm().submit({

success: function(form, response){

Ext.Msg.alert('信息', response.result.msg)

},

failure: function(){

Ext.Msg.alert('错误', '文件上传失败')

}

})

}

}]

})

})

第二种方法：借助Ext.ux.UploadDialog.Dialog的组件，在编码时需要导入两返腊个文件

需要引入 Ext.ux.UploadDialog 样式文件 和 Ext.ux.UploadDialog.packed脚本文件。

例子代码

//在使用此方法者亏进行文件上传时，其后台往页面的返回值类型是这样的：

//{'success':true,'message':'上传成功'}

//如果没有success:true，无论上传成功与否，显示的都是上传失败，其实这个和form.submit()的提交方式是一个道理。

var dialog = new Ext.ux.UploadDialog.Dialog({

autoCreate: true,

closable: true,

collapsible: false,

draggable: true,

minWidth: 400,

minHeight: 200,

width: 400,

height: 350,

permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','xls','XLS'],

proxyDrag: true,

resizable: true,

constraintoviewport: true,

title: '文件上传',

url:用于处理上传文件功能的Url,

reset_on_hide: false,

allow_close_on_upload: true ,

upload_autostart: false

})

//定义上传文件的按钮

var btnShow = new Ext.Button({

text:'上传文件',

listeners:{

click:function(btnThis,eventobj){

dialog.show()

}

}

})

其实，EXTJS4.0中有自带的上传控件 ，你引用一下就行了

关键在於，你上传的文件是保存在数据库中，还是保存在服务器的硬盤上

保存在数据库中要化成二进制流，但缺点是文件大的时候，数据库很麻橘毁烦，并且写进数据库要转换，读出祥历来也要转化

如果保存在服务器上，只在数据库中保存路径，然後就可圆宴备以根据路径来下载，

删除的时候，也同样根据路径要删除服务器上的文件和数据库中的文件信息

祝你好运，如何你不明白的话，我可以给你源码看一下，之前我做的上传，下载和删除功能。

首先要使用extjs自带的HTMLEditor，然后在原有的工具条上添加一个图片按钮，点击这个图片按钮要d出窗口，这个窗口负责实现上传功能，实现上传后，简搜要将上传的图片路径添加到 HTMLEditor 的光标处，并且要以<IMG></IMG>的方式，这样 HTMLEditor 才能解析出来。实现代码如下：

前台JSP页面

fieldLabel : '商品特性',

id : 'shopSp.spTxms',

name : 'shopSp.spTxms',

xtype : 'StarHtmleditor',

anchor : '93%'

这其中引用了StarHtmleditor，StarHtmleditor.js的代码如下，直接将代码复制下来，然后新建个JS，全复制进去就行了。

var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {

   addImage : function() {

       var editor = this

       var imgform = new Ext.FormPanel({

           region : 'center',

           labelWidth : 55,

           frame : true,

           bodyStyle : 'padding:5px 5px 0',

           autoScroll : true,

           border : false,

           fileUpload : true,

           items : [{

                       xtype : 'textfield',

                       fieldLabel : '选择文件',

           颂咐瞎            id : 'UserFile',

                       name : 'UserFile',

                       inputType : 'file',

                       allowBlank : false,

                       blankText : '文件不能野空为空',

                       anchor : '90%'

                   }],

           buttons : [{

               text : '上传',

               handler : function() {

                   if (!imgform.form.isValid()) {return}

                   imgform.form.submit({

                       waitMsg : '正在上传......',

                       url : 'HTMLEditorAddImgCommonAction.action',

                       success : function(form, action) {

                           var element = document.createElement("img")

element.src = action.result.fileURL

                           if (Ext.isIE) {

                               editor.insertAtCursor(element.outerHTML)

                           } else {

                               var selection = editor.win.getSelection()

                               if (!selection.isCollapsed) {

                                   selection.deleteFromDocument()

                               }

                               selection.getRangeAt(0).insertNode(element)

                           }

                           //win.hide()//原始方法，但只能传一个图片

                           //更新后的方法

                           form.reset()

        win.close()

                       },

                       failure : function(form, action) {

                           form.reset()

                           if (action.failureType == Ext.form.Action.SERVER_INVALID)

                               Ext.MessageBox.alert('警告','上传失败',action.result.errors.msg)

                       }

                   })

               }

           }, {

               text : '关闭',

               handler : function() {

                   win.close(this)

               }

           }]

       })

       var win = new Ext.Window({

                   title : "上传图片",

                   width : 300,

                   height : 200,

                   modal : true,

                   border : false,

                   iconCls : "picture.png",

                   layout : "fit",

                   items : imgform

               })

       win.show()

   },

   createToolbar : function(editor) {

       HTMLEditor.superclass.createToolbar.call(this, editor)

       this.tb.insertButton(16, {

                   cls : "x-btn-icon",

                   icon : "picture.png",

                   handler : this.addImage,

                   scope : this

               })

   }

})

Ext.reg('StarHtmleditor', HTMLEditor)

JS的第一句 var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, 网上是没有var的，不用var不知道为什么总是报错，另外JS一定要与JSP的编码方式一致，要不然报莫名其妙的错误，而且错误都没有显示。

后台java代码

/****

* HTMLEditor增加上传图片功能：

* 1、上传图片后，需要将图片的位置及图片的名称返回给前台HTMLEditor

* 2、前台HTMLEditor根据返回的值将图片显示出来

* 3、进行统一保存

* @param 上传图片功能

* @return JSON结果

* @throws IOException

*/

public void HTMLEditorAddImg() throws IOException {

if(!"".equals(UserFile) &&UserFile != null &&UserFile.length() >0){

File path = ImportImg(UserFile, "jpg")

UserFilePath = "../" + path.toString().replaceAll("\\\\", "/").substring(path.toString().replaceAll("\\\\", "/").indexOf("FileImg"))

}

this.getResponse().setContentType("text/html")

this.getResponse().getWriter().write("{success:'true',fileURL:'" + UserFilePath + "'}")

}

特别要注意的是路径问题，路径问题主要有2点需要注意：

1、前台页面引用 StarHtmleditor.js 的路径一定要正确；

2、 Htmleditor上传的图片路径一定要改，因为上传之后图片路径变为http://localhost:8080/，在正常使用中图片不显示，要将该地址替换为服务器的IP地址；替换方法如下：

//获取本地IP地址,因为extjs的htmleditor上传的照片路径有问题，需要将路径替换为本机IP地址

InetAddress inet = InetAddress.getLocalHost()

shopSp.setSpTxms(shopSp.getSpTxms().replace("localhost", inet.getHostAddress().toString()))

这样基本就完成了这个HTMLEditor上传图片功能。

如图：

---