layui就不多介绍了，到官网网站上有详细的介绍，至于上传文件的组件的使用问题，官网上参考例子也可以实现，但是这样没有办法满足自己的项目需求，自己按照需求修改了下，希望对你有用
需求
先是一个列表然后通过列表上的按钮弹出一个弹出框然后 选择上传的文件 确定的时候 提交文件 并且已提交文件可以再次打开显示在列表中，并且可以删除已提交文件
实现思路：
在列表中隐藏一个input
如下：
<td>
<input onclick="popUploadFile('OApplicationForm')" class="layui-btn layui-btn-xs layui-btn-normal" type="button" value="上传"/>
<input type="text" id="OApplicationForm" style="display:none" name="OApplicationForm"/>
</td>
<td id="OApplicationFormState">未上传</td>点击上传的时候把隐藏input的id带过去，弹出框里面放着上传多文件的组件，且把开始上传按钮隐藏掉，点击确定的时候触发开始上传按钮 并且把准备上传文件的信息带到隐藏的input里面。
具体代码实现如下：
//弹出上传附件框
function popUploadFile(id){
var content= "<html>"
+"<head><meta http-equiv='Content-Type' content='text/html;charset=UTF-8'></head>"
+"<body>"
+"<div style='margin:10px'>"
+"<div class='layui-upload'><button class='layui-btn layui-btn-normal' id='testList' type='button'>选择文件</button>"
+"<div class='layui-upload-list'>"
+"<table class='layui-table'>"
+"<thead>"
+"<tr><th>文件名</th>"
+"<th>大小</th>"
+"<th>状态</th>"
+"<th>操作</th>"
+"</tr></thead>"
+"<tbody id='demoList'></tbody>"
+"</table>"
+"</div>"
+"</div>"
+"</div>"
+"<button type='button'style='display:none'class='layui-btn' id='testListAction'>开始上传</button>"
+"</body>"
+"</html>";
//弹出框
layer.open({
title:'上传附件',
type: 1,
icon:0,
area:["600px","400px"],
btn:["确定","取消"],
btn1:function(index,layro){
//先删除要删除的已提交文件
if(deleteFilePaths){
$.ajax({
url:basePath+'deleteFile.do',
data:{deleteFilePaths:deleteFilePaths},
dataType:'JSON',
Type:'POST',
async:false,
success:function(data){
if(data.code!=0){
layer.msg(data.info);
return;
}
//更新弹出框对应的input
var deleteFilePathsArry=deleteFilePaths.split(",");
var newFileJsons=new Array();
for(var i in fileJsons){
var fileData=JSON.parse(fileJsons[i]);
var isDelete=false;
for(var j in deleteFilePathsArry){
if(fileData.filePath==deleteFilePathsArry[j]){
isDelete=true;
break;
}
}
if(!isDelete){
var newFileJson={};
newFileJson.code=fileData.code;
newFileJson.filePath=fileData.filePath;
newFileJson.size=fileData.size;
newFileJson.fileDir=fileData.fileDir;
newFileJsons.push(newFileJson);
}
}
//赋值给弹出框对应的input
$("#"+id).val('');
for(var i in newFileJsons){
var value=JSON.stringify(newFileJsons[i]);
if($("#"+id).val()==''){
$("#"+id).val(value);
}else{
$("#"+id).val($("#"+id).val()+";"+value);
}
}
},
error:function(data){
layer.msg("未知错误，请联系管理员");
return;
}
});
}
//开始上传新的文件
if(files&&files.length!=0){
$("#testListAction").click();
}else{
if($("#"+id).val()!=''){
$("#"+id+"State").text("已上传");
}else{
$("#"+id+"State").text("未上传");
}
layer.closeAll('page'); //关闭所有页面层
}
},
btn2:function(index,layro){
},
closeBtn:1,
content:content
});
var deleteFilePaths;//删除已上传的文件路径列表
var fileDirIndex;//上传到本地的文件目录
var fileJsons;//已上传的文件基本数据
if($("#"+id).val()==''){
fileDirIndex=new Date().getTime();
}else{
fileJsons=$("#"+id).val().split(";");
fileDirIndex=JSON.parse(fileJsons[0]).fileDir;
}
var demoListView = $('#demoList');
var files;
//加载上传文件组件
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload
,uploadListIns = upload.render({
elem: '#testList'
,url: basePath+'upload.do'
,data:{fileDir:fileDirIndex}
,accept: 'file'
,multiple: true
,auto: false
,bindAction: '#testListAction'
,choose: function(obj){
files= this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
,'<td>等待上传</td>'
,'<td>'
,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-xs layui-btn-danger notUpload-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.notUpload-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
,allDone: function(obj){ //当文件全部被提交后，才触发
$("#"+id+"State").text("已上传");
layer.closeAll('page'); //关闭所有页面层
}
,done: function(res, index, upload){
if(res.code == 0){ //上传成功
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html(''); //清空操作
//赋值给弹出框对应的input
var value=JSON.stringify(res);
if($("#"+id).val()==''){
$("#"+id).val(value);
}else{
$("#"+id).val($("#"+id).val()+";"+value);
}
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
});
//添加已上传文件列表
for(var i in fileJsons){
var fileJson=JSON.parse(fileJsons[i]);
var filePath=fileJson.filePath;
var fileName=fileJson.filePath.split("\\")[fileJson.filePath.split("\\").length-1];
var fileSize=fileJson.size;
var tr = $(['<tr id="upload-'+i+'">'
,'<td>'+ fileName+'</td>'
,'<td>'+ (fileSize/1024).toFixed(1) +'kb</td>'
,'<td>已上传</td>'
,'<td>'
,'<input class="layui-btn layui-hide" type="text" value="'+filePath+'"/>'
,'<button class="layui-btn layui-btn-xs layui-btn-danger upload-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
//删除
tr.find('.upload-delete').on('click', function(){
//拼接要删除的已上传文件路径
var deleteFilePath=$(this).prev().val();
if(deleteFilePaths){
deleteFilePaths+=","+deleteFilePath;
}else{
deleteFilePaths=deleteFilePath;
}
$(this).parent().parent().remove();
});
demoListView.append(tr);
}
}后台实现代码（ssm的框架）
package com.ustcsoft.jt.controller.uploadMaterial;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.List;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
/**
*
* 上传文件接口
*/
@RestController
public class UploadMaterial {
/**
* 上传材料
* @param files
* @return
*/
@RequestMapping("/upload.do")
public JSONObject upload(@RequestParam("file")MultipartFile file,@RequestParam("fileDir")String fileDir){
OutputStream os = null;
InputStream inputStream = null;
String fileName = null;
String filePath=null;
String path="D:\\file"+"\\"+fileDir;
JSONObject resultJSON=new JSONObject();
try {
inputStream = file.getInputStream();
fileName = file.getOriginalFilename();
// 2、保存到临时文件
// 1K的数据缓冲
byte[] bs = new byte[1024];
// 读取到的数据长度
int len;
// 输出的文件流保存到本地文件
File tempFile = new File(path);
if (!tempFile.exists()) {
tempFile.mkdirs();
}
filePath=tempFile.getPath() + File.separator + fileName;
os = new FileOutputStream(filePath);
// 开始读取
while ((len = inputStream.read(bs)) != -1) {
os.write(bs, 0, len);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
// 完毕，关闭所有链接
try {
os.close();
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
resultJSON.put("fileDir",fileDir);
resultJSON.put("filePath",filePath);
resultJSON.put("size",file.getSize());
resultJSON.put("code",0);
return resultJSON;
}
/**
* 根据文件路径删除文件
* @param deleteFilePath
* @return
*/
@RequestMapping("/deleteFile.do")
public JSONObject deleteFile(@RequestParam("deleteFilePaths")String[] deleteFilePaths){
JSONObject resultJSON=new JSONObject();
JSONArray dataArray=new JSONArray();
try {
for(String deleteFilePath:deleteFilePaths){
JSONObject fileDelete=new JSONObject();
if(!"".equals(deleteFilePath)&&null!=deleteFilePath){
File file=new File(deleteFilePath);
if(file.exists()&&file.isFile()){
//删除文件
file.delete();
//判断文件夹是否为空为空删除该文件夹
File fileParent=new File(file.getParent());
if(fileParent.isDirectory()&&fileParent.listFiles().length==0){
fileParent.delete();
}
fileDelete.put("path",deleteFilePath);
fileDelete.put("code",0);
fileDelete.put("info","删除成功");
}else{
fileDelete.put("path",deleteFilePath);
fileDelete.put("code", 1);
fileDelete.put("info", "该文件不存在");
}
dataArray.add(fileDelete);
}
}
resultJSON.put("code",0);
resultJSON.put("info","删除成功");
resultJSON.put("data", dataArray);
} catch (Exception e){
e.printStackTrace();
resultJSON.put("code", 1);
resultJSON.put("info",e.getMessage());
}
return resultJSON;
}
}
2169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
