今天项目需要用到多文件上传于是自己写了一个 分享给大家。
首先应用的的input file 控件 通过 ajax 封装的一个上传方式 先上前台代码不上代码的都不是好人
<input id ="attachmentInfo" type="hidden" name="attachment" value="${pd.attachment}">
<c:choose>
<c:when test="${pd.attachment != null }">
<div id="uploadMsg" style="float: left; border: 1px solid #d0d0d0;">
<c:forEach items="${attachmentList}" var="attach">
<div value ="${attach.getUrlDo()}" style="float:left;height:27px;margin-right: 5px;padding-left: 3px;border: 1px solid #d0d0d0;" ><a href="javascript:;" onclick="downFile('${attach.getUrlDo()}')">${attach.getFilename()}</a><img id ="imgId" src="static/layer/image/icon/chahao.png"></div>
</c:forEach>
</div>
</c:when>
<c:otherwise>
<div id="uploadMsg" style="float: left;"></div>
</c:otherwise>
</c:choose>
<input style="left: -9999px; position: absolute;" multiple type="file" id="files" name="files" onchange="upfile(this,'upload/uploadFiles.json','fileNames','#uploadMsg')" />
<button type="button"onclick="javascript:$('#files').click()" class="layui-btn layui-btn-sm" style="height: 24px; line-height: 24px; float:left">
<i class="layui-icon"></i>上传附件</button>
声明全区变量:
var data = $("input[name='attachment']");//为上传隐藏域的选择做准备
加上这个函数
function upfile(obj,url,message,idnm){
//data: 需要存放路径的input
ajaxFileUploads(obj,url,data,idnm);
}
加上初始函数:
$('#uploadMsg').find('img').click(function(i) {
$(this).parent().remove();
var arr =new Array();
var str =$(data).val();
var value ="";
arr = str.split(',');
for(var i=0;i<arr.length;i++)
{
if($(this).parent().attr("value") == arr[i]){
arr[i] =',';
}
if(i == arr.length-1){
value += arr[i]
}else{
value += arr[i]+",";
}
}
var substrone = value.substring(0,1);
if(substrone ==","){
value = value.substr(1,value.length-1);
value = value.replace(",,","").substr(1,value.length-1);
$(data).val(value);
}else{
$(data).val(value.replace(",,",""));
}
})
这样前台就好啦接下来上js文件
var idImg ="";
$(document).click(function(e) { // 在页面任意位置点击而触发此事件
idImg = $(e.target).attr("id");
})
/**
* 附件上传
* @param e file对象
* @param url 上传路径
* @returns
*/
function ajaxFileUploads(e, url,obj,idnm) {
var addImags =$(e).prop('files');
var fileSize=0;
for(var i=0;i<addImags.length;i++){
fileSize=$(addImags)[i].size;
if(fileSize > _file_msx){
boxAlert("文件超过默认大小(10MB)");
return;
}
}
var id = $(e).attr('id');
$.ajaxFileUpload({
url : url,
secureuri : false,
fileElementId : id,
dataType : 'json',
success : function(data) // 服务器成功响应处理函数
{
if(data.data.fail==3){//上传失败
boxAlert(data.data.fileName+" 文件名中包含\" , \"不能上传!");
return ;
}else if(data.data.fail==2){//上传失败
boxAlert("不能上传 "+ data.data.fileType +" 类型的文件");
return ;
}
//文件名
var listFileName = data.data.listFileName;
//文件路径
var listSeverPath = data.data.listServerPath;
//listSeverPath = listSeverPath[i].replace(/\\/g, "\\\\");
if($(obj).val()!=null && $(obj).val()!="" && idImg !="imgId"){
var url =$(obj).val();
$(obj).val(url+","+listSeverPath);
}else
{
$(obj).val(listSeverPath);
}
boxAlert("上传成功!");
for(var i =0;i<listFileName.length;i++){
$(idnm).append('<div value ="'+listSeverPath[i]+'" style="float:left;height:27px;margin-right: 5px;padding-left: 3px;border: 1px solid #d0d0d0;" >'+listFileName[i]+'<img id ="imgId" src="static/layer/image/icon/chahao.png"></div>');
}
$(idnm).find('img').click(function(i) {
$(this).parent().remove();
var arr =new Array();
var str =$(obj).val();
var value ="";
arr = str.split(',');
for(var i=0;i<arr.length;i++)
{
if($(this).parent().attr("value") == arr[i]){
arr[i] =',';
}
if(i == arr.length-1){
value += arr[i]
}else{
value += arr[i]+",";
}
}
var substrone = value.substring(0,1);
if(substrone ==","){
value = value.substr(1,value.length-1);
$(obj).val(value.replace(",,",""));
}else{
$(obj).val(value.replace(",,",""));
}
});
},
error : function() {
boxAlert("上传失败,文件可能为空文件");
}
});
return ;
}
剩下的就是自己后台转值了最主要的函数为这个按照自己的来
if (pd.get("attachment") != null) {
String attachment = findList.get(0).getString("attachment").trim();//所对应的路径
String[] attarray =attachment.split(",");//通过逗号分块
List<URL> attachmentList =new ArrayList<>();
for (int i = 0; i < attarray.length; i++) {
URL url =new URL();//实体
url.setFilename( Utility.getFileNamePath(attarray[i]));//设置文件名
url.setUrlDo(attarray[i]); //设置路径
attachmentList.add(url);
}
mv.addObject("attachmentList",attachmentList);
}
工具类Utility.getFileNamePath
/**
* 从路径中提取文件名
*
* @param reportData
* @return
* @Description:
*/
public static String getFileNamePath(String path) {
String fileName = path.substring(path.lastIndexOf("/") + 1);
if (fileName.indexOf("&") != -1) {
fileName = fileName.split("&")[1];
return fileName;
} else {
return fileName;
}
}
实体类URL
package com.fh.entity;
public class URL {
private String url;
private String filename;
public String getUrlDo() {
return url;
}
public void setUrlDo(String url) {
this.url = url;
}
public String getFilename() {
return filename;
}
public void setFilename(String filename) {
this.filename = filename;
}
}
这样就好了