SSM图片上传到本地，回显，修改图片名，删除
**
SSM图片上传到本地，回显与删除
**@TOC
欢迎使用Markdown编辑器
工作中需要写一个上传图片和删除图片的功能，自己在这里做个总结，第一次写博客，有什么不对的麻烦大家帮忙改正，废话不多说直接上代码吧！
实体类：
/**
*上传图片实体类
* @author wmd
*/
public class Uploadpictures implements Serializable {
/*id*/
private Integer id;
/*图片名称*/
private String pictureName;
/*图片地址*/
private String pictureAddress;
/*上传人ID*/
private Integer userId;
/*上传人部门ID*/
private Integer departmentId;
/*上传时间*/
private Date uploadTime;
/*修改时间*/
private Date xgTime;
/*状态*/
private Integer state;
/*总记录数*/
private Integer total;
}
接口：
/*上传图片*/
public interface UploadpicturesService {
/*添加图片*/
void addPictures(Uploadpictures up);
/*查询所有图片信息*/
List<Uploadpictures> getAll(Integer num, Integer pageSize);
/*修改图片名称回显查询*/
Uploadpictures findPicture(String id);
/*修改图片名称保存*/
Integer updatePicture(Uploadpictures up);
/*删除图片信息*/
Integer deletePicture(String id);
/*删除多条图片信息*/
Integer deleteAllPicture(int id);
}
实现类：
@Service
public class UploadpicturesServiceImpl implements UploadpicturesService {
@Autowired
private UploadpicturesMapper uploadpicturesMapper;
@Override
public void addPictures(Uploadpictures up) {
try {
uploadpicturesMapper.addPictures(up);
}catch (Exception e){
e.printStackTrace();
}
}
@Override
public List<Uploadpictures> getAll(Integer num, Integer pageSize) {
return uploadpicturesMapper.getAll(num,pageSize);
}
@Override
public Uploadpictures findPicture(String id) {
return uploadpicturesMapper.findPicture(id);
}
@Override
public Integer updatePicture(Uploadpictures up) {
return uploadpicturesMapper.updatePicture(up);
}
@Override
public Integer deleteAllPicture(int id) {
return uploadpicturesMapper.deleteAllPicture(id);
}
@Override
public Integer deletePicture(String id) {
return uploadpicturesMapper.deletePicture(id);
}
}
mapper接口：
/**
* 上传图片
* @author wmd
*
*/
public interface UploadpicturesMapper {
/*添加图片*/
void addPictures(Uploadpictures up);
/*查询所有图片信息*/
List<Uploadpictures> getAll(@Param("num") Integer num, @Param("pageSize") Integer pageSize);
/*修改回显查询*/
Uploadpictures findPicture(String id);
/*修改图片名称保存*/
Integer updatePicture(Uploadpictures up);
/*删除图片信息*/
Integer deletePicture(String id);
/*删除多条图片信息*/
Integer deleteAllPicture(int id);
}
mapper.xml：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zheng.oa.dao.mapper.UploadpicturesMapper">
<resultMap id="BaseResultMap" type="com.zheng.oa.dao.model.Uploadpictures">
<id column="id" property="id" />
<result column="pictureName" property="pictureName" />
<result column="pictureAddress" property="pictureAddress" />
<result column="userId" property="userId" />
<result column="departmentId" property="departmentId" />
<result column="uploadTime" property="uploadTime" />
<result column="state" property="state" />
<result column="xgTime" property="xgTime" />
</resultMap>
<insert id="addPictures" parameterType="com.zheng.oa.dao.model.Uploadpictures">
INSERT into oa_uploadpictures (pictureName,pictureAddress,userId,departmentId,uploadTime) VALUE (#{pictureName},
#{pictureAddress},#{userId},#{departmentId},now())
</insert>
<select id="getAll" resultMap="BaseResultMap">
select id, pictureName,pictureAddress,
(SELECT COUNt(*) FROM oa_uploadpictures up where up.state=0) as total
from oa_uploadpictures where state=0 ORDER BY id desc LIMIT #{num}, #{pageSize};
</select>
<select id="findPicture" resultType="com.zheng.oa.dao.model.Uploadpictures">
SELECT pictureName,pictureAddress FROM `oa_uploadpictures` where id=#{id} and state = 0;
</select>
<update id="updatePicture" parameterType="com.zheng.oa.dao.model.Uploadpictures">
UPDATE oa_uploadpictures
SET pictureName = #{pictureName},xgTime = now() where id = #{id}
</update>
<update id="deletePicture" parameterType="String">
DELETE FROM oa_uploadpictures WHERE id = #{id};
</update>
<update id="deleteAllPicture" parameterType="int">
DELETE FROM oa_uploadpictures WHERE id = #{id};
</update>
</mapper>
controller：
package com.zheng.oa.web.controller;
import com.alibaba.fastjson.JSONObject;
import com.zheng.common.base.BaseResult;
import com.zheng.oa.dao.model.Uploadpictures;
import com.zheng.oa.rpc.api.UploadpicturesService;
import org.apache.commons.io.FilenameUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.List;
import java.util.UUID;
/**
* 图片上传
* @author wmd
*/
@Controller
//@RequestMapping(value = "/uploadpictures")
public class UploadpicturesController {
@Autowired
private UploadpicturesService uploadpicturesService;
//@RequiresPermissions("uploadpictures:picture:list")
@GetMapping("/picture")
public String index() {
return "/manage/electronic.jsp";
}
/*上传图片*/
@RequestMapping(value = "/addPictures", method = RequestMethod.POST)
@ResponseBody
public BaseResult addImg(Uploadpictures up, /*@RequestParam(value="file",required=false) MultipartFile[]*/ MultipartFile file,
HttpServletRequest request)throws Exception{
Integer code = 1;
String message = "";
System.out.println(file+"-------------------");
String path = "";
String PictureName = "";
String fileName = "";
// for (MultipartFile mf : file) {
// if(!mf.isEmpty()){
// 使用UUID给图片重命名，并去掉四个“-”
String name = UUID.randomUUID().toString().replaceAll("-", "");
// 获取文件的扩展名
String ext = FilenameUtils.getExtension(file
.getOriginalFilename());
fileName = name + "." + ext;
// 设置图片上传路径
String url =("D:\\aaa");
System.out.println(url);
// 以绝对路径保存重名命后的图片
file.transferTo(new File(url + "/" + name + "." + ext));
// 把图片存储路径保存到数据库
path+=url +"\\" + name + "." + ext;
// }
// }
System.out.println(uploadpicturesService);
try {
//System.out.println(uploadpicturesService);
up.setPictureAddress(path);
up.setPictureName(up.getPictureName());
System.out.println("aaa");
uploadpicturesService.addPictures(up);
}catch (Exception e) {
e.printStackTrace();
}
// return "redirect:/a";
return new BaseResult(code,message,fileName);
}
/*查询所有图片*/
//@GetMapping("/a")
@RequestMapping("/a")
@ResponseBody
//@ResponseBody
public JSONObject getAll(@RequestParam("pageSize") Integer pageSize, @RequestParam("pageNum") Integer pageNum) throws Exception{
int num = pageNum*pageSize;
int total = 0;
System.out.println(uploadpicturesService);
List<Uploadpictures> upList = uploadpicturesService.getAll(num,pageSize);
/*这个是获取域名，用于拼接到图片路径中用于页面访问，最下面有说明*/
HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
String baseUrl=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + "/";
for (Uploadpictures up : upList){
/*这个切割字符串是把数据库中的路径“D:\aaa\f2608d8aa21b45e1ada6c68431451d93.jpg”中的D:\aaa给切掉 因为这个在SpringMVC中有映射 最下面会讲到*/
up.setPictureAddress(baseUrl + "files/" + up.getPictureAddress().substring(6));
}
if(upList != null && upList.size()>0) total = upList.get(0).getTotal();
JSONObject jsonObject = new JSONObject();
jsonObject.put("total",total);
jsonObject.put("limit", pageSize);
jsonObject.put("offset", pageNum);
jsonObject.put("rows", upList);
return jsonObject;
}
/*修改图片名字回显*/
@RequestMapping("/findPicture")
@ResponseBody
public BaseResult findPicture(String id){
Integer code = 1;
String message = "";
Uploadpictures up = new Uploadpictures();
HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
String baseUrl=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + "/";
try {
up = uploadpicturesService.findPicture(id);
up.setPictureAddress(baseUrl + "files/" + up.getPictureAddress().substring(6));
message="回显查询成功";
}catch (Exception e){
code=0;
message="回显查询失败";
}
return new BaseResult(code,message,up);
}
/*修改图片名字保存*/
@RequestMapping("/updatePicture")
@ResponseBody
public BaseResult updatePicture(Uploadpictures up){
Integer code = 1;
String message = "";
try {
uploadpicturesService.updatePicture(up);
message="修改成功";
}catch (Exception e){
code=0;
message="修改失败";
}
/*JSONObject jsonObject = new JSONObject();
jsonObject.put("code",code);
jsonObject.put("message",message);
jsonObject.put("date","");*/
return new BaseResult(code,message,null);
//return jsonObject.toJSONString();
}
/*删除图片信息*/
@RequestMapping("/deletePicture")
@ResponseBody
public BaseResult deletePicture(String id){
Integer code = 1;
String message = "";
Uploadpictures up = new Uploadpictures();
up = uploadpicturesService.findPicture(id);
try {
File f = new File(up.getPictureAddress());
f.delete();
uploadpicturesService.deletePicture(id);
message="删除成功";
}catch (Exception e){
code=0;
message="删除失败";
}
return new BaseResult(code,message,null);
}
/*删除多条图片信息*/
@RequestMapping(value = "/deleteAllPicture")
@ResponseBody
public BaseResult deleteAllPicture(@RequestParam("id[]") int[]ids){
Integer code = 1;
String message = "";
Uploadpictures up = new Uploadpictures();
for (int i = 0; i < ids.length; i++) {
up = uploadpicturesService.findPicture(String.valueOf(ids[i]));
File f = new File(up.getPictureAddress());
f.delete();
try {
code=uploadpicturesService.deleteAllPicture(ids[i]);
} catch (Exception e) {
message="删除失败";
code=0;
}
}
return new BaseResult(code,message,null);
}
}
其中com.zheng.common.base.BaseResult这个是一个工具类用来返回给前台的信息！
还是把它贴出来吧：
package com.zheng.common.base;
/**
* 统一返回结果类
* Created by shuzheng on 2017/2/18.
*/
public class BaseResult {
/**
* 状态码：1成功，其他为失败
*/
public int code;
/**
* 成功为success，其他为失败原因
*/
public String message;
/**
* 数据结果集
*/
public Object data;
public BaseResult(int code, String message, Object data) {
this.code = code;
this.message = message;
this.data = data;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}
有个重点就是想在页面中访问本地的图片就需要给它添加一个映射，加上域名，这里要在web的springMVC中设置
<mvc:resources mapping="/files/**" location=“file:///D:/aaa/”/>
前端页面：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Bootstrap 文件上传</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="/resources/css/iconfont.css" />
<link rel="stylesheet" href="/resources/css/bootstrap.min.css" />
<link rel="stylesheet" href="/resources/css/bootstrap-table-min.css" />
<link rel="stylesheet" href="/resources/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="/resources/css/bootstrap-select.min.css" />
<link href="/resources/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<link href="/resources/css/com.css" media="all" rel="stylesheet" type="text/css" />
<style type="text/css">
/* .modal-content{
height: 100%!important;
}*/
</style>
</head>
<body>
<div class="container">
<div class="czl">
<button class="btn btn-success mRight" id="add"><span class="iconfont"></span> 添加</button>
<button class="btn btn-danger mRight" id="deleteAll"><span class="iconfont"></span>全部删除</button>
</div>
<!--添加 模态框 start-->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">添加</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3">图片名称：</label>
<div class="col-sm-8">
<input class="form-control" id="photoName" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">图片：</label>
<div class="col-sm-8">
<input type="file" id="file" name="file">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
<%-- <button type="button" class="btn btn-primary" id="add-btn">提交</button>--%>
</div>
</div>
</div>
</div>
<!-- 添加 模态框 end-->
<!-- 修改 模态框 start-->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">修改</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3">图片名称：</label>
<div class="col-sm-8">
<input class="form-control" id="photoName-update" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">图片：</label>
<div class="col-sm-8">
<image id="photoAddress-update" style="width:400px; height:300px;"/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="update-btn">提交</button>
</div>
</div>
</div>
</div>
<!-- 修改 模态框 end-->
<!-- 删除全部 模态框 start-->
<div class="modal fade" id="deleteAllModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">删除</h4>
</div>
<div class="modal-body">
确定删除所有数据？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="delete_all">确定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!-- 删除 模态框 end-->
<!-- 删除 模态框 start-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">删除</h4>
</div>
<div class="modal-body">
确定删除该条数据？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="delete">确定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!-- 删除 模态框 end-->
<%-- 显示图片放大图 模态框 start--%>
<div class="modal fade ImagePlus" id="ImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="height: 400px">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-12 contet">
</div>
</div>
</div>
</div>
</div>
</div>
<%-- 显示图片放大图 模态框 end--%>
<!-- 表格 -->
<div class="table-responsive">
<table id="table"> </table>
</div>
</div>
</div>
<script src="/resources/js/jquery-2.0.3.min.js"></script>
<script src="/resources/js/fileinput.js" type="text/javascript"></script>
<script src="/resources/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/resources/js/locales/zh.js" type="text/javascript"></script>
<script type="text/javascript" src="/resources/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="/resources/js/bootstrap-datetimepicker.fr.js"></script>
<script type="text/javascript" src="/resources/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="/resources/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/resources/js/bootstrap-table-zh-CN.min.js"></script>
<script>
$(function() {
$("#table").bootstrapTable({
url: '/a',
contentType: 'application/x-www-form-urlencoded',
method: 'get',
pageList: [5, 10, 20],
//可供选择的页面显示条数
dataType: 'json',
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
toolbar: '#toolbar', //工具按钮用哪个容器
cache: false, //是否启用缓存，默认为true
pagination: true, //是否显示分页
queryParams:queryParams,//传递参数,默认升序
sidePagination: 'server', //分页方式：服务器端分页
pageNumber: 1, //初始化加载第一页
pageSize: 10, //每页显示记录数
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
columns: [{
checkbox: true,
valign: 'middle',
},{
title: '序号',
valign: 'middle',
formatter: function (value, row, index) {
//获取每页显示的数量
var pageSize=$('#table').bootstrapTable('getOptions').pageSize;
//获取当前是第几页
var pageNumber=$('#table').bootstrapTable('getOptions').pageNumber;
//返回序号，注意index是从0开始的，所以要加上1
return pageSize * (pageNumber - 1) + index + 1;
}
},
{
field: 'pictureName',
title: '图片名称',
valign: 'middle',
}, {
field: 'file',
title: '图片',
valign: 'middle',
events:{
'click .view': function (e, value, row, index) {
$('#ImageModal').modal('show');
console.log(row);
$("#ImageModal").find(".contet").html("<image src='"+row.pictureAddress+"' class='carousel-inner img-responsive img-rounded' style='width:400px;height: 300px;'/>");
}
},
formatter: function (value, row,index ) {
return '<img class="view" style="width:80px; height:50px;" src='+row.pictureAddress+' alt="图片丢失了" >'
}
}, {
field: 'operate',
title: '操作',
align: 'center',
valign: 'middle',
events: operateEvents,
formatter: function(value, row, index) { //格式化操作按钮
return [
'<a class="update" href="javascript:void(0)" title="编辑">',
'<button type="button" class="btn btn-primary"><span class="iconfont"></span></button>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="删除">',
'<button type="button" class="btn btn-danger"><span class="iconfont"></span></button>',
'</a>'
].join('');
}
}
],
}); //初始化表格 结束
//查询传递参数
function queryParams(params) {
return { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pageNum: params.offset/params.limit, //页码 0开始
pageSize: params.limit //页面大小
};
};
//添加
$("#add").click(function() {
$('#addModal').modal('show');
});
//获取选中的所有数据id
function getIdSelections() {
return $.map($('#table').bootstrapTable('getSelections'), function(row) {
return row.id;
});
}
//全部删除
$("#deleteAll").click(function(){
$('#deleteAllModal').modal('show');
var ids=getIdSelections();
console.log(ids);
if(ids.length==0){
alert("请至少选择一条数据！");
}
$("#delete_all").click(function(){
$.ajax({
type: "post",
url: "/deleteAllPicture",
data: {
id:ids,
},
success: function(res) {
console.log("删除全部："+res);
$('#deleteAllModal').modal('hide');
$('#table').bootstrapTable('refresh');
},
error: function() {
alert("删除异常！");
}
});
});
});
});
var fileName='';
// 初始化设置
$("#file").fileinput({
language: 'zh', //设置语言
uploadUrl: "/addPictures", //上传的地址http://192.168.101.193:8080/zheng-oa-web/uploadpictures/addPictures
allowedFileExtensions: ['jpg', 'png', 'gif'], //接收的文件后缀 'jpg', 'gif', 'png',
uploadAsync: false, //同步上传
textEncoding:"UTF-8",
showUpload: true, //是否显示上传按钮
showCaption: true, //是否显示标题
browseClass: "btn btn-primary", //按钮样式
dropZoneEnabled: false, //是否显示拖拽区域
enctype: 'multipart/form-data',
maxFileCount: 4, //表示允许同时上传的最大文件个数
validateInitialCount: true,
previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
uploadExtraData:function(){//向后台传递参数
var data={
pictureName:$("#photoName").val(),
};
return data;
},
}).on("filebatchuploadsuccess", function(event, data, previewId, index) {//上传成功回调函数
$("#file").fileinput("upload");
console.log(data);
if(data.response.code == 1) {
alert("上传成功!");
$('#table').bootstrapTable('refresh');
$('#addModal').modal('hide');
$("#file").fileinput("clear");
$("#file").fileinput("reset");
$("#photoName").val(''); //清空
} else {
alert("上传失败!");
}
}).on('fileerror', function(event, data, msg) {//上传失败回调函数
alert(msg);
});
//修改、删除单个数据
window.operateEvents = {
'click .update': function(e, value, row, index) {
id=row.id;
$('#updateModal').modal('show');
$.ajax({ //回显修改数据
type: "post",
url: "/findPicture",
dataType: "json",
data: {
id:id
},
success: function(res) {
/* console.log(res);*/
var pictureName=res.data.pictureName;
var pictureAddress=res.data.pictureAddress;
$("#photoName-update").val(pictureName); //图片名称
$("#photoAddress-update").attr("src",pictureAddress); //图片
},
error: function() {
alert("回显异常！");
}
});
$("#update-btn").unbind(); //解绑点击事件
$("#update-btn").bind("click", function(e) {
$.ajax({
type: "post",
url: "/updatePicture",
data: {
id:id,
pictureName:$("#photoName-update").val()
},
success: function(res) {
console.log(res);
alert("修改成功！");
$('#updateModal').modal('hide');
$('#table').bootstrapTable('refresh');
},
error: function() {
alert("修改异常！");
}
});
});
},
'click .remove': function(e, value, row, index) {
$('#deleteModal').modal('show');
id=row.id;
$("#delete").click(function(){
$.ajax({
type: "post",
url: "/deletePicture",
data: {
id:id,
},
success: function(res) {
console.log(res);
$('#deleteModal').modal('hide');
$('#table').bootstrapTable('refresh');
},
error: function() {
alert("删除异常！");
}
});
});
}
}
</script>
</body>
</html>
大致效果图如下：
就写到这里吧 文采不是很好，如果有什么问题大家可以给我留言我们一起解决！