先看一下实现效果
上传中进度条
上传完成之后效果
现在开始代码实现(新增页面)
首先需要把js css Uploader.swf 等引入项目中，具体下载地址请看 http://fex.baidu.com/webuploader/download.html
引入地址兼容ie8的情况下，需要加上强制兼容ie模式
接下来复制下边代码到你页面上(选择文件 开始上传用的是layui按钮样式，webuploader原始样式太大太丑了，无奈啊)
<div style="width: 100%; height: 300px; border: 1px solid white;float:left;">
<div style="text-align: center;margin-top: 10px;"><span><strong>原文上传</strong></span><span style="color:#F00;">(只可上传五个原文，支持常用文件格式)</span></div>
<div class="container" style="margin-top: 10px;">
<div id="uploader" class="wu-example">
<div id="thelist" class="uploader-list"></div>
<div class="btns" style="margin-rop:10px;">
<div id="picker" class="layui-btn layui-btn-xs layui-btn-normal" style="float: left;margin-right: 20px;width:92px;">选择文件</div>
<input id="ctlBtn" class="layui-btn layui-btn-xs layui-btn-normal" style="width:92px;" value="开始上传" />
</div>
</div>
</div>
</div>
接下来复制js到你页面上(里边上传附件个数 大小等限制如下，具体设置请看上边官网地址api)
jQuery(function() {
var $ = jQuery,
$list = $('#thelist'),
$btn = $('#ctlBtn'),
state = 'pending',
uploader;
uploader = WebUploader.create({
// swf文件路径
swf: cxt +'webuploader/dist/Uploader.swf',
// 文件接收服务端。
server: cxt +'fileManage/tHsapDaAttachment/upload',
formData : {
token:token,source:'t_hsap_da_wenshu',daid:id,datype:1
},
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,
//method: 'POST'
fileNumLimit: 5,
fileSizeLimit: 100*1024*1024,
duplicate: false //可以重复上传
});
// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
$list.append( '<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'<p class="remove-this" style="display: inline-block;">删除</p>' +
'</div>' );
// $list.append('<tr class="item"><td class="info">' + file.name + '</td><td>' + '' + '</td><td class="state">' + '等待上传...' + '</td></tr>');
});
// 文件上传之前修改formData中数据
uploader.on('uploadBeforeSend',function (obj,data,headers) {
data.modelId = $("#modleId").val();
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo( $li ).find('.progress-bar');
}
$li.find('p.state').attr('text','上传中');
$percent.css( 'width', percentage * 100 + '%' );
});
uploader.on( 'uploadSuccess', function( file , response ) {
$( '#'+file.id ).find('p.state').html('已上传');
$( '#'+file.id ).find('p.remove-this').attr('id',response.id);//给删除按钮上添加标记 表示已经上传附件,删除的时候需要走后台
});
uploader.on( 'uploadError', function( file ) {
$( '#'+file.id ).find('p.state').html('上传出错');
});
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').fadeOut();
});
uploader.on( 'all', function( type ) {
if ( type === 'startUpload' ) {
state = 'uploading';
} else if ( type === 'stopUpload' ) {
state = 'paused';
} else if ( type === 'uploadFinished' ) {
state = 'done';
}
if ( state === 'uploading' ) {
$btn.attr('text','暂停上传');
} else {
$btn.attr('text','开始上传!');
}
});
uploader.on('error', function (handler,file) {
if (handler == "Q_EXCEED_NUM_LIMIT") {
layer.msg("最多传5个附件!");
} else if (handler == "F_DUPLICATE") {
layer.msg("文件已存在队列中!");
}else if (handler == "Q_TYPE_DENIED") {
layer.msg("文件类型不满足!");
}else if (handler == "F_EXCEED_SIZE") {
layer.msg("文件大小不能超过100MB!");
}
});
$btn.on( 'click', function() {
if ( state === 'uploading' ) {
uploader.stop();
} else {
uploader.upload();
}
});
$('#thelist').on('click', '.remove-this', function() {
var del_msg=$(this);//ajax 中 this 会改变
var del_id=$(this).attr('id');//已上传标记
var fileItem = $(this).parent();
var id = $(fileItem).attr("id");
var daid=$("#id").val();
if(del_id != 'undefined' && typeof(del_id) != "undefined"){
//调用ajax删除附件表信息及附件
$.ajax({
type: "post",
url : cxt +'fileManage/tHsapDaAttachment/remove',
async : false, //同步执行
data : {daid:daid,fileId:del_id,token:token},
dataType : "json",
success : function(data) {
if(data.status == "success"){
uploader.removeFile(id, true);
$(fileItem).fadeOut(function() {
$(fileItem).remove();
});
}else{
top.layer.msg('删除附件失败', {
icon: 0,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
});
}
},error: function() {
top.layer.msg('删除附件失败', {
icon: 0,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
});
}
});
}else{
uploader.removeFile(id, true);
$(fileItem).fadeOut(function() {
$(fileItem).remove();
});
}
});
});
后台方法(后台方法可以参考，逻辑自己实现)需要maven中引入hutool
<!-- util工具类 20200910 wyf-->
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.3.10</version>
</dependency>
public final static String UPLOAD_FILE_PATH = "G:/app-mybatis/fileDownload/";//后期优化加到配置文件中
/**
*
* 简要说明：附件上传工具类
* 编写者：wyf
* 创建时间：2020-09-10
* @param
* @return
* @throws Exception
* @throws IllegalStateException
*/
@PostMapping(value = "upload")
@ResponseBody
public String uploadDocs(MultipartFile file) throws IllegalStateException, Exception{
String token=request.getParameter(SystemCons.TOKEN_PARAM);//获取token
String daid=request.getParameter("daid");//主表id
String source=request.getParameter("source");//来自哪张表
String datype=request.getParameter("datype");//什么类型 1
Map<String, Object> uploadData = new HashMap<String, Object>();
//2020/08/24/T_HSAP_DA_ATTACHMENT_3245839_111.jpg
//先保存数据,然后再上传附件
String fileName = file.getOriginalFilename();
String fileType = fileName.split("\\.")!=null && fileName.split("\\.").length==2?fileName.split("\\.")[1]:"";
THsapDaAttachment tHsapDaAttachment=new THsapDaAttachment();
String id=RandomUtil.randomUUID();
tHsapDaAttachment.setId(id);
tHsapDaAttachment.setDaid(daid);
tHsapDaAttachment.setAttachname(fileName);
tHsapDaAttachment.setApptype(fileType);
tHsapDaAttachment.setDatype(Integer.parseInt(datype));
tHsapDaAttachment.setCreattime(System.currentTimeMillis());
String uploadname=DateUtil.thisYear()+"/"+DateUtil.thisMonth()+"/"+DateUtil.thisDayOfMonth()+"/T_HSAP_DA_ATTACHMENT_"+id+"_"+fileName;
tHsapDaAttachment.setUploadname(uploadname);
tHsapDaAttachment.setSource(source);
tHsapDaAttachmentService.insert(tHsapDaAttachment);
FileOperation.createFolder(UPLOAD_FILE_PATH+DateUtil.thisYear()+"/"+DateUtil.thisMonth()+"/"+DateUtil.thisDayOfMonth());//如果该父级没有文件夹，则循环创建
//然后保存附件到对应目录下 hutool工具类上传方法
File saveFile = new File(UPLOAD_FILE_PATH+uploadname);
file.transferTo(saveFile); //进行写入文件
uploadData.put("code", 0);
uploadData.put("msg", "上传成功");
uploadData.put("data", "0");
uploadData.put("id",id);
JSONObject json = new JSONObject(uploadData);
return json.toString();
}
/**
*
* 简要说明：删除信息
* 编写者：
* 创建时间：2020-09-10
* @param 说明
* @return 说明
*/
@PostMapping("remove")
@ResponseBody
public R remove() {
String fileId=request.getParameter("fileId");//附件表id
String daid=request.getParameter("daid");//关联表id
//先获取附件路径,然后删除附件再删除数据
THsapDaAttachment tHsapDaAttachment=tHsapDaAttachmentService.selectById(fileId);
String filePath=UPLOAD_FILE_PATH+tHsapDaAttachment.getUploadname();
FileUtil.del(filePath);//删除附件 建议用hutool Io工具类 很好使
boolean result = tHsapDaAttachmentService.deleteById(fileId);
if (result) {
R r=R.ok();
r.put("status", "success");
return r;
} else {
R r=R.error();
r.put("status", "error");
return r;
}
}
新增方法实现，接下来修改页面及方法
修改页面
<div style="text-align: center;margin-top: 10px;"><span><strong>原文上传</strong></span><span style="color:#F00;">(只可上传五个原文，支持常用文件格式)</span></div>
<div class="container" style="margin-top: 10px;">
<div class="wu-example" id="uploader">
<div class="uploader-list" id="thelist">
<div class="item" th:each="file,Stat:${fileList}" th:id="UPDATE_FILE">
<h4 class="info" th:text="${file.attachname}"></h4>
<p class="state">已上传</p>
<p th:id="${file.id}" class="remove-this" style="display: inline-block;">删除</p>
</div>
</div>
<div class="btns" style="margin-rop:10px;">
<div class="layui-btn layui-btn-xs layui-btn-normal" id="picker" style="float: left;margin-right: 20px;width:92px;">选择文件</div>
<input class="layui-btn layui-btn-xs layui-btn-normal" id="ctlBtn" style="width:92px;" value="开始上传">
</div>
</div>
</div>
修改js
jQuery(function() {
var $ = jQuery,
$list = $('#thelist'),
$btn = $('#ctlBtn'),
state = 'pending',
uploader;
uploader = WebUploader.create({
// swf文件路径
swf: cxt +'webuploader/dist/Uploader.swf',
// 文件接收服务端。
server: cxt +'fileManage/tHsapDaAttachment/upload',
formData : {
token:token,source:'t_hsap_da_wenshu',daid:id,datype:1
},
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false,
//method: 'POST'
fileNumLimit: 5,
fileSizeLimit: 100*1024*1024,
duplicate: false //可以重复上传
});
// 当有文件被添加进队列的时候
uploader.on( 'fileQueued', function( file ) {
$list.append( '<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'<p class="remove-this" style="display: inline-block;">删除</p>' +
'</div>' );
// $list.append('<tr class="item"><td class="info">' + file.name + '</td><td>' + '' + '</td><td class="state">' + '等待上传...' + '</td></tr>');
});
// 文件上传之前修改formData中数据
uploader.on('uploadBeforeSend',function (obj,data,headers) {
data.modelId = $("#modleId").val();
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo( $li ).find('.progress-bar');
}
$li.find('p.state').attr('text','上传中');
$percent.css( 'width', percentage * 100 + '%' );
});
uploader.on( 'uploadSuccess', function( file , response ) {
$( '#'+file.id ).find('p.state').html('已上传');
$( '#'+file.id ).find('p.remove-this').attr('id',response.id);//给删除按钮上添加标记 表示已经上传附件,删除的时候需要走后台
});
uploader.on( 'uploadError', function( file ) {
$( '#'+file.id ).find('p.state').html('上传出错');
});
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').fadeOut();
});
uploader.on( 'all', function( type ) {
if ( type === 'startUpload' ) {
state = 'uploading';
} else if ( type === 'stopUpload' ) {
state = 'paused';
} else if ( type === 'uploadFinished' ) {
state = 'done';
}
if ( state === 'uploading' ) {
$btn.attr('text','暂停上传');
} else {
$btn.attr('text','开始上传!');
}
});
uploader.on('error', function (handler,file) {
if (handler == "Q_EXCEED_NUM_LIMIT") {
layer.msg("最多传5个附件!");
} else if (handler == "F_DUPLICATE") {
layer.msg("文件已存在队列中!");
}else if (handler == "Q_TYPE_DENIED") {
layer.msg("文件类型不满足!");
}else if (handler == "F_EXCEED_SIZE") {
layer.msg("文件大小不能超过100MB!");
}
});
$btn.on( 'click', function() {
if ( state === 'uploading' ) {
uploader.stop();
} else {
uploader.upload();
}
});
$('#thelist').on('click', '.remove-this', function() {
var del_msg=$(this);//ajax 中 this 会改变
var del_id=$(this).attr('id');//已上传标记
var fileItem = $(this).parent();
var id = $(fileItem).attr("id");
var daid=$("#id").val();
if(del_id != 'undefined' && typeof(del_id) != "undefined"){
//调用ajax删除附件表信息及附件
$.ajax({
type: "post",
url : cxt +'fileManage/tHsapDaAttachment/remove',
async : false, //同步执行
data : {daid:daid,fileId:del_id,token:token},
dataType : "json",
success : function(data) {
if(data.status == "success"){
//如果是修改回显的附件,则直接删除div即可,如果不是,则需要走uploader删除方法(删除文件队列 删除div等操作)
if(id=="UPDATE_FILE"){
del_msg.parent().remove();
}else{
uploader.removeFile(id, true);
$(fileItem).fadeOut(function() {
$(fileItem).remove();
});
}
}else{
top.layer.msg('删除附件失败', {
icon: 0,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
});
}
},error: function() {
top.layer.msg('删除附件失败', {
icon: 0,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
});
}
});
}else{
//如果是修改回显的附件,则直接删除div即可,如果不是,则需要走uploader删除方法(删除文件队列 删除div等操作)
if(id=="UPDATE_FILE"){
del_msg.parent().remove();
}else{
uploader.removeFile(id, true);
$(fileItem).fadeOut(function() {
$(fileItem).remove();
});
}
}
});
});
经过一下午调试终于达到预想的效果，如果有什么问题随时@我
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
