Extjs 上传文件（二）

最新推荐文章于 2024-05-18 16:42:38 发布

weixin_33738578

最新推荐文章于 2024-05-18 16:42:38 发布

阅读量85

点赞数

文章标签： java json 数据库

原文链接：http://blog.51cto.com/longx/1348825

版权

http://www.itpub.net/thread-1726733-1-1.html

文件上传是WEB系统一个基本功能，在一个Form提交到服务器后，如果form的contentType是“multipart/form-data”类型，服务器就会认为这是文件提交。上传文件一般都是单独处理，不能同时处理Form中的其它表单。但是后台可以通过一定手段得到文件输入流之外的表单数据。比如邮件系统中处理附件时候，同时也处理了收件人，标题，内容等信息。来看下ExtJS中怎么实现这样的功能：
按正常方式创建一个FormPanel, 同时需要加入一个属性：fileUpload, 当这个属性为真时，就会声明当前FORM是一个带上传的FORM，其实就是把contentType改为“multipart/form-data”。
有了上传的容器，就可以在items属性中加入一个文件选择控件了，同样很简单，用正常的TextField来处理，指定inputType为"file"类型即可:

new Ext.form.TextField({
allowBlank:false,
fieldLabel: '文件',
id:'uploadFile',
name:'uploadFile',
anchor:'90%',
inputType:'file'
})

这时候，这个Form已经能够进行选择文件并上传了。

接下来的问题是，一般编辑框在新增后都不会关闭，而是清空所有表单并允许继续增加，很自然的我们会调用this.form.reset()来清空当前form，但是很不幸，你会发现在IE下，选择的文件并没有从编辑框中消失，这个问题在纯HTML的表单中如果有类型为reset的按钮，在点击了reset后是会被清空的。
其实，FormPanel的本质也是一个FORM, 因此可以用处理html表单的办法来处理这个问题：
items中增加一个JS对象：
{html:'<input id="resetForm" type=reset style="display:none;">',border:false}
注意使用了样式display,并设置为none来告诉FormPanel不要显示这个表单。
然后就可以调用document.getElementByIdx('resetForm').click()，调用后，文件选择控件中的文件名就正常清除掉了。

***********************************************************

ExtJS之上传文件示例【struts2方式】

博客分类：

RIA-ExtJS专栏

EXT IE json FP Struts

今天突然想起来以前的关于EXT的上传的文章没有贴出来，现在贴出代码在此

Js代码

