一、添加页面

添加页面代码

<div class="layui-form-item-row" style="margin-top: 10px;"><div class="layui-col-xs10 layui-col-sm2 layui-col-md2" ><label class="layui-form-label"> <span class="layui-form-label-required" style="color:red">*</span>活动海报</label></div><div class="layui-input-block"><div id="image">{{# if(d.posterImg) { }}<img src="{{ d.posterImg }}"  id="imagePath" class="layui-upload-img" style="width: 150;height: 150px;"> {{# } else { }}<img id="imagePath" class="layui-upload-img" style="width: 150px;height: 150px;" src="../../defaultPng/default1.jpg" /> {{# }}}</div><button type="button" class="layui-btn" id="upload" style="margin-top: 10px; margin-left: 20px;"><i class="layui-icon"></i>上传图片</button><button type="button" class="layui-btn layui-btn-danger" id="del" style="margin-top: 10px;margin-left: 20px;display:none;"><i class="layui-icon"></i>删除图片</button></div><div style="margin-top: 10px; margin-left: 120px;" id="message"><span class="layui-form-label-required">注意：为了前台图片展示的美观性,图片尺寸应为1920*420,大小不超过500KB</span></div></div>

js

上传方法：

 // 上传图片function uploadPicture() {var fileId = "";var mySize = 500;var uploadInst = upload.render({elem: '#upload', // 绑定元素url: url_fileUpload + 'api/file/fileUpload?bid=' + id + "&ftype=图片",auto: true, // 选择文件后不自动上传multiple: true,size: mySize,// 上传图片完毕前（预览）before: function (obj) {var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列// 读取本地文件obj.preview(function (index, file, result) {$("#imagePath").attr("src", result);$("#imagePath").show();// 隐藏上传按钮显示删除$("#upload").hide();$("#del").show();// 监听删除请求$("#del").on("click", function () {// console.log(fileId);postDataByServiceURL(url_fileUpload, "api/file/deleteFile", {"id": fileId}, function (data) {if (data.code == 0) {$("#upload").show();delete files[index]; //删除对应的文件uploadInst.config.elem.next()[0].value = ''; // 清空 input file 值，以免删除后出现同名文件不可选posterImg = ''; // 清空表单图片路径$('#imagePath').attr('src', '../../defaultPng/default1.jpg');$("#del").hide();} else {layer.msg(data.msg, {icon: 5});}});});});},// 上传完毕后的回调done: function (res, index, upload) {if (res.code === 0) {posterImg = res.data.filePath;fileId = res.data.id;} else {layer.msg(res.msg, {icon: 5});return;}},// 上传失败时的回调error: function (res, index, upload) {}});}

除此之外，添加页面提交之前还需要将上传图片的路径封装到参数里面

二、编辑页面

前台页面：

 <div class="layui-form-item-row" style="margin-top: 10px;"><div class="layui-col-xs10 layui-col-sm2 layui-col-md2" ><label class="layui-form-label"> <span class="layui-form-label-required" style="color:red">*</span>活动海报</label></div><div class="layui-input-block"><div id="image"><img id="imagePath"  class="layui-upload-img" src="" style="width: 150px;height: 150px;display:none"></div><button type="button" class="layui-btn" id="upload" style="margin-top: 10px; margin-left: 20px;"><i class="layui-icon"></i>上传图片</button><button type="button" class="layui-btn layui-btn-danger" id="del" style="margin-top: 10px;margin-left: 20px;display:none;"><i class="layui-icon"></i>删除图片</button></div><div style="margin-top: 10px; margin-left: 120px;" id="message"><span class="layui-form-label-required">注意：为了前台图片展示的美观性,图片尺寸应为1920*420,大小不超过500KB</span></div></div>

js(只贴了上传用到的部分)，下面会再加上截图说明

var active = {};
var customerType;
var valueTable;
var id = loadUrlParams("id", location.search);
var rules = new Array();
var active_freight;
var rowsData = [];
layui.use(['table', 'laydate', 'form', 'laytpl', 'layer','upload','common'], function () {var $ = layui.$;var table = layui.table;var laytpl = layui.laytpl;var form = layui.form;var upload = layui.upload;var common = layui.common;var posterImg;var data = {name: '', marketingType: '', startTime: '', endTime: '', customerType: '', active: ''};//通过活动id查询活动表单信息getDataByServiceURL(url_promotion, 'api/registeredMarketing/findRegisteredMarketingById', {id: id}, function (data) {if (data.code === 0) {var editForm = document.getElementById('editForm');var editView = document.getElementById('editView');thisRender(editForm.innerHTML, editView, data.data);$("#imagePath").attr("src",data.data.posterImg);$("#imagePath").show();posterImg = data.data.posterImg;uploadPicture();//initselect('marketingTypeView', 'marketingType', data.data.marketingType);if ($("#endTime").val() == "2099-01-01 00:00:00") {$("#endTime").val("不限");}if (data.data.customerType == '1' || data.data.customerType == '2') {// initselect('customerTypeView', 'customerType', data.data.customerType);$("#showOrHide").show();}if (data.data.customerType == '3') {$("#showOrHide").hide();}layui.laydate.render({elem: '#startTime', type: 'datetime'});layui.laydate.render({elem: '#endTime', type: 'datetime'});} else {layer.msg(data.msg, {icon: 5});}});// 上传图片function uploadPicture() {var fileId = "";var mySize = 500;var uploadInst = upload.render({elem: '#upload', // 绑定元素url: url_fileUpload + 'api/file/fileUpload?bid=' + id + "&ftype=图片",auto: true, // 选择文件后不自动上传multiple: true,size: mySize,// 上传图片完毕前（预览）before: function (obj) {var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列// 读取本地文件obj.preview(function (index, file, result) {$("#imagePath").attr("src", result);$("#imagePath").show();// 隐藏上传按钮显示删除$("#upload").hide();$("#del").show();// 监听删除请求$("#del").on("click", function () {postDataByServiceURL(url_fileUpload, "api/file/deleteFile", {"id": fileId}, function (data) {if (data.code == 0) {$("#upload").show();delete files[index]; //删除对应的文件uploadInst.config.elem.next()[0].value = ''; // 清空 input file 值，以免删除后出现同名文件不可选posterImg = ''; // 清空表单图片路径$('#imagePath').attr('src', '../../defaultPng/default1.jpg');$("#del").hide();} else {layer.msg(data.msg, {icon: 5});}});});});},// 上传完毕后的回调done: function (res, index, upload) {if (res.code === 0) {posterImg = res.data.filePath;fileId = res.data.id;} else {layer.msg(res.msg, {icon: 5});return;}},// 上传失败时的回调error: function (res, index, upload) {}});}form.on('submit(updateFilter)', function (data) {var param = data.field;if(""==param.endTime || "不限"==param.endTime){param.endTime="2099-01-01 00:00:00";}if(param.startTime>param.endTime){layer.msg("活动开始时间不能大于结束时间！ ",{icon:5});return false;}if ('' === posterImg) {layer.msg('海报图片不能为空', {icon: 5});return false;}param['posterImg'] = posterImg;param["rulesList"] = JSON.stringify(rules);var myUrl = url_promotion + "api/registeredMarketing/updateRegisteredMarketing";$.ajax({url: myUrl,type: "POST",data: param,dataType: "json",success: function (data) {if (data.code == 0) {//关闭弹框parent.window.location.reload();var index = parent.layer.getFrameIndex(window.name); //获取窗口索引parent.layer.close(index);layer.msg(data.msg, {icon: 6});} else {//关闭弹框layer.msg(data.msg, {icon: 5});}}});return false;});function thisRender(templeObj, view, data) {laytpl(templeObj).render(data, function (html) {view.innerHTML = html;form.render();});form.render();}});

注意：所有的js需要引入upload

三、后台controller，将图片上传到oss

/*** 上传* * @param req* @return*/@PostMapping(value = "/fileUpload")@DataSamepublic @ResponseBody Map<String, Object> fileUpload(MultipartFile file, HttpServletRequest request, HttpServletResponse response){String bid = request.getParameter("bid");String ftype = request.getParameter("ftype");// 服务器的真实路径String realPath = request.getSession().getServletContext().getRealPath("/");realPath = realPath.replace("\\", "/");if(null != realPath){if(realPath.endsWith("/")){realPath = realPath.substring(0, realPath.length()-1);}realPath = realPath.substring(0, realPath.lastIndexOf("/"));}Map<String, Object> res = fileService.getOssConfig();JSONObject obj = (JSONObject) res.get("data");// 临时路径String tempPath = realPath  + "/" + obj.getString("url") + "/template";OSSClient ossClient = OSSClientFactory.createOSSClient(obj.getString("accessKeySecret"), obj.getString("accessKeyId"), obj.getString("endpoint"));FileUpload upload = new FileUpload(tempPath, request);upload.setFileSize(obj.getIntValue("fileSize"));upload.setFileFormat(obj.getString("fileFormat"));// boolean b = false;File ecfile = new File();try {ecfile = upload.uploadFile(file, bid, ftype, ossClient, obj.getString("bucketName"), obj.getString("serverUrl"));} catch (ProtocolException e) {e.printStackTrace();return ResultUtil.put(ConstantUtil.UPLOAD_FAIL,"请以MIME协议上传文件,您可以为form表单添加如下属性：enctype='multipart/form-data'", "");} catch (FileUploadException e) {e.printStackTrace();return ResultUtil.put(ConstantUtil.UPLOAD_FAIL, "上传文件出错", "");} catch (NullFileException e) {e.printStackTrace();return ResultUtil.put(ConstantUtil.UPLOAD_FAIL, "上传的文件为空", "");} catch (SizeException e) {e.printStackTrace();return ResultUtil.put(ConstantUtil.UPLOAD_FAIL, "请上传小于" + upload.getFileSize() + "k的文件", "");} catch (FileFormatException e) {e.printStackTrace();return ResultUtil.put(ConstantUtil.UPLOAD_FAIL, "请上传" + upload.getFileFormat() + "格式的文件", "");} catch (IOException e) {e.printStackTrace();return ResultUtil.put(ConstantUtil.UPLOAD_FAIL, "IO异常", "");}// 上传成功if (!ObjectUtils.isEmpty(ecfile)) {fileService.insertFile(ecfile);return ResultUtil.put(ConstantUtil.REQUEST_SUCCESS, "上传成功", ecfile);} else {return ResultUtil.put(ConstantUtil.UPLOAD_FAIL, "上传文件失败", "");}}

上面用到的方法

1、uploadFile

public com.sunyard.ec.base.entity.File uploadFile(MultipartFile uploadfile,String bid, String ftype, OSSClient ossClient,String bucketName,String prefix) throws ProtocolException,NullFileException, SizeException, FileFormatException, IOException, FileUploadException {com.sunyard.ec.base.entity.File file = null;boolean b = true;ServletFileUpload upload = getUpload();// 服务器的真实路径String realPath = request.getSession().getServletContext().getRealPath("/");realPath = realPath.replace("\\", "/");if(null != realPath){if(realPath.endsWith("/")){realPath = realPath.substring(0, realPath.length()-1);}realPath = realPath.substring(0, realPath.lastIndexOf("/"));}// 解析request中的字段，每个字段(上传字段和普通字段)都会自动包装到FileItem中file = new com.sunyard.ec.base.entity.File();// 如果不是普通字段if (null != uploadfile) {// 判断上传的文件是否为空if (uploadfile.getSize() <= 0) {b = false;throw new NullFileException();}// 判断文件是否超过限制的大小if (uploadfile.getSize() > fileSize * 1024) {b = false;throw new SizeException();}IOssUpload ossUpload = new OssUpload();// 获取文件名String fileName = uploadfile.getOriginalFilename();String uuid = Uuid.getUUID();String uuidFileName = uuid + "." + fileName.substring(fileName.lastIndexOf(".") + 1);file.setId(uuid);file.setBusinessId(bid);file.setFileName(fileName);file.setSuffixName(fileName.substring(fileName.lastIndexOf(".") + 1));file.setFileSize(uploadfile.getSize());file.setCreateDate(TimeUtil.getUTCDateTime());file.setFileType(ftype);// 因为IE6得到的是文件的全路径，所以进一步处理fileName = fileName.substring(fileName.lastIndexOf("/") + 1);// 判断上传文件的格式是否正确if (!isFormat(fileName.substring(fileName.lastIndexOf(".") + 1))) {b = false;throw new FileFormatException();}// 获取文件的输入流InputStream is = uploadfile.getInputStream();//File outPutFile = new File(this.tempPath + "/" + uuidFileName);// 创建输出流//OutputStream os = new FileOutputStream(outPutFile);// 输出//output(is, os);String fileUrl = ossUpload.uploadInputStream(ossClient, bucketName, uuid, prefix, is);file.setFilePath(fileUrl);// 将上传文件时产生的临时文件删除//outPutFile.delete();}return file;}

参考：layui官网 https://www.layui.com/demo/upload.html

上传文件删除上传文件——前端layui相关推荐

html 文件上传与移除,WebUploader 解决文件屡次上传和删除上传文件的问题
文件屡次上传有两种状况:html 1. 上传前的屡次选择web 2. 上传成功后,再次选择spa 其实API上,已经有了介绍了,不知道为何有同窗仍是不知道如何作,我来抛砖引玉吧.code 配置项:ht ...
vant 组件库中的图片上传组件（多张图片上传，删除图片传自定义参数）
html部分 js部分图片上传前,限制图片格式.图片上传后,上传七牛云接口返回图片url,赋值给图片路径变量. 图片删除坑:vant上传组建中内置的删除事件,默认携带两个参数,file和detai ...
linux文件删除机制,Linux 文件删除机制
Linux 是通过 link 的数量来控制文件删除,只有当一个文件不存在任何 link 的时候,这个文件才会被删除.每个文件都有 2 个 link 计数器-- i_count 和 i_nlink.i_ ...
解决winscp中普通用户无法上传、删除、移动文件
上一篇博客中提到了winscp这个软件,这个软件可以利用sftp协议对linux服务器就行连接,然后方便我们对文件进行操作,但是如果是利用普通用户进行登陆的话,在对文件进行相关操作的时候会出现一些pe ...
22. 处理Excel文件-删除在其他文件中存在的记录
工作和学习中,经常需要对一个Excel文件中的记录进行删除.今天和大家一起学习,如何在一个文件中删除其他文件中存在的记录. 问题:第一个Excel文件存储了学生信息,如"表1"所示 ...
U盘文件删除不掉文件被占用360强力删除后变成一串数字--解决办法
u盘中文件夹无法删除的解决方法: 把U盘插入电脑,并打开"计算机". 选中u盘,然后右键–属性. 在弹出的对话框选择"工具"选项卡,并选择"查错&qu ...
fastdfs分布式文件系统文件上传、下载、删除交互过程讲解
在讲解fastdfs的上传.下载和删除流程之前,我们先介绍fastdfs中的工程流程:首先客户端client 调用fastdfs的api,获取可用的tracker server , 再调用tracke ...
Dropzone单文件上传、多文件上传、文件夹上传，springmvc接收，上传至Minio的一系列问题
0 前言 1.项目需要上传文件和大量的文件夹,页面只有一个input file标签会很丑,偶然间得知dropzone类库, 决定使用. 2. 项目后端采用springmvc接收,调用minio代码上传 ...
虚拟机搭建ftp服务匿名用户不能上传、删除、修改，这个问题解决了2个钟头脑壳疼
我们在本地访问的时候,无论是修改,删除还是上传都会报类似如下错误, 350 Ready for RNTO 550 ** falied 在另一台虚拟机命令行访问ftp服务器可以看到除了从ftp服务器下载 ...

上传文件删除上传文件——前端layui

一、添加页面

添加页面代码

js

上传方法：

二、编辑页面

前台页面：

js(只贴了上传用到的部分)，下面会再加上截图说明

三、后台controller，将图片上传到oss

1、uploadFile

上传文件删除上传文件——前端layui相关推荐

最新文章

热门文章