layui官方文档代码
<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>
<button class="layui-btn" id="testListAction" type="button">开始上传</button>
</div>
js代码
<script>
var files=[];
//JavaScript代码区域
layui.use(['element','upload'], function(){
var $ = layui.jquery
,upload = layui.upload;
//上传
//多文件列表示例
var demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#testList'
,url: '/data/uploadSource' //改成您自己的上传接口
,accept: 'file'
,exts: 'txt|rar|zip|doc|docx|pdf|xls|xlsx' //允许上传的文件类型
,multiple: true
,auto: false
,bindAction: '#testListAction'
,choose: function(obj){
var 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 demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
,done: function(res, index, upload){
if (res.code == 0){
files.push({"fileName":res.filename,"fileUrl":res.fileUrl,"fileSize":res.fileSize});//,"fileUrl":res.fileUrl
var json = JSON.stringify(files);
//将上传的文件信息加入到集合中并转换成json字符串
$("#fileJson").attr("value",json);
var fileUrl = res.fileUrl;
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html('<span>'+fileUrl+'</span>');
tds.eq(4).html(''); //清空操作
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'); //显示重传
}
});
});
</script>
后台controller代码
package com.example.demo1.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
/**
* @author xx
* @version 1.0
* @date 2020/6/21 15:47
*/
@Controller
@RequestMapping(value = "/data")
public class DataController {
@RequestMapping(value="/uploadSource" , method = RequestMethod.POST)
@ResponseBody
public String uploadSource(@RequestParam("file") MultipartFile file) {
System.out.println(file);
String pathString = null;
if(file!=null) {
//获取上传的文件名称
String filename = file.getOriginalFilename();
//文件上传时,chrome与IE/Edge对于originalFilename处理方式不同
//chrome会获取到该文件的直接文件名称,IE/Edge会获取到文件上传时完整路径/文件名
//Check for Unix-style path
int unixSep = filename.lastIndexOf('/');
//Check for Windows-style path
int winSep = filename.lastIndexOf('\\');
//cut off at latest possible point
int pos = (winSep > unixSep ? winSep:unixSep);
if (pos != -1)
filename = filename.substring(pos + 1);
pathString = "E:/upload/" + new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + "_" +filename;//上传到本地
}
try {
File files=new File(pathString);//在内存中创建File文件映射对象
//打印查看上传路径
System.out.println(pathString);
if(!files.getParentFile().exists()){//判断映射文件的父文件是否真实存在
files.getParentFile().mkdirs();//创建所有父文件夹
}
file.transferTo(files);//采用file.transferTo 来保存上传的文件
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return "{\"code\":0, \"msg\":\"success\", \"fileUrl\":\"" + pathString + "\"}";
}
}
上传成功显示页面
返回值问题
layui官方代码要求返回的json格式
{
"code": 0
,"msg": ""
,"data": {
"src": "http://cdn.layui.com/123.jpg"
}
}
获取上传文件到项目里面
@ResponseBody
@RequestMapping(value = "/uploadFile", method = RequestMethod.POST)
public void uploadFile(HttpServletRequest request, HttpServletResponse response , HttpSession session, MultipartFile file) throws Exception{
PageData pd = new PageData(request);
String filename = file.getOriginalFilename();// 文件原名称
String fileSuffix = filename.substring(filename.lastIndexOf("."));//文件类型
String fileType = filename.substring(filename.lastIndexOf(".")+1);//文件后缀
//保存文件
File directory = new File("");// 参数为空
String savePath = directory.getCanonicalPath();
String path = "/upload/commomFile/"+DateTimeUtil.getDate()+"/"+ GuidUtil.getGuid()+fileSuffix;
File files = new File(savePath+path);
if (!files.getParentFile().exists()){
files.getParentFile().mkdirs();
}
file.transferTo(files);
pd.put("name",filename);
pd.put("desnames",filename);
pd.put("file_path",path);
pd.put("file_type",fileType);
pd.put("file_size",files.length());
pd.put("obj_id","");
pd.put("file_suffix",fileSuffix);
pd.put("source",pd.get("type"));
pd.put("order_by","1");
PageData user = (PageData) session.getAttribute("loginUser");
pd.put("create_user",user.get("id"));
pd.put("create_organize",user.get("organize_id"));
pd.put("create_org_cascade",user.get("org_cascade"));
pd.put("create_time", DateTimeUtil.getDateTimeStr());
pd.put("update_time",DateTimeUtil.getDateTimeStr());
uploadService.saveFile(pd);
Json json = new Json();
json.setSuccess(true);
json.setData(pd);
json.setMsg(pd.get("id")+"#"+path+"#"+filename);
this.writeJson(response,json);
}
上传到本地文件
/**
* @Description: uploadFile
* @Param: [request, response, session, file]
* @return: void
* @Author: x
* @Date: 2019-3-11 11:04
*/
@RequestMapping(value = "/uploadfile", method = RequestMethod.POST)
@ResponseBody
public String uploadSource(@RequestParam("file") MultipartFile file) {
System.out.println(file);
String pathString = null;
if(file!=null) {
//获取上传的文件名称
String filename = file.getOriginalFilename();
//文件上传时,chrome与IE/Edge对于originalFilename处理方式不同
//chrome会获取到该文件的直接文件名称,IE/Edge会获取到文件上传时完整路径/文件名
//Check for Unix-style path
int unixSep = filename.lastIndexOf('/');
//Check for Windows-style path
int winSep = filename.lastIndexOf('\\');
//cut off at latest possible point
int pos = (winSep > unixSep ? winSep:unixSep);
if (pos != -1)
filename = filename.substring(pos + 1);
pathString = "E:/upload/" + new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + "_" +filename;//上传到本地
}
try {
File files=new File(pathString);//在内存中创建File文件映射对象
//打印查看上传路径
System.out.println(pathString);
if(!files.getParentFile().exists()){//判断映射文件的父文件是否真实存在
files.getParentFile().mkdirs();//创建所有父文件夹
}
file.transferTo(files);//采用file.transferTo 来保存上传的文件
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return "{\"code\":0, \"msg\":\"success\", \"fileUrl\":\"" + pathString + "\"}";
}
综合修改了一下
/**
* @Description: LocalFile
* @Param: [request, response, session, file]
* @return: void
* @Author: x
* @Date: 2019-6-20 15:34
*/
//上传app
@RequestMapping(value = "/LocalFile", method = RequestMethod.POST)
@ResponseBody
public HashMap<String, Object> uploadLocalFile(HttpServletRequest request, HttpServletResponse response , HttpSession session, @RequestParam("file") MultipartFile file) throws Exception{
PageData pd = new PageData(request);
String filename = file.getOriginalFilename();// 文件原名称
String fileSuffix = filename.substring(filename.lastIndexOf("."));//文件类型
String fileType = filename.substring(filename.lastIndexOf(".")+1);//文件后缀
//保存文件
// String savePath= request.getSession().getServletContext().getRealPath("/");//地址在本项目
String savePath= "E:/AppFile/";//现在在本地E盘AppFile
// String savePath = ParaUtil.localName;
String path = ParaUtil.common+ DateTimeUtil.getDate()+"/";
String appfile = GuidUtil.getGuid()+fileSuffix;
// System.out.println(appfile);
File files = new File(savePath+path+appfile);
if (!files.getParentFile().exists()){
files.getParentFile().mkdirs();
}
file.transferTo(files);
// return "{\"code\":0, \"msg\":\"success\", \"fileUrl\":\"" + path + "\"}";
//放入集合
List<String> filelist =new ArrayList<String>();
filelist.add(savePath);
filelist.add(path);
filelist.add(appfile);
//转换格式返回文件名和存放文件夹
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("code", 0);
map.put("msg", "操作成功");
map.put("data", filelist);
return map;
}
页面显示
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../../system/admin/top.jsp"%>
<form class="layui-form" action="" id="form">
<table class="layui-table" style="width:95%;margin:10px auto;">
<tr>
<td colspan="4" class="tabletitle">
版本更新
</td>
</tr>
<tr>
<td align="right">版本:<span style="color: red">*</span></td>
<td><input type="text" name="version" id="version" lay-verify="required|field_len50" autocomplete="off" placeholder="请输入版本" class="layui-input"></td>
<td align="right">下载地址:<span style="color: red">*</span></td>
<td><input type="text" name="url" id="url" lay-verify="required|field_len50|url" autocomplete="off" placeholder="请输入下载地址" class="layui-input"></td>
<input type="hidden" name="name" id="name" lay-verify="name" autocomplete="off" placeholder="请输入名称" class="layui-input">
<input type="hidden" name="path" id="path" lay-verify="path" autocomplete="off" placeholder="请输入本地地址" class="layui-input">
</tr>
<tr>
<div class="layui-upload">
<td align="center" colspan="2"><button type="button" class="layui-btn layui-btn-normal" id="testList">请选择APK文件</button></td>
<td align="center" colspan="2"><button type="button" class="layui-btn" id="testListAction">开始上传</button></td>
<div class="layui-upload-list">
<%-- <table class="layui-table">--%>
<%-- <thead>--%>
<tr>
<td align="center">文件名</td>
<td align="center">大小</td>
<td align="center">状态</td>
<td align="center">操作</td>
</tr>
<%-- </thead>--%>
<tbody id="demoList"></tbody>
<%-- </table>--%>
</div>
</div>
</tr>
<tr>
<td align="center" colspan="4">
<button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="submit_form">保存</button>
<button class="layui-btn layui-btn-danger layui-btn-sm" id="cancel">取消</button>
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/plugins/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/commonLayer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/ajaxReq.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/wdata.js"></script>
<script>
layui.use('upload', function() {
var $ = layui.jquery
,upload = layui.upload;
//多文件列表示例
var demoListView = $('#demoList')
, uploadListIns = upload.render({
elem: '#testList'
, url: '${pageContext.request.contextPath}/system/version/LocalFile' //改成您自己的上传接口
<%--, url: '${pageContext.request.contextPath}/common/upload/uploadLocalFile' //改成您自己的上传接口--%>
, accept: 'file'
,exts: 'apk|zip|rar|7z' //只允许上传apk文件
// ,exts: 'zip|rar|7z' //只允许上传压缩文件
, multiple: true
, auto: false
, bindAction: '#testListAction'
, choose: function (obj) {
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function (index, file, result) {
var tr = $(['<tr id="upload-' + index + '">'
, '<td align="center">' + file.name + '</td>'
, '<td align="center">' + (file.size / 1024).toFixed(1) + 'kb</td>'
, '<td align="center">等待上传</td>'
, '<td align="center">'
, '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
, '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
, '</td align="center">'
, '</tr align="center">'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
//删除文件显示选择文件按钮
$('#testList').show();
});
demoListView.append(tr);
});
//选择文件隐藏选择文件按钮(做多选不隐藏)
$('#testList').hide();
}
, done: function (res, index, upload) {
//上传成功隐藏开始上传按钮
$('#testListAction').hide();
// console.log(res);
// console.log(index);
// console.log(upload);
if (res.code == 0){
// files.push({"fileName":res.filename,"fileUrl":res.fileUrl,"fileSize":res.fileSize});//,"fileUrl":res.fileUrl
// var json = JSON.stringify(files);
// //将上传的文件信息加入到集合中并转换成json字符串
// $("#fileJson").attr("value",json);
//
// var fileUrl = res.fileUrl;
// var tr = demoListView.find('tr#upload-'+ index)
// ,tds = tr.children();
// tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
// tds.eq(3).html('<span>'+fileUrl+'</span>');
// tds.eq(4).html(''); //清空操作
// return delete this.files[index]; //删除文件队列已经上传成功的文件
// if (res.files.file) { //上传成功
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html('<span>'+res.data[0]+res.data[1]+res.data[2]+'</span>');
$("#path").val(res.data[0]+res.data[1]);
$("#name").val(res.data[2]);
tds.eq(4).html(''); //清空操作
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'); //显示重传
}
});
});
var form,layer, $,laydate;
layui.use(['form','laydate'], function(){
form = layui.form;
layer = layui.layer;
$ = layui.$;
laydate = layui.laydate;
//初始化日期
// initDateType("dtime",true);
laydate.render({
elem:'#dtime'
,trigger: 'click'// 解决一闪而过的问题
,value: new Date()//默认当前时间
});
laydate.render({
elem:'#stdtime'
,trigger: 'click'// 解决一闪而过的问题
,value: new Date()//默认当前时间
});
$('#cancel').on('click',function (){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
})
//自定义验证规则
// form.verify(form_verify);
form.verify({
name: function(value){
if (!value) {
return '请上传APP文件!';
}
},
path: function(value){
if (!value) {
return '请上传APP文件!';
}
}
});
//监听提交
form.on('submit(submit_form)', function(data){
// console.log(data);
$.ajax({
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "${pageContext.request.contextPath}/system/version/save" ,//url
data: $('#form').serialize(),
success: function (res) {
if (res.success) {
layer.msg("数据保存成功。", {time: 2000});
setOpenCloseParam("reload");
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}else{
if(res.loseSession=='loseSession'){
loseSession(res.msg,res.url)
}else{
layer.msg(res.msg, {time: 2000});
}
}
},
error : function() {
layer.msg("数据保存失败。", {time: 2000});
}
});
return false;
});
});
</script>
<%@include file="../../system/admin/bottom.jsp"%>