`

[ExtJs 2.02]ajax文件上传

    博客分类:
  • ext
阅读更多
例子是网上找的,不过是php的 给转成jsp 吧中间遇到的问题说了一下
<html>
	<head>
		<title>upfile</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<link rel="stylesheet" type="text/css"
			href="resources/css/ext-all.css" />
		<script type="text/javascript" src="lib/ext-base.js"></script>
		<script type="text/javascript" src="lib/ext-all.js"></script>
		<script type="text/javascript"
			src="lib/ext-lang-zh_CN.js"></script>
		
<script type="text/javascript" src="upload.js"></script>
<script type="text/javascript" src="examples.js"></script>

	</head>

	<body>
	<h1>Upload with Forms</h1>

	</body>
</html>

upfile.js
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side'; 
Ext.onReady(function() {
	var form = new Ext.form.FormPanel({
		baseCls: 'x-plain',
		labelWidth: 80,
		//url:'http://extjs.org.cn/extjs/examples/form/upload.php',
		url:'upfile.jsp',
		fileUpload:true,
		defaultType: 'textfield',

		items: [{
			xtype: 'textfield',
			fieldLabel: 'File Name',
			name: 'userfile',
			inputType: 'file',
			allowBlank: false,
			blankText: 'File can\'t not empty.',
			anchor: '90%'  // anchor width by percentage
		}]
	});

	var win = new Ext.Window({
		title: 'Upload file',
		width: 400,
		height:200,
		minWidth: 300,
		minHeight: 100,
		layout: 'fit',
		plain:true,
		bodyStyle:'padding:5px;',
		buttonAlign:'center',
		items: form,

		buttons: [{
			text: 'Upload',
			handler: function() {
				if(form.form.isValid()){
					Ext.MessageBox.show({
						   title: 'Please wait',
						   msg: 'Uploading...',
						   progressText: '',
						   width:300,
						   progress:true,
						   closable:false,
						   animEl: 'loding'
					   });
					form.getForm().submit({    
						success: function(form, action){
						   Ext.Msg.alert('Message from extjs.org.cn',action.result.msg);
						   win.hide();  
						},    
					   failure: function(){    
						  Ext.Msg.alert('Error', 'File upload failure.');    
					   }
					})		       
				}
		   }
		},{
			text: 'Close',
			handler:function(){win.hide();}
		}]
	});
	win.show();
});

后台 jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="org.apache.commons.fileupload.*" %>  
<%@ page import="java.util.*" %>  
<%@ page import="java.util.Iterator" %>  
<%@ page import="java.io.File" %> 
<%
String temp=getServletContext().getRealPath("/")+"temp";   //临时目录 
  String loadpath=getServletContext().getRealPath("/")+"dir"; //上传文件存放目录 
  DiskFileUpload fu = new DiskFileUpload(); 
  fu.setSizeMax(1*1024*1024*1024);   // 设置允许用户上传文件大小,单位:字节 
  //fu.setSizeThreshold(409600);   // 设置最多只允许在内存中存储的数据,单位:字节 
  //fu.setRepositoryPath(temp); // 设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录 

  //开始读取上传信息 
  List fileItems = fu.parseRequest(request); 
 Iterator iter = fileItems.iterator(); // 依次处理每个上传的文件 

String name = "";
    FileItem itemi = (FileItem) iter.next();// 忽略其他不是文件域的所有表单信息 
    if (!itemi.isFormField()) { 
         name = itemi.getName();//获取上传文件名,包括路径 
         name=name.substring(name.lastIndexOf("\\")+1);//从全路径中提取文件名 
        // out.println(name); 
         long size = itemi.getSize(); 
         if((name==null||name.equals("")) && size==0) 
         return; 
         //out.println(itemi.getName()+"    Size="+itemi.getSize()+"<br>");//输出上传文件信息 
       //System.out.println(name);
         File fNew= new File(loadpath, "tempfile.txt");  
       
         itemi.write(fNew);  
out.println("{success:true,msg:'File was successfully uploaded.'}");

 } 
 %>



注意 可能有人会出现result.msg唯空 或 不是对象的原因
这是因为upfile.html和upfile.jsp不在同一域下 可能取得不到结果 实际应该上传成功
可以直接设成Ext.Msg.alert('Message from extjs.org.cn',"上传成功");
至于具体原因我也不太清楚,请了解的告知一下
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics