`

[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的使用
评论
发表评论

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

相关推荐

    Extjs2.02 Gridpanel

    【EXTJS 2.02 GridPanel 知识详解】 EXTJS GridPanel 是EXTJS库中的核心组件之一，尤其在EXTJS 2.02版本中，它提供了强大的表格展示和交互功能，对于初学者来说极具学习价值。GridPanel不仅能够处理基本的表格操作...

    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...

    ExtJs2.02官方实例aspx(.net)版

    ExtJs2.02官方实例aspx(.net)版

    不懂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这个目前不敢肯定,但是官方的...

    ExtJS4多文件上传，带进度条及管理

    本文将详细解析"ExtJS4多文件上传，带进度条及管理"这一主题，涵盖其核心概念、实现方式以及相关技术。 **一、ExtJS4概述** ExtJS4是Sencha公司推出的一个前端框架，它提供了丰富的组件库和强大的数据绑定机制，...

    extjs 4.2 多文件上传

    用Ext编写的多文件上传组件，已封装。 支持多文件上传，文件下载，文件删除，

    extjs对ajax的支持文档

    - Ext.Ajax是ExtJS中的核心模块，用于处理所有与Ajax相关的操作。它提供了发送异步请求、处理响应和错误处理等功能。 - 使用`Ext.Ajax.request`方法发起Ajax请求，该方法接受一系列参数，如URL、方法（GET或POST）...

    ExtJS验证上传文件类型

    ExtJS 验证上传文件类型 ExtJS 中实现文件上传功能是非常方便的，但对于新手来说，控制文件上传类型是一个难题。例如，我们只想让用户上传特定的文件类型，例如txt文件，那么如何实现当用户上传非txt文件时，给出...

    EXTJS 多文件上传

    7. **与服务器端通信**：`MultiFileUploadField` 使用异步方式与服务器进行通信，通常基于Ajax或Fetch API，这样可以在不刷新页面的情况下完成文件上传。 8. **UI定制**：EXTJS 的组件化特性使得`...

    ExtJS原生多文件拖动上传组件

    ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...

    ExtJS 多文件上传 UploadDialog For ExtJS3.x

    ### ExtJS 多文件上传 UploadDialog For ExtJS3.x #### 概述 在Web开发领域，特别是使用ExtJS框架进行界面设计时，文件上传功能是必不可少的一部分。然而，随着ExtJS版本的更新，原有的多文件上传组件可能不再兼容...

    EXTJS3.0多文件上传组件

    综上所述，EXTJS3.0多文件上传组件结合了EXTJS的组件化开发优势和SWFUpload的多文件上传功能，为开发者提供了一个高效且易于定制的文件上传解决方案。通过深入理解和掌握相关知识点，可以开发出满足不同需求的多文件...

    extjs5.1多文件上传控件

    标题中的“ExtJS5.1多文件上传控件”指的是在Web应用中使用ExtJS框架的一个功能组件，它允许用户一次选择并上传多个文件。ExtJS是一个强大的JavaScript库，专门用于构建富客户端的桌面级Web应用程序。在版本5.1中，...

    extjs 多文件上传

    为了在不刷新页面的情况下进行文件上传，我们可以使用ExtJS的`Ext.Ajax`或原生的`XMLHttpRequest`对象。在创建请求时，设置`method`为`POST`，`headers`中的`Content-Type`为`false`，以使用默认的`multipart/form-...

    ExtJS实现多文件上传UploadDialog For ExtJS3.x

    在本文中，我们将深入探讨如何使用ExtJS 3.x实现多文件上传功能，结合Struts2框架进行数据处理。首先，我们需要确保环境配置正确。在描述中提到，我们需要将一系列Struts2相关的库文件复制到项目的`WebContent\lib`...

    ExtJS4 上传文件类型和大小的判断方法（实例）

    对应的描述看本人博文《ExtJS4 上传文件类型和大小的判断方法（实例） 》：http://blog.csdn.net/biboheart/article/details/10579175 在这里不具体描述了。看题也大概可以知道这些代码实现了什么应用。

    extjs java 上传文件进度条

    2. **Ajax异步上传**：ExtJS支持使用Ajax进行文件的异步上传，这样可以在不刷新页面的情况下完成文件传输，同时通过回调函数获取并更新进度条的状态。 3. **Java后端处理**：Java服务器端需要处理文件接收、存储...

    Java+Extjs实现单文件上传

    本话题主要关注如何使用Java后端和ExtJS前端框架来实现单文件上传的流程。下面将详细讲解这个过程涉及的关键知识点。 首先，我们来看Java文件上传。在Java中，处理文件上传主要依赖于Servlet API中的`Part`接口，这...

    批量上传文件 EXTJS文件上传 上传组件

    在按钮的点击事件处理器中，我们可以获取到选中的文件列表，并使用Ajax或者EXTJS的FormData对象来发送POST请求到服务器。FormData对象可以方便地封装文件数据并发送到后端。例如： ```javascript form.getForm()....

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