关于ext form上传文件的问题
 |
ufoly94
2008-06-13
我做的一个小例子,一个form,提交用户id,radio数据以及上传服务器的文件,一直不成功,请多多指教,多谢了.
code: var addForm = new Ext.form.FormPanel( { id:'addForm', baseCls: 'x-plain', labelWidth: 75, fileUpload: true, method:'POST', enctype:'multipart/form-data', items: [ { name:'att_id', fieldLabel:'ID', xtype:'numberfield', align:'center', blankText:'用户ID不能空,并且数字输入要求', allowBlank:false }, new Ext.form.FieldSet({ border:false, title:'选择资源类型', layout:'table', items:[ new Ext.form.Radio({ labelSeparator:'', name:'radio', checked:true, boxLabel:'普通文档', inputValue:'0' }), new Ext.form.Radio({ labelSeparator:'', name:'radio', checked:false, boxLabel:'资源连接', inputValue:'1' }) ] }), { name:'att_name', fieldLabel:'附件名称', inputType:'file', anchor : "50%", xtype:'textfield', allowBlank:false }, { name: 'att_desc', fieldLabel:'附件描述', xtype:'textfield', emptyText:'附件描述' } ], buttons:[{text:'提交', handler:function submitValid(){ var uploadform=Ext.getCmp("addForm").getForm(); var str=uploadform.getValues(); if(str.att_id==""||str.att_name=="") { alert("数据格式不符合要求，请重新输入！") } else{ uploadform.submit( { url:'processdata', success:function sucess(form,action){ alert("提交成功，请刷新察看"); }, failure:function fail(form,action){ alert("提交失败，请重新提交"); uploadform.reset(); } }); |
 |
rikugun
2008-06-16
|
|
yunhaifeiwu
2008-06-30
关键处：
1 (1) 服务器返回数据类型应设为text/html. Response. setContentType("text/html; charset=utf-8"); (2) 返回字符串格式应有： success部分，其后为false或true; msg部份，其后是要返回的信息。 例1：服务器返回成功信息 {success:true,msg:'成功'} 例2：服务器返回失败信息 {success:false,msg:'失败'} 2 客户端 (1) Formpanel的fileUpload属性其值要设成true (2) 表单提交回调的两个函数应为： failure: function(form,action){}, success: function(form,action){} ------------------------------------------------- 客户端源码
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/fyhC.css" />
<script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="resources/fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="resources/ext21/ext-all.js"></script>
</head>
<script>
Ext.onReady( function (){
var form = new Ext.form.FormPanel({
labelAlign: 'right',
title: 'form',
labelWidth: 50,
frame:true,
fileUpload: true,
baseParams : {aa:'bb'}, //文件上传时，没有用？迷惑中
url:" login.do",
width: 380,
items: [{
xtype: 'textfield',
fieldLabel: '文本框',
name: 'file',
inputType: 'file'//文件类型
}],
buttons: [{
text: '按钮',
handler: s
}]
});
function s() {
form.getForm().submit({//客户端的数据提交给服务器
waitTitle:"请稍候",
waitMsg:"正在提交表单数据，请稍候。。。。。。",
//如果submit失敗，執行這一個function
failure:function(form1,action){
Ext.MessageBox.hide();
Ext.MessageBox.alert('Error',action.result.msg);
},
success: function(form1,action){
Ext.MessageBox.hide();
Ext.MessageBox.alert('Success',action.result.msg);
}
})
}
form.render(document.body);
});
</script>
<body>
<div id="hello"/>
</body>
</html>
服务端源码 用了apcher的 fileLoad组件 相关的两个包为： commons-io-1.4.jar commons-fileupload-1.2.1.jar 另外使用了spring的mvc框架。其他框架相应变动就行了 说明:spring返回的ModelAndView 视图必须是null，否则返回时会出现视图网页 而导制出现下载框
package action;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.validation.BindException;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.mvc.SimpleFormController;
import java.io.File;
import java.io.IOException;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;
import java.util.Iterator;
import java.util.List;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.FileItem;
/**
*
* @author cloud
*/
public class Login extends SimpleFormController{
public Login(){
// this.setCommandClass(Fuser.class);
}
private static final long serialVersionUID = 7440302204266787092L;
String uploadPath = "d:\\uploadtest\\"; // 用于存放上传文件的目录
String tempPath = "d:\\tmp\\"; // 用于存放临时文件的目录
@Override
protected ModelAndView onSubmit(HttpServletRequest arg0, HttpServletResponse arg1, Object cmd, BindException ex) throws Exception {
arg1.setContentType("text/html; charset=utf-8");
// arg1.setContentType("text/html; charset=ISO-8859-4");
ModelAndView aaa=null;
String data="{success:flase,msg:'失败'}";
// if ( !( arg0.getParameter("aa").equals("bb") ) ) {
// aaa=new ModelAndView(this.getFormView());
// arg1.getWriter().print("{success:flase,message:'失败1'}");
// return aaa;
// }
try {
java.io.File tmpfile=new java.io.File(tempPath);
boolean isMultipart = ServletFileUpload.isMultipartContent(arg0);
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(4096);//设置缓冲区大小，这里是4kb
factory.setRepository(tmpfile); // 设置临时目录
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setSizeMax(4194304);// 设置最大文件尺寸，这里是4MB
List fileItems = upload.parseRequest(arg0);// 得到所有的文件：
Iterator i = fileItems.iterator();
// 依次处理每一个文件：
while (i.hasNext()) {
FileItem fi = (FileItem) i.next();
String fileName = fi.getName();// 获得文件名，这个文件名包括路径：
if (fileName != null) {
// 在这里可以记录用户和文件信息
// 此处应该定义一个接口（CallBack），用于处理后事。
// 写入文件a.txt，你也可以从fileName中提取文件名：
String extfile = fileName.substring(fileName.indexOf("."));
Timestamp now = new Timestamp((new java.util.Date())
.getTime());
SimpleDateFormat fmt = new SimpleDateFormat(
"yyyyMMddHHmmssSSS");
String pfileName = fmt.format(now).toString().trim();
System.out.println(uploadPath + pfileName + extfile);
fi.write(new File(uploadPath + pfileName + extfile));
}
}
data="{success:true,msg:'上传成功'}";
} catch (Exception e) {
data="{success:flase,msg:'失败'}";
// 可以跳转出错页面
// aaa=new ModelAndView(this.getFormView());
} finally{
arg1.getWriter().write(data);
arg1.getWriter().flush();
return aaa;
}
}
}
|
|
yunhaifeiwu
2008-07-02
文件上传时， 传递参数方法：
在url中设置参数。 如： var form = new Ext.form.FormPanel({
labelAlign: 'right',
title: 'form',
labelWidth: 50,
frame:true,
fileUpload: true,
//通过url传递参数aa与参数aa1
url:" login.do?aa=bb&aa1=cc",
width: 380,
items: [{
xtype: 'textfield',
fieldLabel: '文本框',
name: 'file',
inputType: 'file'//文件类型
}],
buttons: [{
text: '按钮',
handler: s
}]
});
|
