extjs实现文件上传

ext的官方网站有许多大侠写了许多狠牛的上传控件，但是功能太炫，我感觉反而不适用！效果如下



上传完了之后地址会加载到上传内容这个文本框里面


里面还做了类型判断，用于上传文本和相片代码如下，把一下代码封装在一个js文件里面

Jscript代码







//*****************************************上传的公共js***************************************************************//

/**

* 约定:types为调用时传来的参数.形式为jsp-gig-png

* uploadid为上传后要填充路径的控件id

* 上传的属性均为upload

* 功能:页面调用openUpload("","");方法即可

*/

//...允许上传的后缀名

var types = "";

//...上传后填充控件的id

var uploadid = "";

function openUpload(type,id){

types = type;

uploadid = id;

winUpload.show();

}

var formUpload = new Ext.form.FormPanel({

baseCls: 'x-plain',

labelWidth: 80,

fileUpload:true,

defaultType: 'textfield',

items: [{

xtype: 'textfield',

fieldLabel: '文 件',

name: 'upload',

inputType: 'file',

allowBlank: false,

blankText: '请上传文件',

anchor: '90%' // anchor width by percentage

}]

});

var winUpload = new Ext.Window({

title: '资源上传',

width: 400,

height:200,

minWidth: 300,

minHeight: 100,

layout: 'fit',

plain:true,

bodyStyle:'padding:5px;',

buttonAlign:'center',

items: formUpload,

buttons: [{

text: '上 传',

handler: function() {

if(formUpload.form.isValid()){

Ext.MessageBox.show({

title: 'Please wait',

msg: 'Uploading...',

progressText: '',

width:300,

progress:true,

closable:false,

animEl: 'loding'

});

formUpload.getForm().submit({

url:'uploadAction.action?types='+types,

success: function(form, action){

var objxzdz = Ext.get(uploadid).dom;

var value = action.result.msg;

objxzdz.value = value;

Ext.Msg.alert('成功','上传成功.');

winUpload.hide();

},

failure: function(form, action){

//... action生成的json{msg:上传失败},页面就可以用action.result.msg得到非常之灵活

Ext.Msg.alert('Error', action.result.msg);

}

})

}

}

},{

text: '取 消',

handler:function(){winUpload.hide();}

}]

});

//*****************************************上传的公共js***************************************************************//

现在已经封装完毕了，我们看看在页面上如何调用
openUpload("txt-xls-doc-docs-pds","xzdzid");
就这一句话，嘿嘿，简单吧？第一个参数为允许上传的类型，第二个参数为上传后地址要绑定到哪个控件（是该控件的id）

action的代码还是贴下吧
<PRE class=java name="code">import java.io.File;

import java.io.FileInputStream;

import java.io.FileOutputStream;

import org.apache.struts2.ServletActionContext;

import net.ask123.ecommerce.common.util.Common;

import net.ask123.ecommerce.common.util.Constants;

import net.ask123.ecommerce.common.util.FileOperate;

import net.ask123.ecommerce.common.util.VeDate;

/**

* 上传的公共方法

*

* @author sam.zhang

*

*/

public class UploadAction extends ExtJsonActionSuport {

/**

*

*/

private static final long serialVersionUID = 1L;

//和前台的名字一样，这里约定是 upload
private File upload;

private String uploadContentType;

private String uploadFileName;

private String savePath;

// 存放允许上传的后缀名

private String types;

public String getSavePath() {

return savePath;

}

public void setSavePath(String savePath) {

this.savePath = savePath;

}

public File getUpload() {

return upload;

}

public void setUpload(File upload) {

this.upload = upload;

}

public String getUploadContentType() {

return uploadContentType;

}

public void setUploadContentType(String uploadContentType) {

this.uploadContentType = uploadContentType;

}

public String getUploadFileName() {

return uploadFileName;

}

public void setUploadFileName(String uploadFileName) {

this.uploadFileName = uploadFileName;

}

public String getTypes() {

return types;

}

public void setTypes(String types) {

this.types = types;

}

@SuppressWarnings("deprecation")

public String execute() throws Exception {

String msg = "";

FileOperate fo = new FileOperate();

String sid = VeDate.getNo(4);

this.savePath = "/updownFiles";

try {

// ...获取文件后缀名

String ext = fo.getFileExt(getUploadFileName());

if ("".equals(this.types)

|| Common.indexofString(this.types, "-") == -1) {

msg = "上传失败";

this.setJsonString("{success:false,msg:'" + msg + "'}");

return SUCCESS;

}

// ...判断上传的文件是否合法

boolean istrue = FileOperate.trueExt(this.types.split("-"), ext);

if (!istrue) {

msg = "您上传的文件格式不正确，正确格式为" + this.types;

this.setJsonString("{success:false,msg:'" + msg + "'}");

return SUCCESS;

}

// ...文件存放的位置

String sPath = ServletActionContext.getRequest().getRealPath(

this.getSavePath())

+ Constants.FILESPARA

+ sid.substring(0, 4)

+ Constants.FILESPARA

+ sid.substring(4, 6)

+ Constants.FILESPARA;

// ...保存在数据库的路径

String filePath = this.savePath + "/" + sid.substring(0, 4) + "/"

+ sid.substring(4, 6) + "/" + sid + "." + ext;

// 如果目录不存在则创建它

fo.createFolder(sPath);

FileOutputStream fileOutputStream = new FileOutputStream(sPath

+ sid + "." + ext);

FileInputStream fileInputStream = new FileInputStream(getUpload());

// ...

byte[] buffer = new byte[1024];

int len = 0;

while ((len = fileInputStream.read(buffer)) > 0) {

fileOutputStream.write(buffer, 0, len);

}

this.setJsonString("{success:true,msg:'" + filePath + "'}");

} catch (Exception e) {

this.setJsonString("{success:false}");

e.printStackTrace();

}

return SUCCESS;

}

}

