ExtJS前台
文件上传到服务器端,也就是项目下
还可以从服务器端下载文件
根据需求从别的页传一个parent参数,查找parent目录下的文件,若无parent参数,结果为空。
filefield下写了一个多文件上传,但IE貌似不是很好用
图片列 写了一个判断文件类型,是图片的话展示图片,并且双击会放大。
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<script type="text/javascript">
var parent = null;
if (location.href.split('?')[1] != undefined) {
var parameters = Ext.urlDecode(location.href.split('?')[1]);
(parameters.parent != undefined) ? parent = parameters.parent : 0;
}
Ext.onReady(function () {
Ext.QuickTips.init();
Ext.getBody().mask('加载中...');
var riderStore = Ext.create('Ext.data.Store', {
storeId: 'riderStore',
autoLoad: false,//true为自动加载
loading: false,//自动加载时必须为true
pageSize: 20,
fields: ['parent', 'child', 'type'],
proxy: {
url: '${ctx}/rider/selectRider.json',
type: 'ajax',
async: true,//false=同步.
actionMethods: {
read: 'POST'
},
extraParams: {},
reader: {
type: 'json',
root: 'result',
totalProperty: 'total'
}
}
});
var formPanel = Ext.create('Ext.form.Panel', {
id: 'formPanel',
layout: 'column',
frame: true,
autoScroll: true,
defaults: {
labelAlign: 'right',
labelWidth: 100,
inputWidth: 140,
margin: '4,0,0,0'
},
items: [{
xtype: 'hiddenfield',
name: 'parent',
value: parent
}, {
xtype: 'filefield',
id: 'multipartFiles',
name: 'multipartFiles',
fieldLabel: '附件',
buttonText: '请选择',
inputWidth: 300,
allowBlank: false,
multipleFn: function ($this) { //多文件上传
var typeArray = ["application/x-shockwave-flash", "audio/MP3", "image/*", "flv-application/octet-stream"];
var fileDom = $this.getEl().down('input[type=file]');
fileDom.dom.setAttribute("multiple", "multiple");
fileDom.dom.setAttribute("accept", typeArray.join(","));
},
listeners: {
afterrender: function () {
this.multipleFn(this);
},
change: function () {
var fileDom = this.getEl().down('input[type=file]');
var files = fileDom.dom.files;
var str = '';
for (var i = 0; i < files.length; i++) {
str += files[i].name;
str += ' ';
}
Ext.getCmp('multipartFiles').setRawValue(str);
this.multipleFn(this);
}
}
}, {
id: 'insert',
xtype: 'button',
text: '上传',
handler: _insertFileUpload
}, {
id: 'select',
xtype: 'button',
text: '查询',
handler: _selectRider
}]
});
var riderPanel = Ext.create('Ext.grid.Panel', {
id: 'riderPanel',
store: riderStore,
title: '文件表单',
columnLines: true,
frame: true,
selModel: {
selType: 'checkboxmodel',
mode: 'SINGLE'
},
columns: [{
xtype: 'actioncolumn',
width: 280,
dataIndex: 'child',
text: '图片',
align: 'center',
renderer: function (value, metaData, record) {
if (record.get('type') == 'image/jpeg' || record.get('type') == 'image/png') {
var id = metaData.record.id;
Ext.defer(function () {
Ext.create('Ext.Img', {
height: 140,
width: 250,
src: 'downloadRider.json?child=' + value + '&parent=' + record.get('parent') + '&random=' + Math.random(),
renderTo: id,
listeners: {
scope: this,
el: {
dblclick: function (e, a) {
var winViewImage = Ext.create('Ext.Window', {
width: 750,
height: 500,
maximizable: true,//窗体最大化按钮
title: '图片',
layout: "fit", //窗口布局类型
modal: true, //是否模态窗口,默认为false
resizable: false,//调整窗体大小
closeAction: 'hide', //关闭窗体实际上是隐藏窗体并未关闭销毁此窗体对象(节约资源)
plain: true,//窗体主体部分背景颜色透明
draggable: true,//充许拖动窗体
border: false,
items: [Ext.create('Ext.Img', {
width: 750,
height: 500,
src: 'downloadRider.json?child=' + record.get('child') + '&parent=' + record.get('parent')
})]
});
winViewImage.show();
}
}
}
})
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}
}
}, {
text: '文件名',
dataIndex: 'child',
style: 'text-align: center;',
flex: 1
}, {
text: '操作',
style: 'text-align: center;',
width: 100,
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
return '<a href=javascript:_downloadRider()>下载</a>' + '   ' + '<a href=javascript:_deleteRider()>删除</a>'
}
}],
viewConfig: {
emptyText: '无数据',
enableTextSelection: true
},
dockedItems: [{
xtype: 'pagingtoolbar',
store: riderStore,
dock: 'bottom',
displayInfo: true
}]
});
Ext.create('Ext.container.Viewport', {
layout: {
type: 'border',
regionWeights: {
west: -1,
north: 1,
south: 1,
east: -1
}
},
defaults: {
border: false
},
items: [{
region: 'north',
items: [formPanel]
}, {
region: 'center',
layout: 'fit',
items: [riderPanel]
}]
});
_init();
});
function _init() {
for (var i = 0; i < Ext.data.StoreManager.getCount(); i++) {
if (Ext.data.StoreManager.getAt(i).isLoading()) {
return;
}
}
_selectRider();
Ext.getBody().unmask();
}
function _insertFileUpload() {
Ext.getCmp('formPanel').getForm().submit({
url: '${ctx}/rider/insertRider.json',
submitEmptyText: false,
waitMsg: '上传中',
success: function (form, action) {
Ext.example.msg('操作信息', '成功!');
_selectRider();
},
failure: function (form, action) {
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.MessageBox.alert('提醒', "请选择附件");
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.MessageBox.alert('错误', action.result.message, Ext.MessageBox.ERROR);
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.MessageBox.alert('错误', Ext.MessageBox.ERROR);
}
}
});
}
function _selectRider() {
var riderStore = Ext.data.StoreManager.lookup('riderStore');
if (parent != null || parent != undefined) {
riderStore.proxy.extraParams['parent'] = parent;
}
riderStore.currentPage = 1;
riderStore.load();
}
function _downloadRider() {
var records = Ext.getCmp('riderPanel').getSelectionModel().getSelection();
if (records.length == 0) {
Ext.MessageBox.alert('警告', '不能选择为空', Ext.MessageBox.WARNING);
return;
}
location.href = 'downloadRider.json?child=' + records[0].get('child') + '&parent=' + records[0].get('parent');
}
function _deleteRider() {
var records = Ext.getCmp('riderPanel').getSelectionModel().getSelection();
if (records.length == 0) {
Ext.MessageBox.alert('警告', '不能选择为空', Ext.MessageBox.WARNING);
return;
}
Ext.MessageBox.show({
title: '请选择',
msg: '删除',
buttons: Ext.MessageBox.YESNO,
icon: Ext.MessageBox.QUESTION,
fn: function (btn) {
if (btn == 'yes') {
Ext.Ajax.request({
url: '${ctx}/rider/deleteRider.json',
async: false,
params: {
'parent': records[0].get('parent'),
'child': records[0].get('child')
},
callback: function (options, success, response) {
if (success) {
var data = Ext.decode(response.responseText);
if (data.success) {
Ext.example.msg('操作信息', '删除成功!');
_selectRider();
} else {
Ext.MessageBox.alert('错误', data.message, Ext.MessageBox.ERROR);
}
} else {
Ext.MessageBox.alert('错误', '服务器错误', Ext.MessageBox.ERROR);
}
}
});
}
}
});
}
</script>
效果图
双击图片放大
从项目中下载文件
后台
主要是通过getContentType()方法 生成根目录截取编译文件名前的路径,再进行拼接 ,具体情况看代码以及注释
package com.newangels.pms.oracle.controller;
import com.newangels.pms.oracle.BaseUtils;
import org.apache.commons.io.FileUtils;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.activation.MimetypesFileTypeMap;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.*;
import java.util.*;
@Controller
@RequestMapping("/rider/")
public class Rider {
/**
* 附件管理页
*
* @return
*/
@RequestMapping(value = "manageRider", method = RequestMethod.GET, produces = MediaType.TEXT_HTML_VALUE)
public String manageUpload() {
return "/Rider/manageRider";
}
/**
* 附件查看页
*
* @return
*/
@RequestMapping(value = "viewRider", method = RequestMethod.GET, produces = MediaType.TEXT_HTML_VALUE)
public String manageUploadTask() {
return "/Rider/viewRider";
}
/**
* 添加附件
*
* @param parent
* @param multipartFiles
* @param request
* @param response
* @param session
* @return
*/
@RequestMapping(value = "insertRider", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
@ResponseBody
public Map<String, Object> insertRider(String parent, @RequestParam MultipartFile[] multipartFiles, HttpServletRequest request, HttpServletResponse response, HttpSession session) {
Map<String, Object> result = new HashMap<String, Object>();
File file;
String fileName;
//根路径
String realPath;
//判断文件是否为空
if (multipartFiles.length == 0) {
result.put("message", "上传失败,请选择文件");
} else {
//根据parent组装根路径
if (parent == null || "".equals(parent)) {
//注意:如果出现两个文件文件名一致时,会导致后面的文件将前面的文件覆盖!
//必须保证每个文件名都不一样! --> 利用随机数!
//利用UUID类生成一组随机码! --> 将随机码当做文件名!
//BaseUtils.getUuid()方法是将生成的UUID中的"-"替换为""
String uuid = BaseUtils.getUuid();
realPath = getConTextPath() + uuid;
} else {
realPath = getConTextPath() + parent;
}
for (int i = 0; i < multipartFiles.length; i++) {
//生成文件名
fileName = multipartFiles[i].getOriginalFilename();
//生成路径
file = new File(realPath + "\\" + fileName);
//如果指定文件不存在,按照指定路径创建该文件!
if (!file.exists()) {
file.mkdirs();
}
//文件上传到服务器
try {
multipartFiles[i].transferTo(file);
} catch (IOException e) {
result.put("success", false);
}
}
result.put("success", true);
}
return result;
}
/**
* 查询
*
* @param parent
* @param request
* @param response
* @param session
* @return
*/
@RequestMapping(value = "selectRider", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
@ResponseBody
public Map<String, Object> selectRider(String parent, HttpServletRequest request, HttpServletResponse response, HttpSession session) {
List<Map<String, Object>> fileMapList = new ArrayList<Map<String, Object>>();
Map<String, Object> result = new HashMap<String, Object>();
List<File> fileList = new ArrayList<File>();//所有的路径
List<String> fileName = new ArrayList<String>();//处理后的路径
String newFile;
//生成根路径
String realPath = getConTextPath();
//判断parent是否为空进行条件查询
if (parent != null && !"".equals(parent)) {
//调用方法查询,file填充到fileList
readFile(fileList, realPath + "\\" + parent);
} else {
//返回空
return null; //parent不穿参则返回空 若想全查询 运行下面的代码
//readFile(fileList, realPath);
}
//截取路径取后两段路径
for (int i = 0; i < fileList.size(); i++) {
newFile = fileList.get(i).toString().substring(realPath.length(), fileList.get(i).toString().length());
fileName.add(newFile);
}
//查询所有文件名
for (File f : fileList) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("child", f.getName());
String parentPath = f.getParent();
parentPath = f.toString().substring(realPath.length(), f.toString().length() - f.getName().length() - 1);
if (parentPath == "upload") {
parentPath = null;
}
map.put("type", getContentType(f.getParent() + "\\" + f.getName()));
map.put("parent", parentPath);
fileMapList.add(map);
}
result.put("result", fileMapList);
result.put("success", true);
return result;
}
/**
* 递归查询目录下的所有文件
*
* @param fileList
* @param fileDir
* @return
*/
private List<File> readFile(List<File> fileList, String fileDir) {
File file = new File(fileDir);
File[] files = file.listFiles();// 获取目录下的所有文件或文件夹
if (files == null) {// 如果目录为空,直接退出
return null;
}
// 遍历,目录下的所有文件
for (File f : files) {
if (f.isFile()) {
fileList.add(f);
} else if (f.isDirectory()) {
readFile(fileList, f.getAbsolutePath());
}
}
return fileList;
}
/**
* 获取windows/linux的项目根目录
*
* @return
*/
public String getConTextPath() {
String fileUrl = Thread.currentThread().getContextClassLoader().getResource("").getPath();
if ("usr".equals(fileUrl.substring(1, 4))) {
fileUrl = (fileUrl.substring(0, fileUrl.length() - 16));//linux
} else {
fileUrl = (fileUrl.substring(1, fileUrl.length() - 16));//windows
//截取PMS_TZGL-web
int index = fileUrl.indexOf("PMS_TZGL-web");
//生成新的路径
fileUrl = fileUrl.substring(0, index) + "PMS_TZGL-web/src/main/webapp/upload/";
}
return fileUrl;
}
/**
* 附件下载
*
* @param child
* @param parent
* @param request
* @param response
* @param session
* @throws UnsupportedEncodingException
*/
@RequestMapping(value = "downloadRider", method = RequestMethod.GET, produces = "application/json;charset=UTF-8")
@ResponseBody
public void downloadRider(String child, String parent, HttpServletRequest request, HttpServletResponse response, HttpSession session) throws UnsupportedEncodingException {
String fileName = getConTextPath() + parent + "/" + child;
InputStream is = readLinesTest(fileName);
// String agent = (String) request.getHeader("USER-AGENT");
// if (agent != null && agent.toLowerCase().indexOf("firefox") > 0) {// 兼容火狐中文文件名下载
// fileName = "=?UTF-8?B?" + (new String(Base64.encodeBase64(fileName.getBytes("UTF-8")))) + "?=";
// }
// else {
// fileName = java.net.URLEncoder.encode(fileName, "UTF-8");
// }
response.reset();
response.setHeader("Content-Disposition", "attachment; filename=" + new String(child.getBytes("gb2312"), "ISO-8859-1"));// 下载模式
ServletOutputStream out = null;
try {
out = response.getOutputStream();
byte[] content = new byte[65535];
int length = 0;
while ((length = is.read(content)) != -1) {
out.write(content, 0, length);
out.flush();
}
out.close();
is.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 读入文件
*
* @param fileName
* @return
*/
public InputStream readLinesTest(String fileName) {
InputStream is = null;
try {
is = new FileInputStream(fileName);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
return is;
}
/**
* 删除附件
*
* @param parent
* @param child
* @param request
* @param response
* @param session
* @return
*/
@RequestMapping(value = "deleteRider", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
@ResponseBody
public Map<String, Object> deleteFile(String parent, String child, HttpServletRequest request, HttpServletResponse response, HttpSession session) {
Map<String, Object> result = new HashMap<String, Object>();
//生成根路径
String realPath = getConTextPath();
File file = new File(realPath + parent + "\\" + child);
if (FileUtils.deleteQuietly(file)) {
result.put("success", true);
} else {
result.put("success", false);
}
return result;
}
/**
* 获取文件类型
*
* @param fileUrl
* @return
*/
public String getContentType(String fileUrl) {
String contentType = null;
try {
contentType = new MimetypesFileTypeMap().getContentType(new File(fileUrl));
} catch (Exception e) {
e.printStackTrace();
}
return contentType;
}
}
查询那里由于需求只要后面的路径以及前台需要树状展示,目前功能尚未完善,仅供参考
来源:CSDN
作者:MrtangLCX
链接:https://blog.csdn.net/MrtangLCX/article/details/104044177