`

Extjs通过Apache的FileItem进行文件的上传下载

阅读更多

Extjs通过Apache的FileItem进行文件的上传下载

 

查看FileItem类的方法说明

一.上传

1.Extjs:

在FormPanel中要增加一个属性:[ fileUpload : true ]

var addNewsForm = new Ext.form.FormPanel({
	id:"addNewsForm",
	frame:true,
	layout:"form", 
	labelAlign:"right",
	labelWidth:"150",
	buttonAlign:"center",
	fileUpload : true,
	items:[{
		id:"id",
		name:"id",
		xtype:"textfield",
		fieldLabel:"编号",
		hidden:true,
		hideLabel:true
	},{
		id:"title",
		name:"title",
		xtype:"textfield",
		fieldLabel:"新闻标题",
		allowBlank:false,
		minLength:5,
		maxLength:50,
		width:750
	},{
		id:"tag",
		name:"tag",
		xtype:"textarea",
		fieldLabel:"新闻标签",
		allowBlank:false,
		maxLength:330,
		height:70,
		width:750
	},{
        name:"content",
        xtype:"StarHtmleditor",
        fieldLabel:"新闻内容",
        fontFamilies: ["宋体","隶书","黑体","楷体","幼圆"],
        width:750,
        height:230
    },typeRadio,statusRadio,{
		id:"ishot",
		name:"ishot",
		xtype:"checkbox",
		fieldLabel:"是否热点"
	},{
		id:"uploadNews",
		name:"uploadNews",
		xtype:"textfield",
		inputType:"file",
		fieldLabel:"上传文件",
		buttonText: ''
	}],
	buttons:[{
		text:"确定",
		handler:addNews
	},{
		text:"取消",
		handler:function(){
			history.go(-1);
		}
	}]
});

   

注意:当增加了该属性后,form表单提交到后台,textfield文本框的值用request获取将为null,所以此时我们需要用到Apache的FileItem实现文本框的值的获取和上传文件的文件名

 

2.获取表单提交请求的Servlet:

String title = "";
String tag = "";
String content = "";
String typeStr = "0";
String ishotStr = "0";
String statusStr = "0";
String uploadFileName = "";
Long time = System.currentTimeMillis(); 
Calendar cal=Calendar.getInstance();
int year=cal.get(Calendar.YEAR);//得到年
int month=cal.get(Calendar.MONTH)+1;//得到月
String newsFileDir = Configuration.getConfig().getString("newsFileDir");//从Resource.properties中读取配置信息
if (newsFileDir.contains("/")) {
	newsFileDir = newsFileDir.replace("/", File.separator);
}
String uploadFileDir = newsFileDir + File.separator + year + File.separator +month;
List<FileItem> fileItems = UploadFileUtil.getServletFileUpload().parseRequest(request);//解析Request请求
for (int i = 0; i < fileItems.size(); i++) {
	FileItem item =  fileItems.get(i);
	if (!item.isFormField()) {//判断是否是表单文本域——即不是上传文件域!
		uploadFileName = item.getName();
		Map<String, String> map = UploadFileUtil.uploadFile(uploadFileDir, item);
		if (map.get("msg") != null) {
			response.setContentType("text/html;charset=UTF-8");
			out=response.getWriter();
			out.print("{failure:\""+map.get("msg")+"\"}");		
			out.close();
			return;
		}
	}
	else {
		String newsStr = new String(item.getString().getBytes("ISO8859_1"), "UTF-8");//解决中文乱码
		if ("title".equals(item.getFieldName())) {
			title = newsStr;//将FileItem对象中保存的数据流内容以一个字符串返回。
		}
		else if ("tag".equals(item.getFieldName())) {
			tag = newsStr;
		}
		else if ("content".equals(item.getFieldName())) {
			content = newsStr;
		}
		else if ("type".equals(item.getFieldName())) {
			typeStr = newsStr;
		}
		else if ("status".equals(item.getFieldName())) {
			statusStr = newsStr;
		}
		else if ("ishot".equals(item.getFieldName())) {
			ishotStr = newsStr;
		}
	}
}
int type = Integer.valueOf(typeStr);
int status = Integer.valueOf(statusStr);
int ishot = 0;
if("on".equals(ishotStr)){
	ishot = 1;
}
INewsDao newsDao = new NewsDaoImpl();
News news = new News();
news.setTitle(title);
news.setTag(tag);
news.setType(type);
news.setIshot(ishot);
news.setContent(clob);
news.setStatus(status);
news.setUploadDir(uploadFileDir);
news.setUploadFile(uploadFileName);
done = newsDao.saveNews(news);
String str =null;
if(done){
	str="{success:true}";
}else{
	str="{success:false}";
}
response.setContentType("text/html;charset=UTF-8");
out=response.getWriter();
out.print(str);		
out.close();
return;

注意:

(1).需要通过 item.isFormField()判断普通表单域还是上传域

(2).一定要对获取到的数据流(即普通表单域中的内容)进行解码否则会出现中文乱码

 (FileItem类的getString方法用于将FileItem对象中保存的数据流内容以一个字符串返回

   ——保存的数据流内容普通文本域(非上传域)的内容!

 

3.上传文件工具类:

package com.datanew.czfc.util;

import java.io.File;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

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

/**
 * 创建人: zy
 * 创建时间: 2014年12月4日 下午2:46:38
 * 类描述:上传文件工具类
 */
public class UploadFileUtil {
	
	/**
	 * 获取ServletFileUpload
	 * @return
	 */
	public static ServletFileUpload getServletFileUpload(){
		FileItemFactory  factory = new DiskFileItemFactory();
		ServletFileUpload upload = new ServletFileUpload(factory);
		upload.setHeaderEncoding("UTF-8");
		return upload;
	}
	
	
	/**
	 * 上传文件
	 * @param fileDir
	 * @param fileItem
	 * @return
	 */
	public static Map<String, String> uploadFile(String fileDir,FileItem fileItem) {
		String fileName = null;
		long maxSize = 5*1024*1024;
		Map<String, String> map = new HashMap<String, String>();
		try {
			//1.判断目录是否存在,不存在则创建目录
			String[] paths;
			if (fileDir.contains("/")) {
				paths = fileDir.split("/");
			}
			else {
				paths = fileDir.split("\\\\");//注意:此处“\\”是错误的,必须要“\\\\”才能分割字符串
			}
			String dir = paths[0];
			for (int i = 1; i < paths.length; i++) {
				dir = dir + File.separator + paths[i];
				File file=new File(dir.toString());
				if (!file.exists()) {
					file.mkdir();
				}
			}
			//2.保存文件
			fileName = fileItem.getName();
			if (fileName == "" || fileName == null) {
				map.put("msg", "请先上传文件");
				return map;
			}
			long size = fileItem.getSize();
			if (size > maxSize) {
				map.put("msg", "您上传的文件过大,请重新上传");
				return map;
			}
			//fileName = System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."));
			map.put("fileName", fileName);
			fileItem.write(new File(fileDir + File.separator +fileName));
		} catch (FileUploadException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return map;
	}
}

注意:

1.要对ServletFileUpload进行编码的设置;

2.采用fileItem.write的方式进行文件的写操作,即上传文件到指定的目录;


 

二.下载:

通过新闻标题查询实体类,在通过获取的实体类中的文件路径进行文件的下载

else if ("getFile".equals(action)) {
	String title = new String(request.getParameter("title").getBytes("ISO8859_1"), "UTF-8");
	INewsDao newsDao = new NewsDaoImpl();
	String filePath  = newsDao.getFile(title);
	String str =null;
	try {
		File file = new File(filePath);
		response.setContentType("text/plain");
		//response.setHeader("Location",fileName);
		response.setHeader("Content-Disposition", "attachment;filename=" + new String(file.getName().getBytes("GBK"), "iso-8859-1"));
		OutputStream os = response.getOutputStream();
		InputStream inputStream = new FileInputStream(file);
		byte[] buffer = new byte[1024];
		int i = -1;
		while ((i = inputStream.read(buffer)) != -1) {
			os.write(buffer, 0, i);
		}
		os.flush();
		os.close();
	} catch (FileNotFoundException e) {
		System.out.println("文件未找到");
	}
	return;
}

注意:

1.要对request获取的中文进行编码

2.要对responseContentTypeHeader进行设置;

 

 

实例图示:

 

实例中解析Request获得的FileItem数据:

[
  name=null,
  StoreLocation=C: \Users\ADMINI~1\AppData\Local\Temp\upload__42856ff_14a38191494__8000_00000000.tmp,
  size=0bytes,
  isFormField=true,
  FieldName=id,
  name=null,
  StoreLocation=C: \Users\ADMINI~1\AppData\Local\Temp\upload__42856ff_14a38191494__8000_00000001.tmp,
  size=24bytes,
  isFormField=true,
  FieldName=title,
  name=null,
  StoreLocation=C: \Users\ADMINI~1\AppData\Local\Temp\upload__42856ff_14a38191494__8000_00000002.tmp,
  size=18bytes,
  isFormField=true,
  FieldName=tag,
  name=null,
  StoreLocation=C: \Users\ADMINI~1\AppData\Local\Temp\upload__42856ff_14a38191494__8000_00000003.tmp,
  size=36bytes,
  isFormField=true,
  FieldName=content,
  name=null,
  StoreLocation=C: \Users\ADMINI~1\AppData\Local\Temp\upload__42856ff_14a38191494__8000_00000004.tmp,
  size=1bytes,
  isFormField=true,
  FieldName=type,
  name=null,
  StoreLocation=C: \Users\ADMINI~1\AppData\Local\Temp\upload__42856ff_14a38191494__8000_00000005.tmp,
  size=1bytes,
  isFormField=true,
  FieldName=status,
  name=null,
  StoreLocation=C: \Users\ADMINI~1\AppData\Local\Temp\upload__42856ff_14a38191494__8000_00000006.tmp,
  size=2bytes,
  isFormField=true,
  FieldName=ishot,
  name=test.txt,
  StoreLocation=C: \Users\ADMINI~1\AppData\Local\Temp\upload__42856ff_14a38191494__8000_00000007.tmp,
  size=418bytes,
  isFormField=false,
  FieldName=uploadNews,
  name=null,
]

数据分析:

1.蓝框的是普通表单域的内容

2.红框的是上传域的内容

3.FieldName是表单中的某个item项的name

 
 

  • 大小: 8.6 KB
  • 大小: 10.5 KB
  • 大小: 13 KB
  • 大小: 9.3 KB
  • 大小: 10.8 KB
  • 大小: 12 KB
  • 大小: 11.4 KB
  • 大小: 15.2 KB
  • 大小: 48.5 KB
  • 大小: 9.7 KB
  • 大小: 17.4 KB
  • 大小: 20.2 KB
分享到:
评论

相关推荐

    EXTJS 多文件上传

    通过阅读和理解这个文件,开发者可以更深入地了解EXTJS如何处理多文件上传的细节,并根据自己的需求进行修改和扩展。 总的来说,EXTJS的`MultiFileUploadField` 是一个强大且灵活的多文件上传解决方案,它结合了...

    extjs+swfupload实现多文件上传下载删除带进度条

    本篇将详细讲解如何利用`ExtJS`和`SwfUpload`来创建一个支持多文件上传、下载和删除,并带有进度条显示的系统。 `ExtJS`是一个基于JavaScript的UI框架,它提供了丰富的组件库和强大的数据绑定机制,可以构建出复杂...

    ExtJS带进度条的多文件上传和图片预览

    ExtJS是一款功能强大的JavaScript库,专门用于构建富客户端应用程序。...以上是关于"ExtJS带进度条的多文件上传和图片预览"项目的主要知识点,通过理解并掌握这些技术,开发者可以构建出更健壮、更易用的Web应用程序。

    ExtJS4+strtus2文件上传实例源码

    这个类通常会包含一个类型为`java.io.File`或`org.apache.struts2.dispatcher.multipart.FileItem`的属性,用于接收上传的文件。 2. **struts.xml配置:** 在Struts2配置文件中,你需要定义一个Action映射,将表单...

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

    ExtJS4提供了一种解决方案,允许用户通过一个交互式的界面来上传多个文件,并可以分别处理每个文件的上传状态。 **三、上传组件:uploadPanel** 在ExtJS4中,可以使用自定义组件或者第三方插件来实现文件上传功能。...

    struts2+extjs3 单/多文件上传

    本文将深入探讨如何使用Struts2和ExtJS3实现单文件和多文件的上传功能。 首先,我们要理解文件上传的基本流程。在Web应用中,用户通过浏览器选择本地文件,然后这些文件的数据被封装到HTTP请求中发送到服务器。...

    extjs+dwr3.0实现文件上传

    在实际的Web应用中,文件上传是一个常见的需求,例如在社交媒体平台上传图片、在文档分享网站上传文件等。EXTJS提供了丰富的组件和API,可以构建出美观的文件选择器,而DWR则负责将选择的文件从客户端传输到服务器端...

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

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

    extjs 4.2 多文件上传

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

    EXTJS3.0多文件上传组件

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

    Extjs+java+swf多文件上传进度条显示项目

    标题中的“Extjs+java+swf多文件上传进度条显示项目”是一个综合性的Web开发实践,涉及到前端的用户界面、后端的数据处理以及文件上传过程中进度反馈的实现。这个项目利用了Extjs库来构建用户界面,Java作为服务器端...

    ExtJS 多文件上传 UploadDialog For ExtJS3.x

    在Web开发领域,特别是使用ExtJS框架进行界面设计时,文件上传功能是必不可少的一部分。然而,随着ExtJS版本的更新,原有的多文件上传组件可能不再兼容新版本。本篇文章将详细介绍如何针对ExtJS 3.x版本定制和优化一...

    ExtJS验证上传文件类型

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

    EXTJS批量上传下载

    EXTJS批量上传下载是EXTJS框架中实现的一种高级交互功能,允许用户一次性处理多个文件的上传和下载操作,极大地提高了工作效率。EXTJS是一款强大的JavaScript组件库,它提供了丰富的UI控件和灵活的数据绑定机制,...

    .net+Extjs 实现文件的上传下载

    在.NET和ExtJS框架下实现文件的上传与下载是...通过这些组件和文件,开发者可以学习如何在实际项目中集成.NET和ExtJS,实现高效、友好的文件上传下载功能。理解并熟练掌握这一技术,对于构建现代Web应用来说至关重要。

    extjs多文件上传

    在IT行业中,多文件上传是Web应用中常见的一项功能,特别是在需要用户批量上传图片、文档等数据时。本文将深入探讨“extjs多文件上传”这一主题,结合标签“源码”和“工具”,我们将主要关注如何使用ExtJS库实现这...

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

    EXTJS的文件上传组件提供了方便的方式来处理这些任务,允许用户一次性选择多个文件进行上传,极大地提高了工作效率。 批量上传文件的核心在于利用HTML5的File API,这个API允许前端程序对用户的本地文件进行操作,...

    extjs 多文件上传

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

    swf+Extjs+java多文件上传项目

    【标题】"swf+Extjs+java多文件上传项目"是一个基于SwfUpload插件、ExtJS前端框架和Java后端技术实现的文件批量上传解决方案。该项目旨在提供一种高效、用户友好的文件上传体验,适用于需要处理大量文件上传需求的...

    Extjs2.x 实现文件上传组件

    在ExtJS 2.x版本中,实现文件上传组件是一项常见的需求,它允许用户在Web应用中选择并上传本地文件到服务器。在本文中,我们将深入探讨如何在ExtJS 2.x中实现这一功能。 首先,我们需要理解ExtJS中的FormPanel组件...

Global site tag (gtag.js) - Google Analytics