</PRE>
这里就大致贴贴一下吧，如果看不懂的话把struts2学习下就ok了，这里不一定后台一定是java的，

//*****************************************上传的公共js***************************************************************//

/**

* 约定:types为调用时传来的参数.形式为jsp-gig-png

*      uploadid为上传后要填充路径的控件id

*      上传的属性均为upload

* 功能:页面调用openUpload("","");方法即可

*/

//...允许上传的后缀名

var types = "";

//...上传后填充控件的id

var uploadid = "";

function openUpload(type,id){

types = type;

uploadid = id;

winUpload.show();

}

var formUpload = new Ext.form.FormPanel({

baseCls: 'x-plain',

labelWidth: 80,

fileUpload:true,

defaultType: 'textfield',

items: [{

xtype: 'textfield',

fieldLabel: '文 件',

name: 'upload',

inputType: 'file',

allowBlank: false,

blankText: '请上传文件',

anchor: '90%'  // anchor width by percentage

}]

});

var winUpload = new Ext.Window({

title: '资源上传',

width: 400,

height:200,

minWidth: 300,

minHeight: 100,

layout: 'fit',

plain:true,

bodyStyle:'padding:5px;',

buttonAlign:'center',

items: formUpload,

buttons: [{

text: '上 传',

handler: function() {

if(formUpload.form.isValid()){

Ext.MessageBox.show({

title: 'Please wait',

msg: 'Uploading...',

progressText: '',

width:300,

progress:true,

closable:false,

animEl: 'loding'

});

formUpload.getForm().submit({

url:'uploadAction.action?types='+types,

success: function(form, action){

var objxzdz = Ext.get(uploadid).dom;

var value = action.result.msg;

objxzdz.value = value;

Ext.Msg.alert('成功','上传成功.');

winUpload.hide();

},

failure: function(form, action){

//... action生成的json{msg:上传失败},页面就可以用action.result.msg得到非常之灵活

Ext.Msg.alert('Error', action.result.msg);

}

})

}

}

},{

text: '取 消',

handler:function(){winUpload.hide();}

}]

});

//*****************************************上传的公共js***************************************************************//

现在已经封装完毕了，我们看看在页面上如何调用
openUpload("txt-xls-doc-docs-pds","xzdzid");
就这一句话，嘿嘿，简单吧？第一个参数为允许上传的类型，第二个参数为上传后地址要绑定到哪个控件（是该控件的id）

action的代码还是贴下吧
Java代码 

 



import java.io.File;

import java.io.FileInputStream;

import java.io.FileOutputStream;

import org.apache.struts2.ServletActionContext;

import net.ask123.ecommerce.common.util.Common;

import net.ask123.ecommerce.common.util.Constants;

import net.ask123.ecommerce.common.util.FileOperate;

import net.ask123.ecommerce.common.util.VeDate;

/**

* 上传的公共方法

*

* @author sam.zhang

*

*/

