`

[ExtJs 2.02]ajax文件上传

    博客分类：
  • ext
AjaxEXTJavaJSPPHP 
阅读更多
例子是网上找的，不过是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',"上传成功");
至于具体原因我也不太清楚，请了解的告知一下
分享到：
| [ExtJs 2.02]Combobox的使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJS 2.02版本

    ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端 ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs...

    extjs2.02帮助文档

    这个"extjs2.02帮助文档"提供了关于ExtJS 2.0.2版本的详尽指南，它是一个中文完整版，对于开发者来说是学习和理解这一版本ExtJS的重要资源。 在ExtJS 2.0.2中，主要包含了以下关键知识点： 1. **组件系统**：ExtJS...

    不懂ajax一样做ajax extjs2.02

    这个软件现在市面上只有2.0 和2.1 2,0有些新东西不能用 2.1要钱才能用啊, &lt;br&gt;怕这个东西以后2.02没有了先发个到csdn保存一下, &lt;br&gt;听说网友想在2.02上开发出网友自己的2.1这个目前不敢肯定,但是官方的...

    extjs各种各样的帮助文档、说明和教程（最适合初学者和系统学习者）

    首先，`Ext2.2docs.chm`和`EXT2.02 - API文档中心(ajax网站提供).zip`是EXTJS的官方API文档。这些文档详细列出了EXTJS 2.2和2.02版本的所有类、方法、属性和事件，是开发者查阅EXTJS功能和用法的主要参考资料。通过...

    Extjs10个开发必备资料

    Ext 2.02 - API文档中心(ajax网站提供).zip EXT 中文手册.pdf Ext2 核心 API 中文详解.pdf EXT2.0中文教程.pdf Ext2.2docs.chm ExtJS2.0教程.chm ExtJS2.0实用简明教程.pdf EXT官方网站+中文教程.doc ext中文API+ ...

    很全的Extjs核心文档api

    Ext 2.02 - API文档中心(ajax网站提供) EXT2.0中文教程 Ext2.2docs.chm EXT 中文手册 EXT官方网站+中文教程 ext中文API+ sample.chm 土豆EXT中文教程.exe ExtJS2.0实用简明教程(easyjf) 外加一个基于ext的ajax小例子...

    Extjs10个开发必备资料 最新 最全的

    Ext 2.02 - API文档中心(ajax网站提供).zip EXT 中文手册.pdf Ext2 核心 API 中文详解.pdf EXT2.0中文教程.pdf Ext2.2docs.chm ExtJS2.0教程.chm ExtJS2.0实用简明教程.pdf EXT官方网站+中文教程.doc ext中文API+ ...

Magicbox
Global site tag (gtag.js) - Google Analytics