`

extjs文件上传

 
阅读更多

EXT学习教程:http://www.cnblogs.com/iamlilinfeng/category/385121.html

 

Ext文件上传:


例子用到的jar:



 
 1.upload.js

/*
 case of upload
 */
Ext.onReady(function(){
	//初始化标签中的Ext:Qtip属性。
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	/*
	var imageBox = new Ext.BoxComponent({
		autoEl:{
			//style: 'width:150px;height:150px;margin:0px auto;border:1px solid #ccc; text-align:center;padding-top:20px;margin-bottom:10px',
			style:'width:150px;height:150px;border:1px solid #ccc;text-align:center',
			tag:'div',
			id:'showImage'
		},
		width:333,
		height:277
	});*/
	
	var upload_form = new Ext.form.FormPanel({
		title: '',
		baseCls:'x-plain',
		labelWidth:70,
		labelHeight:150,
		fileUpload:true,
		defaultType : 'textfield', 
		items:[{
			xtype:'textfield',
			fieldLabel:'select file',
			name:'userfile',
			id:'userfile',
			inputType:'file',
			anchor:'95%'
		}]
	});
	
	var win_upload = new Ext.Window({
		title:'Upload :',
		width:444,
		height:140,
		bodyStyle : 'padding:10px 10px 10px 10px;',
		resizable:true,
		modal:true,
		closable:true,
		maximizable:true,
		minimizable:true,
		buttonAlign:'right',
		items:[upload_form],
		buttons:[{
			text:'reset',
			handler:function(){
				upload_form.getForm().reset();
			}
		},{
			text:'upload',
			handler:function(){
				if(upload_form.getForm().isValid()){
					if(Ext.getCmp('userfile').getValue() == ''){
						Ext.Msg.alert('Warm :','please choose file!');
						return;
					}
					/*
					Ext.Msg.show({
						title:'waiting:',
						waitMsg:'uploading...',
						progressText:'',
						width:300,
						progress : true,  
           				closable : false,  
           				animEl : 'loding' 
					});*/
					upload_form.getForm().submit({
						method:'POST',
						url:'uploadServlet',
						waitMsg:'uploading...',
						success:function(upload_form,action){
							//var path = Ext.getCmp('userfile').getValue();
							//document.getElementById('showImage').innerHTML = '<img src="'+path+'" />';
							Ext.Msg.alert('success:','upload success!');
							//win_upload.hide();
						},
						failure:function(upload_form,action){
							Ext.Msg.alert('failure:','upload failure!');
						}
					});
				}
			}
		}]
	});
	win_upload.show();
});

 2.uploadServlet.java

package servlet;

import java.io.File;
import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.json.JSONObject;

/**
 * Servlet implementation class uploadServlet
 */
public class uploadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public uploadServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		try {
			FileItemFactory factory = new DiskFileItemFactory();
			ServletFileUpload fileUpload = new ServletFileUpload(factory);
			fileUpload.setHeaderEncoding("UTF-8");// 解决中文名乱码
			List<FileItem> fileItems = fileUpload.parseRequest(request);
			for(FileItem item:fileItems){//忽略其他表单信息
				if (!item.isFormField()) {
					String name = "";
					String BrowserType = request.getHeader("User-Agent").toLowerCase().toString();
					//浏览器判断
					if (BrowserType.indexOf("firefox")>0 ||BrowserType.indexOf("chrome")>0) {
						name = item.getName();
					}else{
						name = item.getName();
						String [] names =  name.split("\\\\");//  (IE浏览器绝对路径,split获取文件名及后缀) regex为\\\\,因为在java中\\表示一个\,而regex中\\也表示\,所以当\\\\解析成regex的时候为\\。 
						name = names[names.length-1];
					}
					File uploadFile = new File("E:\\",name);
					item.write(uploadFile);
				}
			}
			//
			JSONObject obj = new JSONObject();
			obj.put("success","true"); 
			response.getWriter().print(obj.toString());
			
			
		} catch (Exception e) {
			e.printStackTrace();
			// TODO: handle exception
		}
		
	}

}

 

  • 大小: 43 KB
  • 大小: 32 KB
分享到:
评论

相关推荐

    ExtJS验证上传文件类型

    ExtJS 中实现文件上传功能是非常方便的,但对于新手来说,控制文件上传类型是一个难题。例如,我们只想让用户上传特定的文件类型,例如txt文件,那么如何实现当用户上传非txt文件时,给出错误提示呢?这篇文章将详细...

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

    EXTJS是一种基于JavaScript的前端框架,它提供了丰富的用户界面组件,包括用于文件上传的组件。在EXTJS中,实现批量上传文件是一项常见的需求,尤其在处理大量数据或媒体文件时。EXTJS的文件上传组件提供了方便的...

    ExtJS文件上传示例

    在这个"ExtJS文件上传示例"中,我们将探讨如何利用ExtJS实现文件上传功能。 在Web应用中,文件上传是常见的需求,例如用户可能需要上传图片、文档或其他类型的文件。ExtJS 提供了内置的组件和API来处理这种场景。...

    EXTjs 文件上传(可用)

    本文将深入探讨如何使用EXTjs进行文件上传,并结合Strut2实现这一功能。 首先,EXTjs 提供了`Ext.form.FileField`组件,用于在表单中创建文件选择字段。这个组件允许用户选择本地文件,然后通过AJAX方式提交到...

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

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

    Extjs4文件上传,后台struts2

    在本文中,我们将深入探讨如何使用ExtJS 4与Struts2框架实现文件上传功能。ExtJS是一个强大的JavaScript库,提供了丰富的用户界面组件,而Struts2是Java Web开发中的一个MVC框架,用于处理后端业务逻辑。下面,我们...

    struts2.0+Extjs文件上传例子

    功能强大的Struts2.0+Extjs实现的文件上传,包含文件上传进度,文件的下载,压缩,解压多文件删除等

    extjs 多文件上传

    在ExtJS中实现多文件上传功能,能够极大地提升用户体验,特别是在处理大量数据或文件时。本篇文章将详细探讨如何使用ExtJS实现多文件上传,并涵盖相关的关键知识点。 一、ExtJS 文件上传组件 在ExtJS中,我们可以...

    EXTJS 多文件上传

    6. **事件监听**:EXTJS 提供了一系列事件,如`fileselect`(文件选择后触发)、`beforesend`(文件发送前触发)和`uploadcomplete`(所有文件上传完成后触发),允许开发者在这些关键时刻介入处理逻辑。 7. **与...

    ExtJs文件上传组件(UploadDialog)

    在ExtJS中,UploadDialog是一个专为文件上传设计的组件,它提供了用户友好的界面,允许用户选择并上传多个文件到服务器。这篇博客文章(虽然链接无法直接访问,但我们可以根据已知信息推测内容)可能详细介绍了如何...

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

    1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化选择文件列表源 initStore(files) //base64路径转...

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

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

    ExtJS 多文件上传 UploadDialog For ExtJS3.x

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

    extjs 4.2 多文件上传

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

    struts2+extjs3 单/多文件上传

    总结来说,Struts2+ExtJS3组合可以有效地实现文件上传功能,无论是在后台处理还是在前端交互方面都有很好的支持。提供的资源包含了所有必要的JAR包,使得开发者可以快速集成并理解代码,减少了额外的下载和配置工作...

    extjs多文件上传

    本文将深入探讨“extjs多文件上传”这一主题,结合标签“源码”和“工具”,我们将主要关注如何使用ExtJS库实现这一功能,并可能涉及第三方上传工具Plupload。 首先,ExtJS是一个基于JavaScript的UI框架,它提供了...

    extjs上传全代码

    通过解压并导入到Eclipse,开发者可以查看EXTJS文件上传的实现细节,包括事件处理、Ajax请求的配置、服务器通信的逻辑等。同时,这也提供了一个学习和研究EXTJS文件上传功能的实例,有助于加深对EXTJS组件和API的...

    extjs java 上传文件进度条

    在文件上传过程中,我们可以利用ExtJS的`Progress Bar`组件来模拟进度条效果,展示文件上传的实时进度。 2. **Ajax异步上传**:ExtJS支持使用Ajax进行文件的异步上传,这样可以在不刷新页面的情况下完成文件传输,...

    EXTJS3.0多文件上传组件

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

    Extjs多文件上传

    在“Extjs多文件上传”这个主题中,我们将深入探讨如何使用ExtJS实现一个支持自由添加和减少上传文件个数的多文件上传功能。 首先,ExtJS的文件上传功能通常依赖于其组件系统,特别是`Ext.form.FileField`(也称为`...

Global site tag (gtag.js) - Google Analytics