public class UploadAction extends ExtJsonActionSuport {

/**

*

*/

private static final long serialVersionUID = 1L;

//和前台的名字一样，这里约定是 upload
private File upload;

private String uploadContentType;

private String uploadFileName;

private String savePath;

// 存放允许上传的后缀名

private String types;

public String getSavePath() {

return savePath;

}

public void setSavePath(String savePath) {

this.savePath = savePath;

}

public File getUpload() {

return upload;

}

public void setUpload(File upload) {

this.upload = upload;

}

public String getUploadContentType() {

return uploadContentType;

}

public void setUploadContentType(String uploadContentType) {

this.uploadContentType = uploadContentType;

}

public String getUploadFileName() {

return uploadFileName;

}

public void setUploadFileName(String uploadFileName) {

this.uploadFileName = uploadFileName;

}

public String getTypes() {

return types;

}

public void setTypes(String types) {

this.types = types;

}

@SuppressWarnings("deprecation")

public String execute() throws Exception {

String msg = "";

FileOperate fo = new FileOperate();

String sid = VeDate.getNo(4);

this.savePath = "/updownFiles";

try {

// ...获取文件后缀名

String ext = fo.getFileExt(getUploadFileName());

if ("".equals(this.types)

|| Common.indexofString(this.types, "-") == -1) {

msg = "上传失败";

this.setJsonString("{success:false,msg:'" + msg + "'}");

return SUCCESS;

}

// ...判断上传的文件是否合法

boolean istrue = FileOperate.trueExt(this.types.split("-"), ext);

if (!istrue) {

msg = "您上传的文件格式不正确，正确格式为" + this.types;

this.setJsonString("{success:false,msg:'" + msg + "'}");

return SUCCESS;

}

// ...文件存放的位置

String sPath = ServletActionContext.getRequest().getRealPath(

this.getSavePath())

+ Constants.FILESPARA

+ sid.substring(0, 4)

+ Constants.FILESPARA

+ sid.substring(4, 6)

+ Constants.FILESPARA;

// ...保存在数据库的路径

String filePath = this.savePath + "/" + sid.substring(0, 4) + "/"

+ sid.substring(4, 6) + "/" + sid + "." + ext;

// 如果目录不存在则创建它

fo.createFolder(sPath);

FileOutputStream fileOutputStream = new FileOutputStream(sPath

+ sid + "." + ext);

FileInputStream fileInputStream = new FileInputStream(getUpload());

// ...

byte[] buffer = new byte[1024];

int len = 0;

while ((len = fileInputStream.read(buffer)) > 0) {

fileOutputStream.write(buffer, 0, len);

}

this.setJsonString("{success:true,msg:'" + filePath + "'}");

} catch (Exception e) {

this.setJsonString("{success:false}");

e.printStackTrace();

}

return SUCCESS;

}

}
import java.io.File;

import java.io.FileInputStream;

import java.io.FileOutputStream;

import org.apache.struts2.ServletActionContext;

import net.ask123.ecommerce.common.util.Common;

import net.ask123.ecommerce.common.util.Constants;

import net.ask123.ecommerce.common.util.FileOperate;

import net.ask123.ecommerce.common.util.VeDate;

/**

* 上传的公共方法

*

* @author sam.zhang

*

*/

public class UploadAction extends ExtJsonActionSuport {

/**

*

*/

private static final long serialVersionUID = 1L;

//和前台的名字一样，这里约定是 upload
private File upload;

private String uploadContentType;

private String uploadFileName;

private String savePath;

// 存放允许上传的后缀名

private String types;

public String getSavePath() {

return savePath;

}

public void setSavePath(String savePath) {

this.savePath = savePath;

}

public File getUpload() {

return upload;

}

public void setUpload(File upload) {

this.upload = upload;

}

public String getUploadContentType() {

return uploadContentType;

}

public void setUploadContentType(String uploadContentType) {

this.uploadContentType = uploadContentType;

}

public String getUploadFileName() {

return uploadFileName;

}

public void setUploadFileName(String uploadFileName) {

this.uploadFileName = uploadFileName;

}

public String getTypes() {

return types;

}

public void setTypes(String types) {

this.types = types;

}

@SuppressWarnings("deprecation")

public String execute() throws Exception {

String msg = "";

FileOperate fo = new FileOperate();

String sid = VeDate.getNo(4);

this.savePath = "/updownFiles";

try {

// ...获取文件后缀名

String ext = fo.getFileExt(getUploadFileName());

if ("".equals(this.types)

|| Common.indexofString(this.types, "-") == -1) {

msg = "上传失败";

this.setJsonString("{success:false,msg:'" + msg + "'}");

return SUCCESS;

}

// ...判断上传的文件是否合法

boolean istrue = FileOperate.trueExt(this.types.split("-"), ext);

if (!istrue) {

msg = "您上传的文件格式不正确，正确格式为" + this.types;

this.setJsonString("{success:false,msg:'" + msg + "'}");

return SUCCESS;

}

// ...文件存放的位置

String sPath = ServletActionContext.getRequest().getRealPath(

this.getSavePath())

+ Constants.FILESPARA

+ sid.substring(0, 4)

+ Constants.FILESPARA

+ sid.substring(4, 6)

+ Constants.FILESPARA;

// ...保存在数据库的路径

String filePath = this.savePath + "/" + sid.substring(0, 4) + "/"

+ sid.substring(4, 6) + "/" + sid + "." + ext;

// 如果目录不存在则创建它

fo.createFolder(sPath);

FileOutputStream fileOutputStream = new FileOutputStream(sPath

+ sid + "." + ext);

FileInputStream fileInputStream = new FileInputStream(getUpload());

// ...

byte[] buffer = new byte[1024];

int len = 0;

while ((len = fileInputStream.read(buffer)) > 0) {

fileOutputStream.write(buffer, 0, len);

}

this.setJsonString("{success:true,msg:'" + filePath + "'}");

} catch (Exception e) {

this.setJsonString("{success:false}");

e.printStackTrace();

}

return SUCCESS;

}

}

这里就大致贴贴一下吧，如果看不懂的话把struts2学习下就ok了，这里不一定后台一定是java的，

关键是

Jscript代码







url:'uploadAction.action?types='+types,这里会指定后台的请求地址