原理:前端分片,后端合成。
伪代码如下:
java:
import java.io.File;
import java.io.RandomAccessFile;
import java.util.concurrent.atomic.AtomicLong;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.kanq.cloud.upload.request.MultipartFileParam;
import com.kanq.cloud.upload.util.MultipartFileUploadUtil;
import org.apache.commons.io.FileUtils;
@Controller
@RequestMapping("fj/video")
public class UploadAction {
private static AtomicLong counter = new AtomicLong(0L);
@RequestMapping(value = "fileUpload.do")
@ResponseBody
public void fileUpload(HttpServletRequest request) {
String prefix = "req_count:" + counter.incrementAndGet() + ":";
System.out.println(prefix + "start !!!");
try {
//使用 工具类解析相关参数,工具类代码见下面
MultipartFileParam param = MultipartFileUploadUtil.parse(request);
System.out.println(prefix + "chunks= " + param.getChunks());
System.out.println(prefix + "chunk= " + param.getChunk());
System.out.println(prefix + "chunkSize= " + param.getParam().get("chunkSize"));
long chunkSize = 10 * 1024 * 1024; //这个必须与前端设定的值一致
if (param.isMultipart()) {
String finalDirPath = "/data0/uploads/";
String tempDirPath = finalDirPath + param.getId();
String tempFileName = param.getFileName() + "_tmp";
File confFile = new File(tempDirPath, param.getFileName() + ".conf");
File tmpDir = new File(tempDirPath);
File tmpFile = new File(tempDirPath, tempFileName);
if (!tmpDir.exists()) {
tmpDir.mkdirs();
}
RandomAccessFile accessTmpFile = new RandomAccessFile(tmpFile, "rw");
RandomAccessFile accessConfFile = new RandomAccessFile(confFile, "rw");
long offset = chunkSize * param.getChunk();
//定位到该分片的偏移量
accessTmpFile.seek(offset);
//写入该分片数据
accessTmpFile.write(param.getFileItem().get());
//把该分段标记为 true 表示完成
System.out.println(prefix + "set part " + param.getChunk() + " complete");
accessConfFile.setLength(param.getChunks());
accessConfFile.seek(param.getChunk());
accessConfFile.write(Byte.MAX_VALUE);
//completeList 检查是否全部完成,如果数组里是否全部都是(全部分片都成功上传)
byte[] completeList = FileUtils.readFileToByteArray(confFile);
byte isComplete = Byte.MAX_VALUE;
for (int i = 0; i < completeList.length && isComplete==Byte.MAX_VALUE; i++) {
//与运算, 如果有部分没有完成则 isComplete 不是 Byte.MAX_VALUE
isComplete = (byte)(isComplete & completeList[i]);
System.out.println(prefix + "check part " + i + " complete?:" + completeList[i]);
}
if (isComplete == Byte.MAX_VALUE) {
System.out.println(prefix + "upload complete !!");
}
accessTmpFile.close();
accessConfFile.close();
}
} catch (Exception e) {
e.printStackTrace();
}
System.out.println(prefix + "end !!!");
}
}
jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="com.kanq.cloud.ui.entity.Userconfig"%>
<%@page import="com.kanq.cloud.common.util.StringUtil"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
Userconfig userconfig=(Userconfig)session.getAttribute("userconfig");
String us = "style1";
if (null!=userconfig&&!StringUtil.isNull(userconfig.getStyle())){
us=userconfig.getStyle();
}
%>
<!DOCTYPE html>
<!-- saved from url=(0062)http://localhost:8080/hyt1.0/page/org/organization/browser.jsp -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>知识库管理</title>
<link rel="stylesheet" type="text/css" href="<%=path %>/css/commn/commn.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/css/manage/manage.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/js/jquery-easyui-1.4.4/themes/metro-blue/easyui.css">
<%--<link rel="stylesheet" type="text/css" href="<%=path %>/js/uploadify/uploadify.css" />--%>
<link rel="stylesheet" type="text/css" href="<%=path %>/js/webuploader-0.1.5/webuploader.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/js/JQueryzTreev3.5/css/metroStyle/metroStyle.css">
<link id="skin" rel="stylesheet" type="text/css" href="<%=path %>/css/commn/<%=us%>.css">
<script type="text/javascript" src="<%=path %>/js/jquery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="<%=path %>/js/JQueryzTreev3.5/js/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript" src="<%=path %>/js/common/jquery.validate.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/js/uploadify/swfobject.js"></script>
<%--<script type="text/javascript" src="<%=path %>/js/uploadify/jquery.uploadify.min.js"></script>--%>
<script type="text/javascript" src="<%=path %>/js/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=path %>/js/index/windgh.js"></script>
<SCRIPT type="text/javascript">
var currentNode;
//初始化左侧Tree设置
var setting = {
view: {
selectedMulti: false//设置是否允许同时选中多个节点
},
check: {
enable: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
onMouseDown: function(event, treeId, treeNode){
currentNode=treeNode;
//fileUploadify();//上传对话框页面
docDatagrid(currentNode.id);//docdatagrid列表值加载
}
}
};
//页面初始化
$(function() {
$.ajax({
type: 'POST',
contentType:"application/json",
url:"<%=path %>/servicefilecatalog/getTree.do",
success:function(data){
var treeNodes = eval(data);
$.fn.zTree.init($("#treeDemo"), setting, treeNodes);
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.expandAll(true);
}
});
var page=$('#docdatagrid').datagrid('getPager');
page.pagination({
displayMsg:'当前显示从第{from}条到{to}条 共{total}条记录'
});
});
//添加目录
function addCatalog(type){
document.getElementById("name").value=''; //清空输入框内容
var pn;
var pid='';
if(currentNode){
if(type==1){
try{
pn=currentNode.getParentNode();
}catch(err){}
}else if(type==2){
pn=currentNode;
}
if(pn){
pid=pn.id;
}
}
if(type==2){
if(!pn){
$.messager.alert('警告','请先选择父级目录!','warning');
return;
}
}
document.getElementById("fileCatalog.catalogid").value=pid;
//弹出框
$('#adddialog').show();
$('#adddialog').dialog({
title:'添加',
modal: true,
buttons: [{
text: '提交',
handler: function() {
//验证目录名称是否为空
var cname=$("#name").val();
if(!cname){
$.messager.alert('错误','请输入目录名称!','error');
return;
}
$.ajax({
type: 'POST',
data:$("#addCatalogForm").serialize(),
url:"<%=path %>/servicefilecatalog/save.do",
error: function () {
alert('保存信息失败!');
},
success:function(data){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var newNode={};
newNode.name=$("#name").val();
newNode.id=data;
treeObj.addNodes(pn, newNode);
treeObj.selectNode(newNode,false);
currentNode=newNode;
}
});
$.messager.alert('信息','提交成功','info');
$('#adddialog').dialog('close');
}
}, {
text: '取消',
handler: function() {
$('#adddialog').dialog('close');
}
}]
});
}
//修改目录
function alterCatalog(){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var selectedNode=currentNode;
if(!selectedNode){
$.messager.alert('警告','请选择要修改的目录!','warning');
return;
}else{
var pn;
var pid='';
if(currentNode){
pn=currentNode.getParentNode();
if(pn){
pid=pn.id;
}
}
document.getElementById("fileCatalog.catalogid").value=pid;
document.getElementById("catalogid").value=currentNode.id;
document.getElementById("name").value=currentNode.name;
}
$('#adddialog').show();
$('#adddialog').dialog({
title:'修改目录',
//collapsible: true,
//minimizable: true,
//maximizable: true,
modal: true,
buttons: [{
text: '提交',
handler: function() {
$.ajax({
type: 'POST',
data:$("#addCatalogForm").serialize(),
url:"<%=path %>/servicefilecatalog/save.do",
error: function () {
$.messager.alert('错误','保存信息失败!','error');
},
success:function(data){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
currentNode.name=$("#name").val();
treeObj.updateNode(currentNode);
}
});
$.messager.alert('信息','修改成功','info');
$('#adddialog').dialog('close');
}
}, {
text: '取消',
handler: function() {
$('#adddialog').dialog('close');
}
}]
});
}
//删除目录
function deleteCatalog(){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var selectedNodes=treeObj.getSelectedNodes();
//判断是否已经选中目录节点
var selectedNode=currentNode;
if(!selectedNode){
$.messager.alert('警告','请选择要删除的目录!','warning');
return;
}
var catalogId='';
if(selectedNodes.length>0){
catalogId=selectedNodes[0].id;
}else{
return ;
}
$.messager.confirm("操作提示", "您确定要 <b>删除</b> 吗?", function (data) {
if (data) {
$.ajax({
type: 'POST',
data: {catalogid:catalogId},
url:"<%=path %>/servicefilecatalog/deleteById.do",
error: function () {
$.messager.alert('错误','删除目录失败!','error');
},
success:function(data){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.removeNode(currentNode);
$('#docdatagrid').datagrid('reload');
$.messager.alert('信息','删除目录成功!','info');
}
});
}
});
}
//查询
function searchFile(){
//alert('');
var docname=$('#docname').val();
var uploadname=$('#uploadname').val();
var starttimekey=$('#starttimekey').val();
var endtimekey=$('#endtimekey').val();
$('#docdatagrid').datagrid('load',{
name:docname,
uploader:uploadname,
starttimekey:starttimekey,
endtimekey:endtimekey
});
}
//重置
function resetSearchFile(){
$('#docname').val("");
$('#uploadname').val("");
$('#starttimekey').val("");
$('#endtimekey').val("");
}
//上传对话框弹出
var initUploder=false;
function upload(){
if(currentNode==undefined){
$.messager.alert('警告','请先选择目录!','warning');
return;
}
//$('#filetable').datagrid('loadData',[]);
$('#uploadfile').window('open');//打开上传文件窗口
if(!initUploder){
$list = $('#fileList');
var flie_count = 0;
var uploader = WebUploader.create({
auto: false,
swf: '../../../js/webuploader-0.1.5/Uploader.swf',
server: 'http://localhost:8080/ZYGL/fj/video/fileUpload.do',
pick: '#picker',
chunked: true, //开启分块上传
chunkSize: 10 * 1024 * 1024,
chunkRetry: 3,//网络问题上传失败后重试次数
threads: 1, //上传并发数
fileSizeLimit: 2000 * 1024 * 1024,//最大2GB
fileSingleSizeLimit: 2000 * 1024 * 1024,
resize: false//不压缩
});
uploader.on('fileQueued', function (file) {
$list.append('<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">正在计算文件MD5...请等待计算完毕后再点击上传!</p><input type="hidden" id="s_WU_FILE_'+flie_count+'" />' +
'</div>');
console.info("id=file_"+flie_count);
flie_count++;
//uploader.options.formData.guid = WebUploader.guid();//每个文件都附带一个guid,以在服务端确定哪些文件块本来是一个
//console.info("guid= "+WebUploader.guid());
//md5计算
uploader.md5File(file)
.progress(function(percentage) {
console.log('Percentage:', percentage);
})
// 完成
.then(function (fileMd5) { // 完成
var end = +new Date();
console.log("before-send-file preupload: file.size="+file.size+" file.md5="+fileMd5);
file.wholeMd5 = fileMd5;//获取到了md5
//uploader.options.formData.md5value = file.wholeMd5;//每个文件都附带一个md5,便于实现秒传
$('#' + file.id).find('p.state').text('MD5计算完毕,可以点击上传了');
console.info("MD5="+fileMd5);
});
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css('width', percentage * 100 + '%');
});
//发送前填充数据
uploader.on( 'uploadBeforeSend', function( block, data ) {
// block为分块数据。
// file为分块对应的file对象。
var file = block.file;
var fileMd5 = file.wholeMd5;
// 修改data可以控制发送哪些携带数据。
console.info("fileName= "+file.name+" fileMd5= "+fileMd5+" fileId= "+file.id);
console.info("input file= "+ flie_count);
// 将存在file对象中的md5数据携带发送过去。
data.md5value = fileMd5;//md5
data.fileName_ = $("#s_"+file.id).val();
console.log("fileName_: "+data.fileName_);
// 删除其他数据
// delete data.key;
if(block.chunks>1){ //文件大于chunksize 分片上传
data.isChunked = true;
console.info("data.isChunked= "+data.isChunked);
}else{
data.isChunked = false;
console.info("data.isChunked="+data.isChunked);
}
});
uploader.on('uploadSuccess', function (file) {
$('#' + file.id).find('p.state').text('已上传');
$('#' + file.id).find(".progress").find(".progress-bar").attr("class", "progress-bar progress-bar-success");
$('#' + file.id).find(".info").find('.btn').fadeOut('slow');//上传完后删除"删除"按钮
$('#StopBtn').fadeOut('slow');
});
uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
//上传出错后进度条变红
$('#' + file.id).find(".progress").find(".progress-bar").attr("class", "progress-bar progress-bar-danger");
});
uploader.on('uploadComplete', function (file) {//上传完成后回调
$('#' + file.id).find('.progress').fadeOut();//上传完删除进度条
//$('#' + file.id + 'btn').fadeOut('slow')//上传完后删除"删除"按钮
});
uploader.on('uploadFinished', function () {
//上传完后的回调方法
//alert("所有文件上传完毕");
//提交表单
});
$("#UploadBtn").click(function () {
uploader.upload();//上传
});
$("#StopBtn").click(function () {
console.log($('#StopBtn').attr("status"));
var status = $('#StopBtn').attr("status");
if (status == "suspend") {
console.log("当前按钮是暂停,即将变为继续");
$("#StopBtn").html("继续上传");
$("#StopBtn").attr("status", "continuous");
console.log("当前所有文件==="+uploader.getFiles());
console.log("=============暂停上传==============");
uploader.stop(true);
console.log("=============所有当前暂停的文件=============");
console.log(uploader.getFiles("interrupt"));
} else {
console.log("当前按钮是继续,即将变为暂停");
$("#StopBtn").html("暂停上传");
$("#StopBtn").attr("status", "suspend");
console.log("===============所有当前暂停的文件==============");
console.log(uploader.getFiles("interrupt"));
uploader.upload(uploader.getFiles("interrupt"));
}
});
uploader.on('uploadAccept', function (file, response) {
if (response._raw === '{"error":true}') {
return false;
}
});
initUploder=true;
}
}
//上传确定方法
function uploadok(){
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
if(0==index){
//$('#file_upload').uploadify('upload','*');
}else{
saveFile();
}
}
function saveFile(){
var filename=$("#filename").val();
var catalogId=currentNode.id;
$.ajax({
type: 'POST',
data: {
filename:filename,
catalogId:catalogId
},
dataType : 'json',
url:"<%=path %>/servicefile/save.do",
success:function(data){
if(data){
if(data.message=='yes'){
alert('文件保存成功!');
$("#docdatagrid").datagrid("reload");
$('#uploadfile').window('close');//关闭上传文件窗口
}else if(data.message=='no'){
alert('【'+filename+'】文件未找到!');
}else{
alert('【'+filename+'】文件太大!');
}
}
},
error: function () {
$.messager.alert('错误','保存文件失败!','error');
}
});
}
function cancel(){
//$('#filetable').window('clear');
//$('#file_upload').uploadify('cancel','*');
$('#uploadfile').window('close');//关闭上传文件窗口
}
var uploaddetail=[];
/* $(function(){
var filetable = $('#filetable').datagrid({
data: uploaddetail
});
filetable.datagrid('enableCellEditing').datagrid('gotoCell', {
index: 0,
field: 'name'
});
});*/
//上传对话框
function fileUploadify(){
/* var size='3MB';
$('#file_upload').uploadify({
'auto':false, // 选择之后,自动开始上传
'buttonText' : '请选择文件', // 按钮上的文字
'height' : 23, // 按钮的高度
'width' : 75, // 按钮的宽度
'fileSizeLimit': '2MB',
'removeTimeout' : 10,
'fileExt':'*.doc;*.pdf;*.rar;*.txt',
'fileObjName' : 'file_upload', // 上传参数名称
'swf' : '<%=path %>/js/uploadify/uploadify.swf', // 上传使用的 Flash
'uploader' : '<%=path %>/servicefile/upload.do?catalogId='+currentNode.id, // 服务器端处理地址
'onSelect' : function(file) {
uploaddetail.push({name:file.name,record:file.record});
$('#filetable').datagrid('reload');
$('#filetable').datagrid('loadData',uploaddetail);
},
});*/
}
//docdatagrid内容加载
function docDatagrid(id){
$('#docdatagrid').datagrid({
url: '<%=path %>/servicefile/getPage.do',
method:'post',
queryParams: {
id: id
}
});
}
//页面初始加载信息
function loadInfo(){
docDatagrid('');//docdatagrid内容加载
}
function fileoperate(a,b){
alert(a+'/t'+b);
}
//给docdatagrid每行增加下载、删除按钮
function rowformater(value,row,index){
var id=row.FILEID;
return "<a class='datagidbtn' οnclick=downloadfile('"+id+"')>下载</a>  <a class='datagidbtn' οnclick=deleteFile('"+id+"')>删除</a>";
}
//点击下载按钮下载文件
function downloadfile(id){
window.location.href="<%=path %>/servicefile/download.do?id="+id;
}
//点击删除按钮删除文件
function deleteFile(id){
$.messager.confirm("操作提示", "您确定要 <b>删除</b> 该文件吗?", function (data) {
if (data) {
$.ajax({
type: 'POST',
data: {fileid:id},
url:"<%=path %>/servicefile/deleteById.do",
error: function () {
$.messager.alert('错误','删除文件失败!','error');
},
success:function(data){
$("#docdatagrid").datagrid("reload");
}
});
}
});
}
/*****************************************************下载记录begin**********************************************************/
//展示下载记录
function showDownLog(){
$('#showdownlog').dialog('open');
$("#file_name").val('');
$("#down_user").val('');
$("#down_dep").val('');
$("#down_date_start").datebox('setValue', '');
$("#down_date_end").datebox('setValue', '');
showTable('','','','');
$("#showdownlog").panel("move",{top:$(document).scrollTop() + ($(window).height()-550) * 0.5});
}
function searchByParm(){
var file_name=$("#file_name").val();
var down_user=$("#down_user").val();
var down_dep=$("#down_dep").val();
var down_date_start=$("#down_date_start").datebox('getValue');
var down_date_end=$("#down_date_end").datebox('getValue');
showTable(file_name,down_user,down_dep,down_date_start,down_date_end);
}
function showTable(file_name,down_user,down_dep,down_date_start,down_date_end)
{
$('#downlogtable').datagrid({
url: "<%=path %>/servicefile/finddownlog.do",
methord: 'post',
dataType:"json",
queryParams:{file_name:file_name,down_user:down_user,down_dep:down_dep,down_date_start:down_date_start,down_date_end:down_date_end},
fitColumns: true,
sortName: 'ID',
sortOrder: 'desc',
idField: 'ID',
pageSize: 8,
pagination: true,
striped: true, //奇偶行是否区分
rownumbers: true,//行号
singleSelect: true,//单选模式
columns: columns= [[
{ field: 'FILE_NAME', title: '文件名称', width: 60 },
{ field: 'DOWN_USER', title: '下载人', width: 60 },
{ field: 'DOWN_DEP', title: '下载办事处', width: 60 },
{ field: 'DOWN_DATE', title: '下载时间', width: 60 }
]]
});
//设置分页控件
var p = $('#downlogtable').datagrid('getPager');
$(p).pagination({
pageSize: 8,//每页显示的记录条数,默认为10
pageList: [8],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
});
}
function exportLog(){
var file_name=$("#file_name").val();
var down_user=$("#down_user").val();
var down_dep=$("#down_dep").val();
var down_date_start=$("#down_date_start").datebox('getValue');
var down_date_end=$("#down_date_end").datebox('getValue');
location.href='<%=path %>/servicefile/exportDownLog.do?file_name='+file_name+"&down_user="+down_user+"&down_dep="+down_dep+"&down_date_start="+down_date_start+"&down_date_end="+down_date_end;
}
/*****************************************************下载记录end**********************************************************/
</SCRIPT>
</head>
<body οnlοad="loadInfo();" class="easyui-layout">
<div data-options="region:'west'" title="知识库" class="westblock">
<div class="btngroup2">
<a href="javascript:void(0)" title="添加目录" id=addCatalog class="easyui-tooltip btn2 addatg" οnclick="addCatalog(1)" >添加目录</a>
<a href="javascript:void(0)" title="添加子目录" id='addSubCatalog' class="easyui-tooltip btn2 addctg" οnclick="addCatalog(2)" >添加子目录</a>
<a href="javascript:void(0)" title="修改" id='alterCatalog' class="easyui-tooltip btn2 edit2" οnclick="alterCatalog()">修改</a>
<a href="javascript:void(0)" title="删除" id='deleteCatalog' class="easyui-tooltip btn2 dele" οnclick="deleteCatalog()">删除</a>
</div><!-- toobar end -->
<div class="treelist treelistmarintop50"><!-- 左侧tree设置 -->
<%-- <div class="searchbox3"><input type="text" placeholder="搜索"></div>--%>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"> </ul>
</div>
</div><!--treelist end-->
<div id="adddialog" style="display:none;" ><!-- 弹出框 -->
<form id="addCatalogForm" class="addform">
<input id="catalogid" name="catalogid" type="hidden" />
<input id="fileCatalog.catalogid" name="fileCatalog.catalogid" type="hidden" />
<label class="lbInfo">目录名称:</label>
<input id="name" name="name" type="text" class="easyui-validatebox" required="true" /><br />
</form>
</div>
</div>
<div data-options="region:'center'" class="centerblock">
<div id="tb" class="selelog">
<a href="javascript:void(0);" class="btn btn-blue btn-padright" οnclick="upload()">上传</a>
<a href="javascript:void(0);" class="btn btn-blue btn-padright" οnclick="showDownLog()">下载记录</a>
文档名称:<input name="docname" id="docname" >
上传者:<input name="uploadname" id="uploadname">
上传时间: <input name="starttimekey" id="starttimekey" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" style="width: 150px;height: 22px">
至: <input name="endtimekey" id="endtimekey" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" style="width: 150px;height: 22px">
<a href="javascript:void(0);" class="btn btn-green" οnclick="searchFile()">查询</a>
<a href="javascript:void(0);" class="btn btn-green" οnclick="resetSearchFile()">重置</a>
</div>
<!-- 上传功能 S -->
<div id="uploadfile" name="uploadfile" class="easyui-dialog" data-options="modal:true,closed:true,buttons: '#btn-uploadfile'" aria-hidden="true" title="上传文件">
<div class="upload-container">
<div id="tt" class="easyui-tabs">
<div title="系统上传" style="padding:20px;">
<div id="uploader" class="container">
<div class="container">
<div id="fileList" class="uploader-list"></div>
</div>
<div class="btns container">
<div id="picker" class="webuploader-container" style="float: left; margin-right: 10px">
选择文件
</div>
<div id="UploadBtn" class="webuploader-pick" style="float: left; margin-right: 10px">开始上传</div>
<div id="StopBtn" class="webuploader-pick" style="float: left; margin-right: 10px" status="suspend">暂停上传</div>
</div>
</div>
</div>
<div title="手动上传" style="overflow:auto;padding:20px;">
<label>文件名称:</label>
<input class="easyui-textbox" type="text" id="filename" name="filename" data-options="required:true" placeholder="请输入文件名称"/>
</div>
</div>
<div class="btn-group" id="btn-uploadfile">
<a class="btn btn-blue" href="javascript:void(0)" οnclick="uploadok()">提交</a>
<a class="btn btn-gray" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" οnclick="cancel()">关闭</a>
</div>
</div>
</div>
<!-- 上传功能 E-->
<div class="marg5_20 padtop80">
<table id="docdatagrid" class="easyui-datagrid" style="width:100%;height:100%"
data-options="
fitColumns:true,
singleSelect:false,
collapsible:true,
url:'',
method:'get',
pagination:true,
rownumbers:true,
remoteSort:false,
loadMsg:'数据正在加载中。。。',
">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true,width:'2%'">选择</th>
<th data-options="field:'FILEID',sortable:true,hidden:true">fileid</th>
<th data-options="field:'NAME',width:'45%',sortable:true">文档名称</th>
<th data-options="field:'UPLOADER',width:'10%',sortable:true">上传者</th>
<th data-options="field:'UPLOADTIME',width:'20%',sortable:true,order:'asc'">上传时间</th>
<th data-options="field:'id',width:'18%',formatter:rowformater">操作</th>
</tr>
</thead>
</table>
</div>
</div>
<div id="showdownlog" title="下载记录" class="easyui-dialog" data-options="modal:true,closed:true" style="width: 1000px;height: 700px;">
<div class="selelog2 text_c">
文件名称: <input type="text" id="file_name" />
下载人: <input type="text" id="down_user" />
下载单位:<input type="text" id="down_dep" />
下载时间段 起:<input id="down_date_start" name="down_date_start" class="easyui-datebox">
止:<input id="down_date_end" name="down_date_end" class="easyui-datebox">
<a href="javascript:void(0)" class="btn font12 btn-blue fr hvr-round-corners" οnclick="searchByParm()"><span></span>搜索</a>
</div>
<table id="downlogtable" style="width:100%; height:382px;"></table>
<div class="btn-group">
<a href="javascript:void(0)" class="btn btn-blue" οnclick="exportLog();">导出</a>
<a href="javascript:void(0)" class="btn btn-gray" οnclick="javascript:$('#showdownlog').dialog('close')">关闭</a>
</div>
</div>
</body>
</html>