<%@ page contentType="text/html; charset=UTF-8"%>
<%
String contextPath = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Excel</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/jeasyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/jeasyui/demo/demo.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/uploadify/uploadify.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/jeasyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/uploadify/jquery.uploadify.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/pages/excel/excel.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/util.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/jeasyui/locale/easyui-lang-en.js"></script>
</head>
<body>
<div class="container">
<input type="file" id="file_upload" name="fileName">
<div id="uploadfileQueue" style="width: 500px;">
</div>
</div>
<h3>导入文 件列表：</h3>
<table id="datagrid" class="easyui-datagrid" style="width: 100%; height: 100%" data-options="width:800,height:500,idField:'KEYID',
iconCls:'icon-tip',striped: true,fitColumns:true,singleSelect:true,
maximized:true,remoteSort: false,rownumbers:true">
<thead>
<tr>
<th data-options="field:'fileName',width:10">文件名</th>
<th data-options="field:'editFile',width:10">编辑</th>
</tr>
</thead>
</table>
</body>
</html>
/*function a (){
$('#file_upload').uploadify({
auto:false,
//接受true or false两个值，当为true时选择文件后会自动上传；为false时只会把选择的文件增加进队列但不会上传，这时只能使用upload的方法触发上传。不设置auto时默认为true
buttonClass: "some-class",
//设置上传按钮的class
buttonCursor: 'hand',
//设置鼠标移到按钮上的开状，接受两个值'hand'和'arrow'(手形和箭头)
buttonImage: 'img/browse-btn.png',
//设置图片按钮的路径（当你的按钮是一张图片时）。如果使用默认的样式，你还可以创建一个鼠标悬停状态，但要把两种状态的图片放在一起，并且默认的放上面，悬停状态的放在下面（原文好难表达啊：you can create a hover state for the button by stacking the off state above the hover state in the image）。这只是一个比较便利的选项，最好的方法还是把图片写在CSS里面。
buttonText: '<div>选择文件</div>',
//设置按钮文字。值会被当作html渲染，所以也可以包含html标签
checkExisting: '/uploadify/check-exists.php',
//接受一个文件路径。此文件检查正要上传的文件名是否已经存在目标目录中。存在时返回1，不存在时返回0(应该主要是作为后台的判断吧)，默认为false
debug: false,
//开启或关闭debug模式
fileObjName:'filedata',
//设置在后台脚本使用的文件名。举个例子，在php中，如果这个选项设置为'the_files',你可以使用$_FILES['the_files']存取这个已经上传的文件。
fileSizeLimit:'100MB',
//设置上传文件的容量最大值。这个值可以是一个数字或者字符串。如果是字符串，接受一个单位（B,KB,MB,GB）。如果是数字则默认单位为KB。设置为0时表示不限制
fileTypeExts: '*.*',
//设置允许上传的文件扩展名（也就是文件类型）。但手动键入文件名可以绕过这种级别的安全检查，所以你应该始终在服务端中检查文件类型。输入多个扩展名时用分号隔开('*.jpg;*.png;*.gif')
fileTypeDesc: 'All Files',
//可选文件的描述。这个值出现在文件浏览窗口中的文件类型下拉选项中。（chrome下不支持，会显示为'自定义文件',ie and firefox下可显示描述）
//formData: {
// timestamp: '<?php echo $timestamp;?>',
// token: '<?php echo md5('unique_salt' . $timestamp);?>'
// },
//通过get或post上传文件时，此对象提供额外的数据。如果想动态设置这些值，必须在onUploadStartg事件中使用settings的方法设置。在后台脚本中使用 $_GET or $_POST arrays (PHP)存取这些值。看官网参考写法：http://www.uploadify.com/documentation/uploadify/formdata/
height: 30,
//设置按钮的高度(单位px)，默认为30.(不要在值里写上单位，并且要求一个整数，width也一样)
width: 120,
//设置按钮宽度(单位px)，默认120
itemTemplate:false,
//模板对象。给增加到上传队列中的每一项指定特殊的html模板。模板格式请看官网http://www.uploadify.com/documentation/uploadify/itemtemplate/
method:'post',
//提交上传文件的方法，接受post或get两个值，默认为post
multi: false,
//设置是否允许一次选择多个文件，true为允许，false不允许
overrideEvents: [],
//重写事件，接受事件名称的数组作为参数。所设置的事件将可以被用户重写覆盖
preventCaching:true,
//是否缓存swf文件。默认为true，会给swf的url地址设置一个随机数，这样它就不会被缓存。(有些浏览器缓存了swf文件就会触发不了里面的事件--by rainweb)
progressData: 'percentage',
//设置文件上传时显示数据，有‘percentage’ or ‘speed’两个参数(百分比和速度)
queueID: false,
//设置上传队列DOM元素的ID，上传的项目会增加进这个ID的DOM中。设置为false时则会自动生成队列DOM和ID。默认为false
queueSizeLimit: 999,
//设置每一次上传队列中的文件数量。注意并不是限制总的上传文件数量（那是uploadLimit）.如果增加进队列中的文件数量超出这个值，将会触发onSelectError事件。默认值为999
removeCompleted: true,
//是否移除掉队列中已经完成上传的文件。false为不移除
removeTimeout: 3,
//设置上传完成后删除掉文件的延迟时间，默认为3秒。如果removeCompleted为false的话，就没意义了
requeueErrors: false,
//设置上传过程中因为出错导致上传失败的文件是否重新加入队列中上传
successTimeout: 30,
//设置文件上传后等待服务器响应的秒数，超出这个时间，将会被认为上传成功，默认为30秒
swf: 'uploadify.swf',
//swf的相对路径，必写项
//uploader: 'uploadify.php'
//服务器端脚本文件路径，必写项
uploadLimit: 999
//上传文件的数量。达到或超出这数量会触发onUploadError方法。默认999
})
}*/
$(function() {
fuleUpdate2(); // 页面初始化
loadFileName();//读取文件生成列表
});
function fuleUpdate1() {
setTimeout(//设置setTimeout解决谷歌崩溃问题
function() {
$('#file_upload')
.uploadify(
{
'swf' : '../../uploadify/uploadify.swf',
'cancelImage' : '../../uploadify/uploadify-cancel.png',
'swf' : '../../uploadify/uploadify.swf',
'expressInstall' : '../../uploadify/expressInstall.swf',
'uploader' : 'http://localhost:8080/gisTest2/log/test/saveExcel.do',
'buttonText' : '上传',
'width' : 50,
'height' : 20,
auto : true,
'onUploadSuccess' : function(file, data,
response) {
alert('successfully uploaded ' + ':'
+ data);
$(".rr_peitu")
.css("overflow", "hidden")
.html(
"<img src=\"" + data
+ "\" />");
}
});
}, 10);
}
function fuleUpdate2() {
$("#file_upload")
.uploadify(
{
debug : false,
auto : true,// 是否自动上传
height : 30,
buttonText : '请选择文件上传',
buttonClass: "some-class",
cancelImage : '../../uploadify/uploadify-cancel.png',
swf : '../../uploadify/uploadify.swf',
expressInstall : '../../uploadify/expressInstall.swf',
uploader : 'http://localhost:8080/gisTest2/log/test/saveExcel.do', // 后台处理上传文件的action
width : 150, //设置buttonText 宽度
multi : false,// 是否允许多个文件上传
queueID : 'uploadfileQueue',
fileObjName : 'fileName', // 与后台Action中file属性一样
formData : { // 附带值
'userid' : '111',
'username' : 'tom',
'rnd' : '111'
},
successTimeout : 99999,// 上传超时时间
overrideEvents : [ 'onDialogClose' ],
fileTypeDesc : '上传文件支持的文件格式:jpg,jpge,gif,png',
fileTypeExts : '*.*',// *.jpg;*.jpge;*.gif;*.png
queueSizeLimit : 3,//
// simUploadLimit:1,//一次可以上传1个文件
fileSizeLimit : '20MB',// 上传文件最大值
// 返回一个错误，选择文件的时候触发
onSelectError : function(file, errorCode, errorMsg) {
switch (errorCode) {
case -100:
alert("上传的文件数量已经超出系统限制的"
+ $('#file_upload').uploadify(
'settings', 'queueSizeLimit')
+ "个文件！");
break;
case -110:
alert("文件 ["
+ file.name
+ "] 大小超出系统限制的"
+ $('#file_upload').uploadify(
'settings', 'fileSizeLimit')
+ "大小！");
break;
case -120:
alert("文件 [" + file.name + "] 大小异常！");
break;
case -130:
alert("文件 [" + file.name + "] 类型不正确！");
break;
}
},
// 每次更新上载的文件的进展
onUploadProgress : function(file, bytesUploaded,
bytesTotal, totalBytesUploaded, totalBytesTotal) {
// alert(bytesUploaded);
// 有时候上传进度什么想自己个性化控制，可以利用这个方法
// 使用方法见官方说明
},
// 检测FLASH失败调用
onFallback : function() {
alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
},
// 上传到服务器，服务器返回相应信息到data里
onUploadSuccess : function(file, data, response) {
var fileNameAndPath = data.split(",");
var phtml = "<p><a href='#' onlick=downLoad('"
+ fileNameAndPath[1]
+ "')>"
+ fileNameAndPath[0]
+ "</a><img alt='删除' src='../../uploadify/uploadify-cancel.png' onclick=delFile(this)></p>";
if ($("#uploadfileQueue p").length == 0) {
$("#uploadfileQueue").html(phtml);
} else {
$("#uploadfileQueue p:last").after(phtml);
}
loadFileName();
// alert(data+"上传成功");
},
onSelect : function(file) {
// alert(file.name);
},
removeCompleted : true,// 上传的文件进度条是否消失
requeueErrors : false,
removeTimeout : 2,// 进度条消失的时间，默认为3
progressData : "percentage",// 显示上传的百分比
onUploadError : function(file, errorCode, errorMsg,
errorString, swfuploadifyQueue) {
$("#dialog-message").html(errorString);
},
onError : function(event, queueID, fileObj) {
alert("文件:" + fileObj.name + " 上传失败");
}
});
}
function delFile(obj){
var s = $(obj).parent().text();//上传文件的文件名
$(obj).parent().remove();
}
function gridDelFile(index,row,obj){
$('#datagrid').datagrid('selectRow',index);
var row = $('#datagrid').datagrid('getSelected');
if (row){
//var json = JSON.stringify(row.fileName);
$.ajax({
type: 'POST',
url: "http://localhost:8080/gisTest2/log/test/delFile.do",
data: {"jsonStr":row.fileName},
dataType: 'text',
success: function(data) {
if(data.res = 'true'){
alert('删除成功');
}else{
alert("删除失败");
}
loadFileName();
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
}
});
}
//var s = $("#datagrid thead:eq(1) tr:eq(1) th:nth-child(1)").html();
//var th = $("#datagrid thead:eq(0)");
//alert(row.fileName);
//var tr = $('#datagrid').find("tr:eq(1)");
// var tr = th.find("tr:eq(0)");
// var tmpId = tr.find("th:eq(0)").text();
//alert(index+" "+tmpId);
}
function loadFileName(){
$('#datagrid').datagrid({
url:"http://localhost:8080/gisTest2/log/test/readFileName.do",
striped: true,
collapsible: true,
remoteSort: false,
fit: true,
fitColumns: true,
singleSelect: true,
pageNumber: 1,
nowrap:false,
pageSize: 10,
pagination: false,
columns : [ [ {
field : 'fileName',
title : '文件名',
width : 10,
align:'left',
formatter : function(value, row, index) {
return row.fileName;
}
}, {
field : 'editFile',
title : '编辑',
width : 10,
align:'left',
formatter : function(value, row, index) {
var fname = row.fileName;
var obj = row;
return '<a href="#" onclick="gridDelFile('+index+',this)">删除</a>';
}
}
] ],
rownumbers: true,
onLoadSuccess: function(data){
}
});
}
@Controller
@RequestMapping("/log/test")
public class TestController {
@RequestMapping(value = "/getTableData.do", method = RequestMethod.POST /*,produces = "text/plain;charset=utf-8"*/)
@ResponseBody
public String getTableData(@RequestBody String reqJsonStr, HttpServletRequest request){
try {
System.out.println("Str:"+reqJsonStr);
JSONArray jsonArray = JSONArray.fromObject(request.getParameter("jsonStr"));
String[] arr=new String[jsonArray.size()];
for(int i=0;i<jsonArray.size();i++){
//arr[i]=jsonArray.getString(i);
JSONObject jsonObject = jsonArray.getJSONObject(i);
// System.out.println(arr[i]);
String msg = StringUtils.trimToNull(jsonObject.getString("msg"));
String info = StringUtils.trimToNull(jsonObject.getString("info"));
String url = StringUtils.trimToNull(jsonObject.getString("url"));
System.out.println(msg+"\t"+info+"\t"+url);
}
return "0";
} catch (Exception e) {
e.printStackTrace();
}
return "0";
}
@RequestMapping(value = "/repExcel.do", method = RequestMethod.GET )
public String repExcel(HttpServletRequest request){
return "pages/excel/excel";
/* ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("name", "xxx");
modelAndView.setViewName("/pages/excel/excel");
return modelAndView; */
}
@RequestMapping(value = "/saveExcel.do", method = RequestMethod.POST )
public void saveExcel(HttpServletRequest request,PrintWriter out){
System.out.println("saveExcel");
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
MultipartFile multipartFile =null;
String fileName = null;
for (Map.Entry<String, MultipartFile> set : fileMap.entrySet()) {
String filekey = set.getKey();
multipartFile = set.getValue();
}
fileName = this.storeIOc(multipartRequest, multipartFile);
out.print(fileName);
}
@RequestMapping(value = "/readFileName.do", method = RequestMethod.POST )
public void readFileName(HttpServletRequest request,HttpServletResponse response,PrintWriter out) throws IOException{
System.out.println("Acton readFileName.do");
JSONObject json = new JSONObject();
JSONArray jsonArray = new JSONArray();
JSONObject jsonObject;
try {
File file = new File("D:\\文件上传");
File[] listFile = file.listFiles();
for(File f : listFile){
jsonObject = new JSONObject();
jsonObject.put("fileName", f.getName());
jsonArray.add(jsonObject);
}
json.put("rows", jsonArray);
RiaUtils.writeJsonText2Page(json.toString(), response);
} catch (Exception e) {
System.out.println();
json.put("error", "error");
jsonArray.add(json);
RiaUtils.writeJsonText2Page(json.toString(), response);
}
}
@RequestMapping(value = "/delFile.do", method = RequestMethod.POST )
public void delFile(HttpServletRequest request , HttpServletResponse response) throws IOException{
String str = request.getParameter("jsonStr");
System.out.println("Del" + str);
boolean tag = false;
File file = new File("D:\\文件上传" + File.separator + str);
// 路径为文件且不为空则进行删除
if (file.isFile() && file.exists()) {
tag = file.delete();
}
JSONObject json = new JSONObject();
json.put("res", tag);
RiaUtils.writeJsonText2Page(json.toString(), response);
}
private String storeIOc(HttpServletRequest request, MultipartFile file) {
String realPath = request.getSession().getServletContext().getRealPath("dream_ioc");
if (file == null) {
return "dream_ioc" + File.separator + "headpic.jpg";
}
String fileName = "";
String logImageName = "";
if (file.isEmpty()) {
System.out.println("文件未上传");
} else {
String _fileName = file.getOriginalFilename();
String suffix = _fileName.substring(_fileName.lastIndexOf("."));
// /**使用UUID生成文件名称**/
logImageName = UUID.randomUUID().toString() + suffix;
fileName = "D:\\文件上传" + File.separator + logImageName;
//fileName = "D:\\文件上传" + File.separator + _fileName;
System.out.println(fileName+" "+_fileName); //_fileName 原始文件名
File restore = new File(fileName);
try {
file.transferTo(restore);
} catch (Exception e) {
throw new RuntimeException(e);
}
}
//return "D:\\文件上传" + File.separator + logImageName; 返回服务器存放路径
return file.getOriginalFilename(); //返回原始文件名
}
public static void main(String[] args){
File file = new File("D:\\文件上传");
File[] listFile = file.listFiles();
for(File f : listFile){
System.out.println(f.getName());
}
}
}
相关推荐
首先官方的实例可能看不到，反正我是访问不了的。 接着网上也有很多实例，有的也给出了代码，的确，不方便，因为在复制或者新建文件时还是很麻烦...可以本地列出列表，然后选择性上传，但是可能需要改动200k的上传限制
jsp使用uploadify插件实现文件上传的示例，测试时将uploadify 直接导入myeclipse就能用了。 uploadify是一个与jquery和flash结合实现的上传程序，界面挺漂亮，用起来也方便，不过浏览器需要安装有Flash插件，好像...
jquery uploadify插件多文件上传(带代码) 写着挺清楚的，可以借鉴看看！
Uploadify-3.2.1 jQuery文件上传插件，使用uploadify组件可以实现异步无刷新多文件上传功能。
uploadify-h5上传插件，解决uploadify插件中需要下载flash的问题
jquery文件上传插件 jquery.uploadify.js 不支持IE10现在经过修改，已经支持IE6、IE7、IE8、IE9、IE10、IE11.zip
里面有个.net文件上传的实例，利用了jQuery上传插件Uploadify ，简单易懂，可以直接用，也可以作为开发的启发
JQuery uploadify 实现文件批量上传完整例子，所有js，和uploadify插件js 都放在这个例子中
来自国外的一款优秀jQuery插件，主要功能是批量上传文件，此插件在项目中已被广泛之用，但是也发现不少问题，于是决定花点时间搞清这个插件的来龙去脉，其中很多东西是翻译自官网。
jquery文件上传插件 jquery.uploadify.js 不支持IE10现在经过修改，已经支持IE6、IE7、IE8、IE9、IE10、IE11.zip
jquery上传插件uploadify+php完美实现强大的文件上传功能实例+程序_【PHP】.rar
springMVC+uploadify上传图片。
JQuery 上传插件Uploadify使用2 多文件上传
jQuery上传插件Uploadify使用详解
Uploadify是jQuery的一款很棒的多文件上传插件，我这个Demo是基于Uploadify v3.2(Flash-Based Multiple File Uploader )官方Demo写的，里面增加了几个小功能，用来演示，抛砖引玉。Demo里面有很详细的中文注释，另外...
uploadify3.2实现文件上传，很好用的一款基于jquery插件
使用Jquery的上传插件Uploadify，提供upload.ashx的C#源码和VB源码，方便直接使用，因为不会VB，所以只使用C#做了上传的示例。在web.config中配置上传的文件夹路径！ 示例的主要功能是创建一个新的文件夹并将文件...
资源名称：jquery上传插件Uploadify3.2 中文参考手册内容简介：上传功能在我们的程序中是经常会用到的，而传统的http上传在安全性和文件大小上都会有一定的限制，而且不能看到上传进度。今天我要给大家介绍额就是一...
使用Jquery.uploadify上传文件。...jquery有很多插件，其中也有不少上传文件的插件，像ajaxfileupload.js、uploadify.js，不过网上的例子几乎全是php的，很郁闷，研究了半天，终于把uploadify用jsp版本弄出来了
采用jquery.uploadify插件作为前台上传，服务台用c#异步处理