最近老项目中需要使用多文件上传，相比之下PlUpload页面比较好看，而且支持多文件上传并且支持多种类型，也支持拖拽上传等；
于是先了解一下，可以查看https://blog.csdn.net/happy_wu/article/details/52288644 能够看到中文版介绍和基本配置；
话不多说，上前端代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>整改信息上报</title>
<jsp:include page="/jsp/common/common.jsp"></jsp:include>
<style type="text/css">@import url(<%=path%>/js/plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css);</style>
<script type="text/javascript" src="<%=path%>/js/plupload/js/plupload.full.js"></script>
<script type="text/javascript" src="<%=path%>/js/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="<%=path%>/js/plupload/js/i18n/cn.js"></script>
<script type="text/javascript" src="<%=path%>/js/systemApplement/rectificteInfo.js"></script>
<style type="text/css">
.d1 {
margin-left: 10px;
margin-right: 20px;
}
.tabClass td /*设置表格文字左右和上下居中对齐*/
{
vertical-align: middle;
text-align: center;
height: 40px;
}
label {
font-size:12px;
font-weight: 400;
}
a {
font-size:12px;
}
hr {
margin-top: 10px;
margin-bottom: 10px;
border: 0;
border-top: 1px solid #eee;
}
table {
font-size:12px;
}
.plupload_filelist_footer {
border-top: 1px solid #FFF;
height: 35px;
line-height: 20px;
vertical-align: middle;
}
.plupload_filelist_header {
border-top: 1px solid #EEE;
border-bottom: 1px solid #CDCDCD;
height: 25px;
}
#hideModel {
height: 20px;
font-size: 10px;
text-align: center;
padding: 0px;
margin-right: 10px;
width: 40px;
}
.Wdate{
height: 35px;
}
</style>
</head>
<body>
<div id="fileInfo" style="height:600px;">
<table class="supp-table" border="1" style="margin-top: 8px;border:1px solid #99bbe8;width: 88%;height:100px;" align="center">
<tr align="center" style="height: 26px;">
<td style="width: 33%">系统整改文件</td>
<td>
<button id="sysRectification" class="col-sm-3" type="button" class="mybtn mybtn82" onclick="showModel(this)"
style="font-family: 微软雅黑;width: 100px">上传文件</button>
</td>
</tr>
<tr align="center" style="height: 450px;width:500px">
<td colspan="3" style="width: 33%">
<div id="fileNameList" class="col-sm-6" style="border:1px;width:500px">
<c:forEach items="${fileList}" var="files" varStatus="status" >
<li style="margin-left: 50px; text-align: left;width: 800px;margin-bottom: 10px;">
${files.name }
<a href="<%=path%>/InfoApplement/fileDownLoad.do?fileRealName=${files.fileName }" >下载</a>
<a href="javascript:void(0);" onclick="deleteAlready(this)" >删除</a>
<input id="alreadyAim" type="hidden" value="${files.fileName }" />
</li>
</c:forEach>
<br>
</div>
</td>
</tr>
</table>
</div>
<div class="modal fade bs-example-modal-sm" id="myModal2" data-backdrop="static"
role="dialog" aria-label="myModalLabel" aria-hidden="true"
style="overflow: auto; height: 100%;">
<div class="modal-dialog modal-sm" style="width: 600px">
<div class="modal-content">
<div class="modal-body" style="padding: 0px;">
<div style="width: 580px; margin: 0px auto">
<form id="formId" action="" method="">
<div id="uploader">
</div>
</form>
</div>
</div>
<div class="modal-footer" style="padding: 0px;">
<button id="hideModel" type="button" class="btn btn-default" data-dismiss="modal"> 关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
上面的css是调整上传框的格式，对应的js文件：
var selectedFileTarget;
//点击上传文件
function showModel(obj){
selectedFileTarget = obj.id;
initUpLoad();//每次使用重新渲染
$("#myModal2").modal("show")
}
function initUpLoad(){
//初始化上传页面
$("#uploader").pluploadQueue({
runtimes : 'gears,flash,silverlight,browserplus,html5,html4',//用来指定上传方式，指定多个上传方式请使用逗号隔开。一般情况下，你不需要配置该参数
url : CONTENT_PATH+'/InfoApplement/file.do',
chunk_size : '1mb',
max_file_size : '10mb',
// unique_names : false,//当值为true时会为每个上传的文件生成一个唯一的文件名，并作为额外的参数post到服务器端，参数明为name,值为生成的文件名。
// multiple_queues : true,
// chunk_size: '10mb',
dragdrop: false,
// Specify what files to browse for
filters : [ //可以使用该参数来限制上传文件的类型，大小等，该参数以对象的形式传入，它包括三个属性：
{title : "doc, doc文档", extensions : "jpg,jpeg,png,gif,zip,rar,pdf,docx,doc,xlsx,xls,pptx,ppt,vsd,vsdx"}
],
flash_swf_url : CONTENT_PATH+'/js/plupload/js/plupload.flash.swf',//当使用flash上传方式会用到该参数。
silverlight_xap_url : CONTENT_PATH+'/js/plupload/js/plupload.silverlight.xap',//当使用silverlight上传方式会用到该参数。
multi_selection: true, //true:ctrl多文件上传, false 单文件上传
});
var uploader = $('#uploader').pluploadQueue();//获取上传队列
//绑定各种监听事件
uploader.bind('StateChanged', function() {//当上传队列的状态发生改变时触发
var files = uploader.files;
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
for(var i = 0, len = files.length; i<len; i++){
}
//alert("全部上传完毕！");
$('#uploader_filelist li').remove();//删除缓存
$("#hideModel").click();
}
});
//获取每次上传的返回信息
uploader.bind('FileUploaded', function(uploader,file,responseObject) {//当上传队列的状态发生改变时触发
//alert(responseObject.response);//返回上传路径
//alert(file.name);
var file_path = responseObject.response.replace(/\\/g,"tag");
var file_name = file.name; //文件名
var html1 = '<li id="file-' + file.id +'" style="margin-left: 50px; text-align: left;width: 800px;margin-bottom: 10px;">'
+ file_name +
' <a href="javascript:void(0);" onclick="delParent(this)" >删除</a>' +
' <a href="javascript:void(0);" onclick="downLoad(this)" >下载</a>'
+'<input id="aimFile" name="fileInfo" type="hidden" value="'+file_name+'$$'+file_path+'" />'
+'</li> ';
//var html2 = '<input name="fileName" type="hidden" value="'+file_name+'" />';
if(selectedFileTarget=="sysRectification"){
$(html1).appendTo('#fileNameList');
}
});
}
//点击删除
function delParent(obj){
if(!confirm("您确定要删除吗？")){
return;
}
//点击删除时，对应的也要删除在数据库中对应信息
var fileNamePath = $("#aimFile").val();
var fileRealName = fileNamePath.substring(fileNamePath.lastIndexOf("tag")+3);
$.ajax( {
type : "GET",
url : CONTENT_PATH + "/InfoApplement/deleteFile.do",
contentType : "application/json",
dataType : "json",
cache : false,
data : {'fileRealName':fileRealName},
success : function(data) {
if(data.success == true){
$(obj).parent().remove();
}else{
alter("删除失败！");
}
},
error : function(request, message, ex) {
return ;
},
});
}
//点击下载
function downLoad(obj){
var fileNamePath = $("#aimFile").val();
var fileRealName = fileNamePath.substring(fileNamePath.lastIndexOf("tag")+3);
var a = document.createElement('a');
a.href = CONTENT_PATH+'/InfoApplement/fileDownLoad.do?fileRealName='+fileRealName;
$("body").append(a);
a.click();
$(a).remove();
}
//点击删除(已存在文件)
function deleteAlready(obj){
if(!confirm("您确定要删除吗？")){
return;
}
var fileName = $("#alreadyAim").val();
$.ajax( {
type : "GET",
url : CONTENT_PATH + "/InfoApplement/deleteFile.do",
contentType : "application/json",
dataType : "json",
cache : false,
data : {'fileRealName':fileName},
success : function(data) {
if(data.success == true){
$(obj).parent().remove();
}else{
alter("删除失败！");
}
},
error : function(request, message, ex) {
return ;
},
});
}
这样前端基本上搞定，效果如下：
7792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
