ext的官方网站有许多大侠写了许多狠牛的上传控件,但是功能太炫,我感觉反而不适用!效果如下 上传完了之后地址会加载到上传内容这个文本框里面 里面还做了类型判断,用于上传文本和相片代码如下,把一下代码封装在一个js文件里面
//*****************************************上传的公共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的代码还是贴下吧
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的,
关键是
url:'uploadAction.action?types='+types,这里会指定后台的请求地址