<SPAN style="FONT-SIZE: medium">var uploadForm= new Ext.FormPanel({
id: 'form-panel',
fileUpload: true,
width: 500,
frame: true,
//title: '流程文件上传',
collapsible:true,
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
},
items: [{
xtype:'combo',
width : 200,
allowBlank : false,
blankText : '必须选择文档类型',
hiddenName : 'CId', //这个hiddenName指的就是BookTypeId
name : 'CName',
store : new Ext.data.Store({
autoLoad :true,
reader: new Ext.data.JsonReader({//读取json数据
root:'TCategoryList', //
totalProperty:'totalProperty', //总记录数
id:'CId'
},
Ext.data.Record.create([
{name: 'CId'},
{name: 'CName'}
])
),
proxy : new Ext.data.HttpProxy({
url : path+'doc/getTCategoryForDoc.action'
})
}),//设置数据源
allQuery:'alldoc',//查询全部信息的查询字符串
triggerAction: 'all',//单击触发按钮显示全部数据
editable : false,//禁止编辑
loadingText : '正在加载文档类型信息',//加载数据时显示的提示信息
displayField:'CName',//定义要显示的字段
valueField : 'CId',
emptyText :'请选择文档类型',
mode: 'remote',//远程模式
id:'CName',
fieldLabel:'类型'
},{
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: '请选择流程文件...',
fieldLabel: '文件',
name: 'upload', // ★ from字段，对应后台java的bean属性，上传的文件字段
buttonCfg: {
text: '', // 上传文件时的本地查找按钮
iconCls: 'icon-upload'// 按钮上的图片，定义在CSS中
}
},
{
xtype: 'hidden',
id: 'fileName',
emptyText: '请选择文档文件...',
name: 'fileName',
text:Ext.getCmp("form-file") //在上传这个框中，getCmp可以获取整条路径的最后的名称
},
{
xtype:'hidden',
name : 'docId',
id:'docId'
}
],
buttons: [{
text: '上传',
handler: function(){
if(uploadForm.getForm().isValid()){
uploadForm.getForm().submit({
url:path+ 'upload/upload.action?Tab_staffId='+staffId,
method:'POST',
waitTitle: '请稍后',
waitMsg: '正在上传文档文件 ...',
success: function(fp, action){
updatedocListForUpload(action.result.docId,action.result.name,action.result.docUrl,action.result.CName,action.result.extType,action.result.state);
msg('成功！', '文档文件上传成功！');
//msg("返回的ID呢"+action.result.docId);
//Ext.log('上传成功。')
//Ext.log(action.failure)
//failure
//Ext.log(action.result.upload);
//Ext.log(action.result.msg);
Ext.getCmp("form-file").reset(); // 指定文件字段的id清空其内容
Ext.getCmp("CName").reset();
},
failure: function(fp, action){
msg('失败！', '文档文件上传失败！');
}
});
}
}
},{
text: '重置',
handler: function(){
uploadForm.getForm().reset();
}
}]
});</SPAN>

