zyupload上传实例
控制器：
package com.exam.controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.UUID;
/**
* @author 19417
*/
@RestController
public class FileController {
private final String filepathDir = "F:\\exam\\src\\main\\resources\\static\\images\\";
@PostMapping("/upload")
public String uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
//旧的文件名称
String oldfilename = file.getOriginalFilename();
//获取文件扩展名
String extname = oldfilename.substring(file.getOriginalFilename().lastIndexOf("."));
//防止重名
String newfliename = UUID.randomUUID().toString() + extname;
//返回是整个文件的大小
String savepath = filepathDir + newfliename;
File file1 = new File(savepath);
if(!file1.exists()){
file1.createNewFile();
}
Integer n= FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(new File(savepath)));
long size = file.getSize();
if(n!=size){
return "文件上传失败！";
}else {
return savepath;
}
}
}
页面：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zyupload上传实例title>
<link rel="stylesheet" href="lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<div id="zyupload" class="zyupload">div>
div>
div>
<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8">script>
<script src="js/glubo.js" charset="utf-8">script>
<script src="lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8">script>
<script type="text/javascript">
$(function () {
// 初始化插件
$("#zyupload").zyUpload({
width: "650px", // 宽度
height: "400px", // 宽度
itemWidth: "140px", // 文件项的宽度
itemHeight: "115px", // 文件项的高度
url: httpurl+"/files/upload", // 上传文件的路径
fileType: ["jpg", "png", "txt", "js", "exe","doc","docx"],// 上传文件的类型
fileSize: 51200000, // 上传文件的大小
multiple: true, // 是否可以多个文件上传
dragDrop: true, // 是否可以拖动上传文件
tailor: true, // 是否可以裁剪图片
del: true, // 是否可以删除文件
finishDel: false, // 是否在上传文件完成后删除预览
/* 外部获得的回调接口 */
onSelect: function (selectFiles, allFiles) { // 选择文件的回调方法 selectFile:当前选中的文件 allFiles:还没上传的全部文件
console.info("当前选择了以下文件：");
console.info(selectFiles);
},
onDelete: function (file, files) { // 删除一个文件的回调方法 file:当前删除的文件 files:删除之后的文件
console.info("当前删除了此文件：");
console.info(file.name);
},
onSuccess: function (file, response) { // 文件上传成功的回调方法
console.info("此文件上传成功：");
console.info(file.name);
console.info("此文件上传到服务器地址：");
console.info(response);
$("#uploadInf").append("上传成功，文件地址是："
+ response + "");
},
onFailure: function (file, response) { // 文件上传失败的回调方法
console.info("此文件上传失败：");
console.info(file.name);
},
onComplete: function (response) { // 上传完成的回调方法
console.info("文件上传完成");
console.info(response);
}
});
});
script>
body>
html>
配置信息：
// 初始化插件
$("#zyupload").zyUpload({
width: "650px", // 宽度
height: "400px", // 宽度
itemWidth: "140px", // 文件项的宽度
itemHeight: "115px", // 文件项的高度
url: "api/upload", // 上传文件的路径
fileType: ["jpg", "png", "txt", "js", "exe",doc,docx],// 上传文件的类型
fileSize: 51200000, // 上传文件的大小
multiple: true, // 是否可以多个文件上传
dragDrop: true, // 是否可以拖动上传文件
tailor: true, // 是否可以裁剪图片
del: true, // 是否可以删除文件
finishDel: false, // 是否在上传文件完成后删除预览
/* 外部获得的回调接口 */
onSelect: function (selectFiles, allFiles) { // 选择文件的回调方法 selectFile:当前选中的文件 allFiles:还没上传的全部文件
console.info("当前选择了以下文件：");
console.info(selectFiles);
},
onDelete: function (file, files) { // 删除一个文件的回调方法 file:当前删除的文件 files:删除之后的文件
console.info("当前删除了此文件：");
console.info(file.name);
},
onSuccess: function (file, response) { // 文件上传成功的回调方法
console.info("此文件上传成功：");
console.info(file.name);
console.info("此文件上传到服务器地址：");
console.info(response);
$("#uploadInf").append("上传成功，文件地址是："
+ response + "");
},
onFailure: function (file, response) { // 文件上传失败的回调方法
console.info("此文件上传失败：");
console.info(file.name);
},
onComplete: function (response) { // 上传完成的回调方法
console.info("文件上传完成");
console.info(response);
}
});
下载地址