Extjs通过Apache的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.要对response的ContentType和Header进行设置；
实例图示：
实例中解析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
相关推荐
通过阅读和理解这个文件，开发者可以更深入地了解EXTJS如何处理多文件上传的细节，并根据自己的需求进行修改和扩展。 总的来说，EXTJS的`MultiFileUploadField` 是一个强大且灵活的多文件上传解决方案，它结合了...
本篇将详细讲解如何利用`ExtJS`和`SwfUpload`来创建一个支持多文件上传、下载和删除，并带有进度条显示的系统。 `ExtJS`是一个基于JavaScript的UI框架，它提供了丰富的组件库和强大的数据绑定机制，可以构建出复杂...
ExtJS是一款功能强大的JavaScript库，专门用于构建富客户端应用程序。...以上是关于"ExtJS带进度条的多文件上传和图片预览"项目的主要知识点，通过理解并掌握这些技术，开发者可以构建出更健壮、更易用的Web应用程序。
这个类通常会包含一个类型为`java.io.File`或`org.apache.struts2.dispatcher.multipart.FileItem`的属性，用于接收上传的文件。 2. **struts.xml配置：** 在Struts2配置文件中，你需要定义一个Action映射，将表单...
ExtJS4提供了一种解决方案，允许用户通过一个交互式的界面来上传多个文件，并可以分别处理每个文件的上传状态。 **三、上传组件：uploadPanel** 在ExtJS4中，可以使用自定义组件或者第三方插件来实现文件上传功能。...
本文将深入探讨如何使用Struts2和ExtJS3实现单文件和多文件的上传功能。 首先，我们要理解文件上传的基本流程。在Web应用中，用户通过浏览器选择本地文件，然后这些文件的数据被封装到HTTP请求中发送到服务器。...
在实际的Web应用中，文件上传是一个常见的需求，例如在社交媒体平台上传图片、在文档分享网站上传文件等。EXTJS提供了丰富的组件和API，可以构建出美观的文件选择器，而DWR则负责将选择的文件从客户端传输到服务器端...
用Ext编写的多文件上传组件，已封装。 支持多文件上传，文件下载，文件删除，
ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...
综上所述，EXTJS3.0多文件上传组件结合了EXTJS的组件化开发优势和SWFUpload的多文件上传功能，为开发者提供了一个高效且易于定制的文件上传解决方案。通过深入理解和掌握相关知识点，可以开发出满足不同需求的多文件...
标题中的“Extjs+java+swf多文件上传进度条显示项目”是一个综合性的Web开发实践，涉及到前端的用户界面、后端的数据处理以及文件上传过程中进度反馈的实现。这个项目利用了Extjs库来构建用户界面，Java作为服务器端...
在Web开发领域，特别是使用ExtJS框架进行界面设计时，文件上传功能是必不可少的一部分。然而，随着ExtJS版本的更新，原有的多文件上传组件可能不再兼容新版本。本篇文章将详细介绍如何针对ExtJS 3.x版本定制和优化一...
ExtJS 验证上传文件类型 ExtJS 中实现文件上传功能是非常方便的，但对于新手来说，控制文件上传类型是一个难题。例如，我们只想让用户上传特定的文件类型，例如txt文件，那么如何实现当用户上传非txt文件时，给出...
EXTJS批量上传下载是EXTJS框架中实现的一种高级交互功能，允许用户一次性处理多个文件的上传和下载操作，极大地提高了工作效率。EXTJS是一款强大的JavaScript组件库，它提供了丰富的UI控件和灵活的数据绑定机制，...
在.NET和ExtJS框架下实现文件的上传与下载是...通过这些组件和文件，开发者可以学习如何在实际项目中集成.NET和ExtJS，实现高效、友好的文件上传下载功能。理解并熟练掌握这一技术，对于构建现代Web应用来说至关重要。
在IT行业中，多文件上传是Web应用中常见的一项功能，特别是在需要用户批量上传图片、文档等数据时。本文将深入探讨“extjs多文件上传”这一主题，结合标签“源码”和“工具”，我们将主要关注如何使用ExtJS库实现这...
EXTJS的文件上传组件提供了方便的方式来处理这些任务，允许用户一次性选择多个文件进行上传，极大地提高了工作效率。 批量上传文件的核心在于利用HTML5的File API，这个API允许前端程序对用户的本地文件进行操作，...
为了在不刷新页面的情况下进行文件上传，我们可以使用ExtJS的`Ext.Ajax`或原生的`XMLHttpRequest`对象。在创建请求时，设置`method`为`POST`，`headers`中的`Content-Type`为`false`，以使用默认的`multipart/form-...
【标题】"swf+Extjs+java多文件上传项目"是一个基于SwfUpload插件、ExtJS前端框架和Java后端技术实现的文件批量上传解决方案。该项目旨在提供一种高效、用户友好的文件上传体验，适用于需要处理大量文件上传需求的...
在ExtJS 2.x版本中，实现文件上传组件是一项常见的需求，它允许用户在Web应用中选择并上传本地文件到服务器。在本文中，我们将深入探讨如何在ExtJS 2.x中实现这一功能。 首先，我们需要理解ExtJS中的FormPanel组件...