話說long long ago，在本人開發項目時，需要導入一個文件夾（目錄）下的文件，通過解析其中的數據并入庫。
選擇一個文件目錄，好像沒有這個控件。開始想到了不選目錄，選文件。但是要選多個文件哦，而且數目不固定。
用file文件瀏覽不好，想到了用swfUpload可以選擇多個文件。可以做到，但是還是選擇文件不是選擇目錄。
不過我想要的，想呀想的……
誒~可以用ExtJS，自己擴展一個還是可以的。于是就有了今天這篇文章和這個文件瀏覽器。
extFileBrowser.html
~~~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ext 文件瀏覽選擇器</title>
<meta http-equiv="author" content="hoojo">
<meta http-equiv="email" content="hoojo_@126.com">
<meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo">
<meta http-equiv="ext-lib" content="v2.2.1">
<meta http-equiv="version" content="v1.0">
<meta http-equiv="content-type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.2/ext-all.js"></script>
<script type="text/javascript" src="Ext.hoo.component.FileBrowserComponent.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "ext-2.2/resources/images/default/s.gif";
var fileBrowser = new Ext.hoo.component.FileBrowserWindow();
//var fileBrowser = new Ext.hoo.component.FileBrowserPanel();
fileBrowser.show();
fileBrowser.tree.getSelectionModel().on("beforeselect", function (sm, node) {
//只能選擇文件夾，如果要選擇文件修改這里即可
var flag = ((!node || (!!node && !!node.leaf)) || !(node.attributes.path.indexOf(":") != -1)) ? true : false;
fileBrowser.buttons[0].setDisabled(flag);
fileBrowser.buttons[1].setDisabled(flag);
}, fileBrowser.tree);
});
</script>
</head>
<body>
</body>
</html>
~~~
Ext.hoo.component.FileBrowserComponent.js
~~~
/**
* Ext.hoo.component.FileBrowserWindow 系統文件瀏覽選擇組件，可以選定電腦上的文件或文件夾
* @author: hoojo
* @createDate 2010-10-17
* @email: hoojo_@126.com
* @blog: http://blog.csdn.net/IBM_hoojo
* @ext_lib: v2.2
* @version 1.0
*/
Ext.ns("Ext.hoo.component");
Ext.hoo.component.FileBrowserWindow = Ext.extend(Ext.Window, {
constructor: function (config) {
config = config || {};
Ext.apply(this, config);
this.tree = new Ext.hoo.tree.FileSystemTree();
Ext.hoo.component.FileBrowserWindow.superclass.constructor.call(this, {
renderTo: Ext.getBody(),
width: 300,
height: 300,
frame: true,
layout: "fit",
border: false,
title: "請選擇",
items: this.tree,
buttons: [{
text: "新建",
disabled: true,
handler: this.onNewHandler,
scope: this
}, {
text: "確定",
disabled: true,
handler: this.onOkHandler,
scope: this
}, {
text: "取消",
handler: function () {
this.hide(Ext.getBody());
},
scope: this
}]
});
},
onNewHandler: function () {
this.setPath();
this.setFile();
Ext.Msg.prompt("新建文件", "請輸入文件夾名稱", this.onCreateDir, this);
},
onOkHandler: function () {
this.setPath();
this.setFile();
Ext.Msg.alert("路徑", this.getPath());
},
onCreateDir: function (btn, text) {
if (btn == "ok") {
var path = this.getPath();
var node = this.getFile();
var dirName = text;
if (!!path && !!dirName) {
//本地添加模式
/*var newNode = new Ext.tree.AsyncTreeNode({
text: dirName,
path: node.attributes.path + "/" + dirName
});
node.expand(true, true);
node.appendChild(newNode);*/
//遠程加載模式
Ext.Ajax.request({
url: Ext.hoo.tree.FileSystemTree.TREE_CREATE_DIR_URL,
params: {path: encodeURIComponent(path), dirName: encodeURIComponent(dirName)},//處理中文文件名，亂碼問題
success: function (response, options) {
var returnNnode = Ext.decode(response.responseText);
node.appendChild(returnNnode);
node.expand(true);
},
failure: function (response) {
Ext.Msg.alert("程序異常", response.responseText);
}
});
}
}
},
setPath: function () {
this.path = this.tree.getSelectedNode().attributes.path || "";
},
setFile: function () {
this.nodeFile = this.tree.getSelectedNode() || {};
},
getPath: function () {
return this.path;
},
getFile: function () {
return this.nodeFile;
}
});
/**
* Ext.hoo.component.FileBrowserPanel 系統文件瀏覽選擇組件，可以選定電腦上的文件或文件夾
* 不同于上面的是，這里是一個panel。有時候彈出window，并不能達到預想的效果。特別是window彈出在
* iframe中的Object對象上面，如：在播放器上面彈出此組件，拖動windwo的效果不理想。
* 這時就需要用模態，模態嵌入FileBrowserPanel組件即可
* @author: hoojo
* @createDate 2010-10-17
* @email: hoojo_@126.com
* @blog: http://blog.csdn.net/IBM_hoojo
* @ext_lib: v2.2
* @version 1.0
*/
Ext.hoo.component.FileBrowserPanel = Ext.extend(Ext.Panel, {
constructor: function (config) {
config = config || {};
Ext.apply(this, config);
this.tree = new Ext.hoo.tree.FileSystemTree();
Ext.hoo.component.FileBrowserPanel.superclass.constructor.call(this, {
renderTo: Ext.getBody(),
border: false,
width: 300,
height: 400,
layout: "fit",
title: "請選擇",
items: this.tree,
buttons: [{
text: "新建",
disabled: true,
handler: this.onNewHandler,
scope: this
}, {
text: "確定",
disabled: true,
handler: function () {
this.path = this.tree.getSelectedNode().attributes.path || "";
this.nodeFile = this.tree.getSelectedNode() || {};
//window.returnValue = this.path;
//window.close();
Ext.Msg.alert("路徑", this.path);
},
scope: this
}, {
text: "取消",
handler: function () {
this.hide(Ext.getBody());
//window.close();
},
scope: this
}]
});
},
onNewHandler: function () {
this.setPath();
this.setFile();
Ext.Msg.prompt("新建文件", "請輸入文件夾名稱", this.onCreateDir, this);
},
onCreateDir: function (btn, text) {
if (btn == "ok") {
var path = this.getPath();
var node = this.getFile();
var dirName = text;
if (!!path && !!dirName) {
//本地添加模式
/*var newNode = new Ext.tree.AsyncTreeNode({
text: dirName,
path: node.attributes.path + "/" + dirName
});
node.expand(true, true);
node.appendChild(newNode);*/
//遠程加載模式
Ext.Ajax.request({
url: Ext.hoo.tree.FileSystemTree.TREE_CREATE_DIR_URL,
params: {path: encodeURIComponent(path), dirName: encodeURIComponent(dirName)},//處理中文文件名，亂碼問題
success: function (response, options) {
var returnNnode = Ext.decode(response.responseText);
node.appendChild(returnNnode);
node.expand(true, true);
},
failure: function (response) {
Ext.Msg.alert("程序異常", response.responseText);
}
});
}
}
},
setPath: function () {
this.path = this.tree.getSelectedNode().attributes.path || "";
},
setFile: function () {
this.nodeFile = this.tree.getSelectedNode() || {};
},
getPath: function () {
return this.path;
},
getFile: function () {
return this.nodeFile;
}
});
/**
* Ext.hoo.tree.FileSystemTree 系統文件樹，顯示所有的文件
* @author: hoojo
* @createDate 2010-10-17
* @email: hoojo_@126.com
* @blog: http://blog.csdn.net/IBM_hoojo
* @ext_lib: v2.2
* @version 1.0
*/
Ext.ns("Ext.hoo.tree");
Ext.hoo.tree.FileSystemTree = Ext.extend(Ext.tree.TreePanel, {
constructor: function () {
Ext.hoo.tree.FileSystemTree.superclass.constructor.call(this, {
//rootVisible: false,
autoScroll: true,
root: new Ext.tree.AsyncTreeNode({
text: "My System Files",
id: "0",
path: "root",
children:[]
}),
listeners: {
expandnode: {
fn: this.onExpandNode,
scope: this
}
}
});
},
onExpandNode: function (node) {
//只對未加載過的添加子結點，加載后不在重復加載；避免增加請求，浪費資源
if (!node.attributes.isLoad) {
Ext.Ajax.request({
url: Ext.hoo.tree.FileSystemTree.TREE_DATA_URL,
params: {path: encodeURIComponent(node.attributes.path)},//處理中文文件名，亂碼問題
success: function (response, options) {
node.attributes.isLoad = true;//設置加載標示
var nodes = Ext.decode(response.responseText);
node.appendChild(nodes);
},
failure: function (response) {
Ext.Msg.alert("程序異常", response.responseText);
}
});
}
},
getSelectedNode: function () {
return this.getSelectionModel().getSelectedNode();
}
});
Ext.hoo.tree.FileSystemTree.TREE_CREATE_DIR_URL = "http://localhost:8080/Test/FileBrowser?method=mkDir";
Ext.hoo.tree.FileSystemTree.TREE_DATA_URL = "http://localhost:8080/Test/FileBrowser?method=getData";
~~~
服務器端java code：
FileBrowser Servlet：
~~~
package com.hoo.servlet;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.swing.filechooser.FileSystemView;
import net.sf.json.JSONArray;
import com.hoo.entity.FileInfo;
import com.hoo.util.FileUtils;
/**
* <b>function:</b> 查詢本地硬盤文件數據、創建目錄
* @project Test
* @package com.hoo.servlet
* @fileName FileBrowser.java
* @author hoojo
*/
public class FileBrowser extends HttpServlet {
private static final long serialVersionUID = 1599390137455995515L;
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String path = request.getParameter("path");
path = path == null ? "" : URLDecoder.decode(path, "UTF-8");
String method = request.getParameter("method");
FileInfo info = new FileInfo();
if ("getData".equals(method)) {
if ("root".equals(path)) {
FileSystemView fsv = FileSystemView.getFileSystemView();
File[] roots = fsv.getRoots(); //File.listRoots();
//桌面
for (File f : roots) {
info.getChildren().add(FileUtils.getFileInfo(f));
}
for (File f : roots[0].listFiles()) {
if (f.getName().contains("My Documents")) {
info.getChildren().add(FileUtils.getFileInfo(f));
}
}
FileInfo fileInfo = new FileInfo();
fileInfo.setName("我的電腦");
fileInfo.setPath("My Computer");
for (File fi : roots[0].listFiles()[0].listFiles()) {
fileInfo.getChildren().add(FileUtils.getFileInfo(fi));
}
info.getChildren().add(fileInfo);
fileInfo = new FileInfo();
fileInfo.setName("網上鄰居");
fileInfo.setPath("Network Place");
for (File fi : roots[0].listFiles()[1].listFiles()) {
fileInfo.getChildren().add(FileUtils.getFileInfo(fi));
}
info.getChildren().add(fileInfo);
out.print(JSONArray.fromObject(info.getChildren()).toString());
} else if (path != null && !"".equals(path)) {
FileUtils.getFileInfo(info, new File(path), new String[] {"*"});
out.print(JSONArray.fromObject(info.getChildren()).toString());
}
}
if ("mkDir".equals(method)) {
String dirName = request.getParameter("dirName");
dirName = dirName == null ? "" : URLDecoder.decode(dirName, "UTF-8");
boolean success = false;
try {
success = FileUtils.mkDir(path, dirName);
FileInfo node = FileUtils.getFileInfo(new File(FileUtils.getDoPath(path) + dirName));
out.print(JSONArray.fromObject(node));
} catch (Exception e) {
e.printStackTrace();
success = false;
}
System.out.println(success);
}
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
~~~
這個類用到了json-lib.jar工具包，此包可以幫我們把java對象，包括list、map、array序列化成json的字符串。
至少用到以下依賴包:
FileInfo 封裝文件信息的java Bean：
~~~
package com.hoo.entity;
import java.util.ArrayList;
import java.util.List;
/**
* <b>function:</b>文件信息
* @author hoojo
* @createDate Oct 10, 2010 9:53:51 PM
* @file FileInfo.java
* @package com.hoo.entity
* @project MultiUpload
* @blog http://blog.csdn.net/IBM_hoojo
* @email hoojo_@126.com
* @version 1.0
*/
public class FileInfo {
//文件id
private String id;
//文件名稱
private String name;
private String text;
//文件路徑
private String path;
//是否有目錄，有無子節點
private boolean leaf;
//修改日期
private String editDate;
//后綴
private String suffix;
//長度
private long length;
// 子目錄中所有文件
private List<FileInfo> children = new ArrayList<FileInfo>();
//setter、getter
public String toString() {
return "name:" + name + ", size:" + children.size();
}
}
~~~
FileUtils 文件操作工具類
~~~
package com.hoo.util;
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
import com.hoo.entity.FileInfo;
/**
* <b>function:</b> 磁盤文件操作工具類
* @project Test
* @package com.hoo.util
* @fileName FileUtils.java
* @createDate 2010-10-4 下午03:32:42
* @author hoojo
*/
@SuppressWarnings("unused")
public abstract class FileUtils {
/**
* <b>function:</b>傳遞一個File，返回該文件的FileInfo實體類
* @author hoojo
* @createDate Oct 10, 2010 10:10:19 PM
* @param file File
* @return FileInfo
*/
public static FileInfo getFileInfo(File file) {
FileInfo info = new FileInfo();
if (file != null) {
info.setId(UUID.randomUUID().toString());
if (file.getName() == null || "".equals(file.getName()) || "::".equals(file.getName())) {
info.setName(file.getAbsolutePath());
} else {
info.setName(file.getName());
}
//info.setLeaf(file.isFile());
info.setLeaf(!file.isDirectory());
info.setLength(file.length());
info.setPath(getDoPath(file.getAbsolutePath()));
info.setSuffix(getType(file.getName()));
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date date = new Date();
date.setTime(file.lastModified());
info.setEditDate(sdf.format(date));
}
return info;
}
public static void setFileInfo(File file, FileInfo info) {
if (file != null && info != null) {
info.setId(UUID.randomUUID().toString());
if (file.getName() == null || "".equals(file.getName()) || "::".equals(file.getName())) {
info.setName(file.getAbsolutePath());
} else {
info.setName(file.getName());
}
//info.setLeaf(file.isFile());
info.setLeaf(!file.isDirectory());
info.setLength(file.length());
info.setPath(getDoPath(file.getAbsolutePath()));
info.setSuffix(getType(file.getName()));
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date date = new Date();
date.setTime(file.lastModified());
info.setEditDate(sdf.format(date));
}
}
/**
* <b>function:</b>處理后的系統文件路徑
* @author hoojo
* @createDate Oct 10, 2010 12:49:31 AM
* @param path 文件路徑
* @return 返回處理后的路徑
*/
public static String getDoPath(String path) {
path = path.replace("//", "/");
String lastChar = path.substring(path.length() - 1);
if (!"/".equals(lastChar)) {
path += "/";
}
return path;
}
/**
* <b>function:</b>和文件后綴一樣，不同的是沒有“.”
* @author hoojo
* @createDate Oct 10, 2010 2:42:43 PM
* @param fileName 文件名稱
* @return
*/
public static String getType(String fileName) {
int index = fileName.lastIndexOf(".");
if (index != -1) {
String suffix = fileName.substring(index + 1);//后綴
return suffix;
} else {
return null;
}
}
/**
* <b>function:</b> 得到指定目錄下所有的文件集合
* @createDate 2010-10-20 下午02:20:06
* @author hoojo
* @param info 將數據設置在該變量中
* @param file 文件目錄
*/
public static void getAllFileInfo(FileInfo info, File file) {
if (file.isDirectory()) {
long size = 0;
File[] allFiles = file.listFiles();
for (File f : allFiles) {
size += f.length();
FileInfo fi = getFileInfo(f);
info.getChildren().add(fi);
getAllFileInfo(fi, f);
}
info.setLength(size);
}
}
/**
* <b>function:</b> 得到當前目錄所有文件
* @createDate 2010-10-20 下午02:21:06
* @author hoojo
* @param info 文件對象
* @param file 目錄
*/
public static void getFileInfo(FileInfo info, File file, String[] allowTypes) {
if (file.isDirectory()) {
long size = 0;
File[] allFiles = file.listFiles();
for (File f : allFiles) {
size += f.length();
FileInfo fi = getFileInfo(f);
if (f.isDirectory()) {
info.getChildren().add(fi);
} else {
if (validTypeByName(f.getName(), allowTypes, true)) {
info.getChildren().add(fi);
}
}
}
info.setLength(size);
}
}
/**
* <b>function:</b> 根據文件名和類型數組驗證文件類型是否合法，flag是否忽略大小寫
* @author hoojo
* @createDate Oct 10, 2010 11:54:54 AM
* @param fileName 文件名
* @param allowTypes 類型數組
* @param flag 是否獲得大小寫
* @return 是否驗證通過
*/
public static boolean validTypeByName(String fileName, String[] allowTypes, boolean flag) {
String suffix = getType(fileName);
boolean valid = false;
if (allowTypes.length > 0 && "*".equals(allowTypes[0])) {
valid = true;
} else {
for (String type : allowTypes) {
if (flag) {//不區分大小寫后綴
if (suffix != null && suffix.equalsIgnoreCase(type)) {
valid = true;
break;
}
} else {//嚴格區分大小寫
if (suffix != null && suffix.equals(type)) {
valid = true;
break;
}
}
}
}
return valid;
}
/**
* <b>function:</b> 在path目錄下創建目錄
* @createDate 2010-11-3 下午04:03:34
* @author hoojo
* @param path
* @param dirName
* @return
*/
public static boolean mkDir(String path, String dirName) {
boolean success = false;
File file = new File(getDoPath(path) + dirName);
if (!file.exists()) {
success = file.mkdirs();
}
return success;
}
}
~~~
點擊新建可以創建新目錄，確定可以獲取選擇的路徑。
- 前言
- ExtJS 中用js 操作cookie的方法
- eclipse MyEclipse中安裝 ext插件 spket提示
- eclipse MyEclipse中安裝 spket插件 js文件內容字體變小解決方案
- ExtJS中，在FireFox瀏覽器中字體很小，解決方法
- ExtJS中grid按照中文拼音首字母排序、改變行背景、列背景、靜態數據分頁不再困難
- ExtJS中grid按照使用Expand插件、分組顯示、中文拼音首字母排序、改變行背景、列背景、靜態數據分頁綜合案例
- ExtJS EditorGridPanel 示例之xml格式Store前后臺增刪改查
- ExtJS EditorGridPanel 示例之Array格式（自定義Array解析器）Store前后臺增刪改查
- ExtJS EditorGridPanel 示例之Array格式Store前后臺增刪改查（不支持分頁）
- ExtJS EditorGridPanel 示例之JSON格式Store前后臺增刪改查
- Ext 中，為Ext.form.HtmlEditor添加鍵盤事件
- ExtJS 文件瀏覽器，可以選擇文件和文件夾
- Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【一】
- Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【二】
- Struts2、Spring3、MyBatis3整合ExtJS，完成CheckNodeColumnTree
- ExtJS Form擴展組件[ColorFiled, DateTimeFiled, IconCombo, MultiComboBox, DynamicTreeCombox]
- Ext [DDTabPanel、FoodImageField、ImageChooser]擴展組件