layui上傳文件最全版
前幾天做一個文件上傳功能，結合layui看了看文檔總結出來一份給大家分享一下。你需要引入layui的ui包，這裏就不在敘述了。
html：
<div class="layuimini-container">
<div class="layui-btn-group">
<button id="downloadAdd" class="layui-btn data-add-btn">添加</button>
</div>
<table class="layui-table" id="currentTableId" lay-filter="currentTableFilter"></table>
<div id="laypage"></div>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">刪除</a>
</script>
</div>
前端代碼：
我是觸發downloadAdd點擊添加的時候彈出的彈出層
layui.use(['form', 'upload', 'table','common', 'element', 'laypage'], function () {
const $ = layui.jquery
const table = layui.table
const common = layui.common
const layer = layui.layer
const upload = layui.upload
const form = layui.form
const element = layui.element
const laypage = layui.laypage
$("#downloadAdd").click(function () {
layer.open({
type: 1,
title: "上傳文件",
skin: 'layui-layer-rim',
area: ['500px', '600px'],
content: '<div style="padding: 20px">\n' +
' <form class="layui-form" enctype="multipart/form-data">\n' +
' <div class="layui-form-item">\n' +
' <label class="layui-form-label">上傳文件</label>\n' +
' <div class="layui-input-inline uploadHeadImage">\n' +
' <div class="layui-upload-drag" id="uploadFile">\n' +
' <i class="layui-icon"></i>\n' +
' <p>點擊上傳文件，或將文件拖拽到此處！</p>\n' +
' </div>\n' +
' </div>\n' +
' <input type="text" id="fileName" style="height: 17px;margin-left: 24%;width: 75%;border: none;display:none;" disabled="disabled" class="layui-input">\n' +
' <div class="layui-input-inline">\n' +
' <div id="uploadResult" class="layui-upload-list">\n' +
' </div>\n' +
' </div>\n' +
' </div>\n' +
' <div class="layui-form-item">\n' +
' <label class="layui-form-label">文件名稱</label>\n' +
' <div class="layui-input-block">\n' +
' <input type="text" id="title" name="title" placeholder="姓名" required lay-verify="required" class="layui-input">\n' +
' <input type="text" id="urlAddress" name="urlAddress" style="display:none;" class="layui-input">\n' +
' <input type="text" id="fileSize" name="fileSize" style="display:none;" class="layui-input">\n' +
' <input type="text" id="fileType" name="fileType" style="display:none;" class="layui-input">\n' +
' </div>\n' +
' </div>\n' +
' <div class="layui-form-item layui-form-text">\n' +
' <label class="layui-form-label">文件詳情</label>\n' +
' <div class="layui-input-block">\n' +
' <textarea id="details" placeholder="請輸入詳情內容" name="details" required lay-verify="required" class="layui-textarea"></textarea>\n' +
' </div>\n' +
' </div>\n' +
' <div class="layui-inline"> \n' +
' <label class="layui-form-label">文件類別</label> \n' +
' <div class="layui-input-inline"> \n' +
' <select id="type" name="type" lay-search="" required lay-verify="required"> \n' +
' <option value="">選擇類型</option> \n' +
' <option value="1">EAST模型</option> \n' +
' <option value="2">培訓資料</option> \n' +
' <option value="3">軟件工具</option> \n' +
' </select> \n' +
' </div> \n' +
' </div> \n' +
' <div style="text-align: center;margin-top: 30px;">\n' +
' <button class="layui-btn layui-btn-normal" id="commit" lay-submit lay-filter="add_download">保存</button>\n' +
' </div>\n' +
' </form>\n' +
'</div>'
});
//上傳文件
var uploadInst = upload.render({
elem: '#uploadFile', //綁定元素
url: layui.cache.host + '/download/upload', //上傳接口
method: 'POST',
auto: true, //是否直接提交，true直接提交，false指定按鈕提交，和bindAction:''一起使用
accept: 'file',
// bindAction: '#commit', //綁定提交按鈕，這裏沒有綁定
size: 0,
multiple: false,
before: function(obj) {
layer.load();
},
done: function(data, index, upload) {//上傳完畢回調
layer.closeAll('loading');
if (data.code === "0000") {
$("#fileName").show();
$("#fileName").val(data.data.fileName);
$("#urlAddress").val(data.data.urlAddress);
$("#fileSize").val(data.data.fileSize);
$("#fileType").val(data.data.fileType);
layer.msg("上傳成功！", {
icon: 6
});
} else {
layer.msg("上傳失敗，請稍後重試！", {
icon: 5
});
}
}
, error: function() {//請求異常回調
layer.closeAll('loading');
layer.msg('網絡異常，請稍後重試！');
}
});
form.render();
});
//添加提交
layui.form.on('submit(add_download)', function (data) {
var fileName = $("#fileName").val();
if(fileName == "" || fileName == null || fileName == undefined){
layer.msg("請上傳附件！");
return false;
}
common.ajaxPost(layui.cache.host + '/download/save', data.field, function (res) {
layer.alert(JSON.stringify(res));
window.parent.location.reload();
});
layer.closeAll();
});
});
後端代碼：
@PostMapping("upload")
@ResponseBody
public HcRes upload(@RequestParam("file") MultipartFile file,
HttpServletRequest request, HttpServletResponse response){
Map<String,Object> map = new HashMap<String, Object>();
String filePath = null;
long fileSize = 0;
try {
String fileName = file.getOriginalFilename();
filePath = ExcelUtils.uploads(request, path);//調用上傳方法
fileSize = ExcelUtils.fileSize(request, filePath);//獲取文件大小
filePath = filePath.substring(filePath.lastIndexOf("/")+1);
filePath = filePath.replace("\\", "/");
// downloadCenter.setUrlAddress(filePath); //保存數據庫
map.put("urlAddress", filePath);//路徑用於保存數據庫
double d = fileSize/1024/1024; file 單位轉成兆保留兩位小數
DecimalFormat df = new DecimalFormat("#.00");
String format = df.format(d);
if(".00".equals(format)){
// downloadCenter.setFileSize("0.01M");
map.put("fileSize", "0.01M");
}else{
// downloadCenter.setFileSize(format);
map.put("fileSize", format+"M");
}
String[] split = filePath.split("\\.");
// downloadCenter.setFileType("."+split[1]);
map.put("fileType", "."+split[1]);
map.put("fileName", fileName);
return HcRes.builder().code(Const.SUCESS_RES).data(map).msg("").build(); //將名稱路徑類型返回給前端，根據也許需求
} catch (Exception e) {
e.printStackTrace();
return HcRes.builder().code(e.getMessage()).msg(e.getMessage()).build();
}
}
上傳方法：
public static String uploads(HttpServletRequest request, String uploadPath) throws Exception {
String filePath = null;
if (ServletFileUpload.isMultipartContent(request)) {
uploadPath = uploadPath + File.separator;
File file = new File(uploadPath);
if (!file.isDirectory()) {
boolean result = file.mkdirs();
if (!result) {
throw new Exception("文件上傳文件夾創建失敗");
}
}
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
for (Iterator<String> fileNames = multiRequest.getFileNames(); fileNames.hasNext(); ) {
MultipartFile multipartFile = multiRequest.getFile(fileNames.next());
if (multipartFile.isEmpty()) {
continue;
}
String fileName;
fileName = multipartFile.getOriginalFilename();
if(fileName.indexOf('\\') > 0){
fileName = fileName.substring(fileName.lastIndexOf("\\")+1);
}
filePath = (uploadPath + uuid() + fileName);
multipartFile.transferTo(new File(filePath));
}
}
return filePath;
}
計算文件大小：
public static long fileSize(HttpServletRequest request, String uploadPath) throws Exception {
File file = new File(uploadPath);
if (!file.exists() || !file.isFile()) {
System.out.println("文件不存在");
return -1;
}
return file.length();
}
根據業務需求進行相應的處理