var uploadForm= new Ext.FormPanel({    id: 'form-panel',            fileUpload: true,            width: 500,            frame: true,            //title: '流程文件上传',            collapsible:true,            autoHeight: true,            bodyStyle: 'padding: 10px 10px 0 10px;',            labelWidth: 50,            defaults: {                anchor: '95%',                allowBlank: false,                msgTarget: 'side'            },            items: [{xtype:'combo',width : 200,allowBlank : false,blankText : '必须选择文档类型',hiddenName : 'CId', //这个hiddenName指的就是BookTypeIdname : 'CName',store : new Ext.data.Store({autoLoad :true, reader: new Ext.data.JsonReader({//读取json数据                   root:'TCategoryList',                        //                   totalProperty:'totalProperty',  //总记录数                   id:'CId'                                 },Ext.data.Record.create([{name: 'CId'},{name: 'CName'}])),proxy : new Ext.data.HttpProxy({url : path+'doc/getTCategoryForDoc.action'})}),//设置数据源allQuery:'alldoc',//查询全部信息的查询字符串triggerAction: 'all',//单击触发按钮显示全部数据editable : false,//禁止编辑loadingText : '正在加载文档类型信息',//加载数据时显示的提示信息displayField:'CName',//定义要显示的字段valueField : 'CId',emptyText :'请选择文档类型',mode: 'remote',//远程模式id:'CName',fieldLabel:'类型'},{                xtype: 'fileuploadfield',                id: 'form-file',                emptyText: '请选择流程文件...',                fieldLabel: '文件',                name: 'upload', // ★ from字段，对应后台java的bean属性，上传的文件字段                buttonCfg: {    text: '',  // 上传文件时的本地查找按钮                    iconCls: 'icon-upload'  // 按钮上的图片，定义在CSS中                }            },            {                    xtype: 'hidden',                    id: 'fileName',                    emptyText: '请选择文档文件...',                    name: 'fileName',                    text:Ext.getCmp("form-file") //在上传这个框中，getCmp可以获取整条路径的最后的名称                                  },              {               xtype:'hidden',               name : 'docId',               id:'docId'               }           ],    buttons: [{                text: '上传',                handler: function(){                        if(uploadForm.getForm().isValid()){                    uploadForm.getForm().submit({                        url:path+ 'upload/upload.action?Tab_staffId='+staffId,                        method:'POST',        waitTitle: '请稍后',                        waitMsg: '正在上传文档文件 ...',    success: function(fp, action){                    updatedocListForUpload(action.result.docId,action.result.name,action.result.docUrl,action.result.CName,action.result.extType,action.result.state);                       msg('成功！', '文档文件上传成功！');                       //msg("返回的ID呢"+action.result.docId);           //Ext.log('上传成功。')    //Ext.log(action.failure)    //failure    //Ext.log(action.result.upload);    //Ext.log(action.result.msg);                            Ext.getCmp("form-file").reset();          // 指定文件字段的id清空其内容    Ext.getCmp("CName").reset();                        },    failure: function(fp, action){                            msg('失败！', '文档文件上传失败！');                        }                     });                    }                }            },{                text: '重置',                handler: function(){            uploadForm.getForm().reset();                }            }]        });

具体处理的ACTION

Java代码

<SPAN style="FONT-SIZE: medium">package lsbpm.web.action;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.net.URLEncoder;
import java.sql.Timestamp;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.UUID;
import lsbpm.db.domain2.TCategory;
import lsbpm.db.domain2.TDoc;
import lsbpm.db.domain2.TDocCategory;
import lsbpm.db.domain2.TStaff;
import lsbpm.web.lecene.LuceneIndex;
import net.sf.json.JSONObject;
import org.apache.struts2.ServletActionContext;
/**
* Show case File Upload example's action. <code>FileUploadAction</code>
*/
publicclass FileUploadAction extends BaseAction {
privatestaticfinallong serialVersionUID = 5156288255337069381L;
private String contentType;
private File upload;
private String fileName;
private String caption;
private String CId;//文档TCategory的ID
private String jsonMsg;// 返回ExtJs upload form消息
private String Tab_staffId;
public String getJsonMsg() {
return jsonMsg;
}
publicvoid setJsonMsg(String jsonMsg) {
this.jsonMsg = jsonMsg;
}
// since we are using <s:file name="upload" .../> the file name will be
// obtained through getter/setter of <file-tag-name>FileName
public String getUploadFileName() {
return fileName;
}
publicvoid setUploadFileName(String fileName) {
this.fileName = fileName;
}
// since we are using <s:file name="upload" ... /> the content type will be
// obtained through getter/setter of <file-tag-name>ContentType
public String getUploadContentType() {
return contentType;
}
publicvoid setUploadContentType(String contentType) {
this.contentType = contentType;
}
// since we are using <s:file name="upload" ... /> the File itself will be
// obtained through getter/setter of <file-tag-name>
public File getUpload() {
return upload;
}
publicvoid setUpload(File upload) {
this.upload = upload;
}
public String getCaption() {
return caption;
}
publicvoid setCaption(String caption) {
this.caption = caption;
}
// 解析上传的流程文件，将流程图分解后存入数据库中
// 用json格式返回成功失败及错误信息等，可直接与ExtJS衔接。
public String combinStr(String str,int i){
str=str.substring(0,str.indexOf("."))+i+ str.substring(str.indexOf("."));
return str;
}
public String upload() throws Exception {
System.out.println("执行上传文件操作。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。");
// 定义要返回的对象，返回时用json包装
HashMap<String, String> retMsg = new HashMap<String, String>();
TStaff staff=(TStaff)genericService.findById(TStaff.class, Tab_staffId);
TCategory category=(TCategory)genericService.findById(TCategory.class, CId);
TDoc doc = new TDoc();
doc.setName(fileName);//-------------------------------------------------(1)filename属性(非空)
System.out.println("拼装前------------------>"+fileName);
List<String> propertisList=new ArrayList<String>();
propertisList.add("docVersion-");
List<TDoc> result=genericService.findByProperty(doc, propertisList, 0, 0);
doc.setDocVersion(1);//-------------------------------------------------(2)DocVersion属性(非空)
int size=propertisList==null?0:result.size();
if(size>0){
int docVersion=result.get(0).getDocVersion();
doc.setDocVersion(docVersion+1);
fileName=combinStr(fileName,docVersion+1);主要针对相同名称的文件处理加上版本号
System.out.println("--------------------经过版本升级---------------------------------");
}
doc.setDocAlias(fileName);//-------------------------------------------------(3)DocAlias属性(非空)
doc.setBoost(0d);//-------------------------------------------------(4)Broost属性(非空)
System.out.println("拼装后----------------->"+fileName);
String realPath="E:\\DataDir\\"+fileName;
if (upload.isFile()) {
BufferedInputStream bis = new BufferedInputStream(
new FileInputStream(upload));
BufferedOutputStream bos = null;
try {
bos = new BufferedOutputStream(new FileOutputStream(realPath));//为以防万一，以后写文件的路径尽量写成正双斜杠的
// 从源文件中取数据，写到目标文件中
byte[] buff = newbyte[8192];
for (int len = -1; (len = bis.read(buff)) != -1;) {
bos.write(buff, 0, len);
}
bos.flush();
} catch (IOException ie) {
ie.printStackTrace();
} finally {
if (bis != null) {
try {
bis.close();
} catch (IOException ie) {
ie.printStackTrace();
}
}
if (bos != null) {
try {
bos.close();
} catch (IOException ie) {
ie.printStackTrace();
}
}
}
System.out.println("----------------------------0000");
doc.setDocUrl(fileName);//-------------------------------------------------(5)DocUrl属性(非空)
doc.setExtType(fileName.substring(fileName.lastIndexOf('.')+1));//---------(6)extType属性(非空)
doc.setState("可用");//状态这个暂时写死为可用 //----------------------------------(7)state属性(非空)
doc.setTStaffByDesigner(staff);//设计者先和操作者暂定为同一人-------------------- (8)designer属性(可空)
doc.setTStaffByOperator(staff);//------------------------------------------(9)operator属性(非空)
doc.setUpgradeDate(new Timestamp(System.currentTimeMillis()));
boolean isSuccess = false;
System.out.println("即将要插入数据库的文件内容为："+doc);
genericService.create(doc);
//插入文档类型
TDocCategory cate=new TDocCategory();
cate.setTCategory(category);
cate.setTDoc(doc);
cate.setBoost(0d);
genericService.create(cate);
String Id = doc.getDocId();
System.out.println("新增后获取到的员工ID" + Id);
System.out.println(fileName + "----------------");
String extTypes=doc.getExtType();
//如果上传的文件在我要建立索引的范围之内，可以见索引，否则不建立
if(extTypes.equals("pdf")||extTypes.equals("html")||
extTypes.equals("rtf")||extTypes.equals("doc")||
extTypes.equals("ppt")||extTypes.equals("xls")||
extTypes.equals("txt")){
LuceneIndex index=new LuceneIndex();//建立索引
index.buildsingle(doc);
System.out.println("索引完毕。。。。。。。。。。。。。。。。。。。。。");
}
// 流程文件解析和加载，成功！将流打到客户端
retMsg.put("success", "true");
retMsg.put("docId", Id);
retMsg.put("name", doc.getDocAlias());
if(doc.getTDocCategories().size()==1){
for(TDocCategory cate1:doc.getTDocCategories()){
retMsg.put("CName",cate1.getTCategory().getName());
}
}
retMsg.put("extType", doc.getExtType());
retMsg.put("state", doc.getState());
retMsg.put("docId", doc.getDocId());
retMsg.put("docUrl", doc.getDocUrl());
retMsg.put("upload", "ok");
retMsg.put("msg", "hhaahhaa!!");
} else {
// 流程文件解析和加载，失败！
retMsg.put("failure", "true");
retMsg.put("upload", "error");
retMsg.put("msg", " failed !!");
}
// json包装返回对象
jsonMsg = JSONObject.fromObject(retMsg).toString();
return SUCCESS;
}
public String getFileName() {
return fileName;
}
publicvoid setFileName(String fileName) {
this.fileName = fileName;
}
public String getCId() {
return CId;
}
publicvoid setCId(String cId) {
CId = cId;
}
public String getTab_staffId() {
return Tab_staffId;
}
publicvoid setTab_staffId(String tabStaffId) {
Tab_staffId = tabStaffId;
}
}
</SPAN>

package lsbpm.web.action;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.net.URLEncoder;import java.sql.Timestamp;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.UUID;import lsbpm.db.domain2.TCategory;import lsbpm.db.domain2.TDoc;import lsbpm.db.domain2.TDocCategory;import lsbpm.db.domain2.TStaff;import lsbpm.web.lecene.LuceneIndex;import net.sf.json.JSONObject;import org.apache.struts2.ServletActionContext;/** * Show case File Upload example's action. <code>FileUploadAction</code> */public class FileUploadAction extends BaseAction {private static final long serialVersionUID = 5156288255337069381L;private String contentType;private File upload;private String fileName;private String caption;    private String CId;//文档TCategory的IDprivate String jsonMsg;// 返回ExtJs upload form消息    private String Tab_staffId;public String getJsonMsg() {return jsonMsg;}public void setJsonMsg(String jsonMsg) {this.jsonMsg = jsonMsg;}// since we are using <s:file name="upload" .../> the file name will be// obtained through getter/setter of <file-tag-name>FileNamepublic String getUploadFileName() {return fileName;}public void setUploadFileName(String fileName) {this.fileName = fileName;}// since we are using <s:file name="upload" ... /> the content type will be// obtained through getter/setter of <file-tag-name>ContentTypepublic String getUploadContentType() {return contentType;}public void setUploadContentType(String contentType) {this.contentType = contentType;}// since we are using <s:file name="upload" ... /> the File itself will be// obtained through getter/setter of <file-tag-name>public File getUpload() {return upload;}public void setUpload(File upload) {this.upload = upload;}public String getCaption() {return caption;}public void setCaption(String caption) {this.caption = caption;}// 解析上传的流程文件，将流程图分解后存入数据库中// 用json格式返回成功失败及错误信息等，可直接与ExtJS衔接。public String combinStr(String str,int i){str=str.substring(0,str.indexOf("."))+i+ str.substring(str.indexOf("."));return str;}public String upload() throws Exception {System.out.println("执行上传文件操作。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。");// 定义要返回的对象，返回时用json包装HashMap<String, String> retMsg = new HashMap<String, String>();TStaff staff=(TStaff)genericService.findById(TStaff.class, Tab_staffId);TCategory category=(TCategory)genericService.findById(TCategory.class, CId);TDoc doc = new TDoc();doc.setName(fileName);//-------------------------------------------------(1)filename属性(非空)System.out.println("拼装前------------------>"+fileName);List<String> propertisList=new ArrayList<String>();propertisList.add("docVersion-");  List<TDoc> result=genericService.findByProperty(doc, propertisList, 0, 0);doc.setDocVersion(1);//-------------------------------------------------(2)DocVersion属性(非空)        int size=propertisList==null?0:result.size();        if(size>0){       int docVersion=result.get(0).getDocVersion();       doc.setDocVersion(docVersion+1);       fileName=combinStr(fileName,docVersion+1);主要针对相同名称的文件处理加上版本号       System.out.println("--------------------经过版本升级---------------------------------");        }        doc.setDocAlias(fileName);//-------------------------------------------------(3)DocAlias属性(非空)        doc.setBoost(0d);//-------------------------------------------------(4)Broost属性(非空)        System.out.println("拼装后----------------->"+fileName);       String realPath="E:\\DataDir\\"+fileName;if (upload.isFile()) {BufferedInputStream bis = new BufferedInputStream(new FileInputStream(upload));BufferedOutputStream bos = null;try {bos = new BufferedOutputStream(new FileOutputStream(realPath));//为以防万一，以后写文件的路径尽量写成正双斜杠的// 从源文件中取数据，写到目标文件中byte[] buff = new byte[8192];for (int len = -1; (len = bis.read(buff)) != -1;) {bos.write(buff, 0, len);}bos.flush();} catch (IOException ie) {ie.printStackTrace();} finally {if (bis != null) {try {bis.close();} catch (IOException ie) {ie.printStackTrace();}}if (bos != null) {try {bos.close();} catch (IOException ie) {ie.printStackTrace();}}}       System.out.println("----------------------------0000");doc.setDocUrl(fileName);//-------------------------------------------------(5)DocUrl属性(非空)    doc.setExtType(fileName.substring(fileName.lastIndexOf('.')+1));//---------(6)extType属性(非空)   doc.setState("可用");//状态这个暂时写死为可用 //----------------------------------(7)state属性(非空)doc.setTStaffByDesigner(staff);//设计者先和操作者暂定为同一人-------------------- (8)designer属性(可空)    doc.setTStaffByOperator(staff);//------------------------------------------(9)operator属性(非空)    doc.setUpgradeDate(new Timestamp(System.currentTimeMillis()));boolean isSuccess = false;System.out.println("即将要插入数据库的文件内容为："+doc);genericService.create(doc);//插入文档类型TDocCategory cate=new TDocCategory();cate.setTCategory(category);cate.setTDoc(doc);cate.setBoost(0d);genericService.create(cate);String Id = doc.getDocId();System.out.println("新增后获取到的员工ID" + Id);System.out.println(fileName + "----------------");String extTypes=doc.getExtType();//如果上传的文件在我要建立索引的范围之内，可以见索引，否则不建立if(extTypes.equals("pdf")||extTypes.equals("html")||extTypes.equals("rtf")||extTypes.equals("doc")||extTypes.equals("ppt")||extTypes.equals("xls")||extTypes.equals("txt")){ LuceneIndex index=new LuceneIndex();//建立索引     index.buildsingle(doc);     System.out.println("索引完毕。。。。。。。。。。。。。。。。。。。。。");}   // 流程文件解析和加载，成功！ 将流打到客户端retMsg.put("success", "true");retMsg.put("docId", Id);retMsg.put("name", doc.getDocAlias());if(doc.getTDocCategories().size()==1){ for(TDocCategory cate1:doc.getTDocCategories()){ retMsg.put("CName",cate1.getTCategory().getName()); }}retMsg.put("extType", doc.getExtType());retMsg.put("state", doc.getState());retMsg.put("docId", doc.getDocId());retMsg.put("docUrl", doc.getDocUrl());retMsg.put("upload", "ok");retMsg.put("msg", "hhaahhaa!!");} else {// 流程文件解析和加载，失败！retMsg.put("failure", "true");retMsg.put("upload", "error");retMsg.put("msg", " failed !!");}// json包装返回对象jsonMsg = JSONObject.fromObject(retMsg).toString();return SUCCESS;}public String getFileName() {return fileName;}public void setFileName(String fileName) {this.fileName = fileName;}public String getCId() {return CId;}public void setCId(String cId) {CId = cId;}public String getTab_staffId() {return Tab_staffId;}public void setTab_staffId(String tabStaffId) {Tab_staffId = tabStaffId;}}

struts.xml中添加一行代码

<constant name="struts.multipart.maxSize" value="102400000000000" />

转载于:https://blog.51cto.com/longx/1348825

weixin_33738578

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs 上传文件（二）

http://www.itpub.net/thread-1726733-1-1.html文件上传是WEB系统一个基本功能，在一个Form提交到服务器后，如果form的contentType是“multipart/form-data”类型，服务器就会认为这是文件提交。上传文件一般都是单独处理，不能同时处理Form中的其它表单。但是后台可以通过一定手段得到文件输入流之外的表单数据...
复制链接

扫一扫