1.html代码
<!--多图上传-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>上传图片</legend>
</fieldset>
<div class="layui-upload">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
<button type="button" class="layui-btn" id="upload_2"><i class="layui-icon"></i>图片上传</button>
</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list" id="upload_list"></div>
<input type="hidden" name="images_str" id="picText_2" class="upload_image_url" value="">
</blockquote>
</div>
<!--视频上传-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>上传视频</legend>
</fieldset>
<div class="layui-form-item">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
<button type="button" class="layui-btn cover" id="control_video_button"><i class="layui-icon"></i>视频上传</button>
<button type="button" class="layui-btn layui-btn-danger cover" id="control_video_del" style="display: inline"><i class="layui-icon"></i>删除视频</button>
<input type="hidden" id="control_video" value="{$detail.control_video}" name="control_video"/>
<input type="hidden" id="temp_url_id" value="" name="temp_url_id"/>
</blockquote>
</div>
<!--视频预览-->
<div class="layui-form-item">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
<video src="{$detail.control_video}" controls="controls" id="control_video_demo" style="width: 50%;display: block}">
您的浏览器不支持 video 标签。
</video>
<p id="demoText"></p>
</blockquote>
</div>
注意其中有个隐藏的input,是用来作为中间存值的,因为后面涉及到删除图片,所以只是个“中介”,可以这么理解吧
<div class="layui-form-item" style="display: none;">
<label for="H_img" class="layui-form-label ">
URL
</label>
<div class="layui-input-inline">
<input type="text" id="H_img" th:value="${House.images}" name="images" autocomplete="off" class="layui-input" style="display: none;">
</div>
</div>
<div class="layui-form-item" style="display: none;">
<label for="H_video" class="layui-form-label ">
URL
</label>
<div class="layui-input-inline">
<input type="text" id="H_video" th:value="${House.video}" name="video" autocomplete="off" class="layui-input" style="display: none;">
</div>
</div>
这里主要是用来保存最终需要提交的图片、视频名称(我数据库存的是图片名,多张图片用逗号(,)隔开),点提交后随着表单提交到后台。
2.js代码
<script>
//单击图片删除图片 【注册全局函数】
function delThis(this_img){
var multiple_images_string = document.getElementById("picText_2").value;
var multiple_images = multiple_images_string.split(",");
//获取下标
var subscript=$("#upload_list img").index(this_img);
//删除图片
this_img.remove();
//删除数组
multiple_images.splice(subscript, 1);
//重新排序
multiple_images.sort();
document.getElementById("picText_2").value = multiple_images;
//返回
return ;
}
layui.use(['upload','form', 'layer', 'laydate'], function() {
var $ = layui.jquery
, upload = layui.upload
, form = layui.form
, layer = layui.layer
//多图片上传
var uploadInst2 = upload.render({
elem: '#upload_2'
,url: '/xxx/uploadImage' //多图上传接口
,multiple: true
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#upload_list').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 140px;height: 100px;" οnclick="delThis(this)">')
});
}
,done: function(data){
//上传失败
if (data.code > 0) {
return layer.msg('上传失败');
}
else{
//上传成功
var last_url = document.getElementById("picText_2").value;
var upload_url = "";
if(last_url !== ""){
upload_url = last_url+","+data.filename;
}
else{
upload_url = data.filename;
}
document.getElementById("picText_2").value = upload_url;
//将后台获取的图片地址传到前台存入隐藏控件中,随着表单一起提交
console.log(upload_url);
document.getElementById("H_img").value = upload_url;
}
}
, error: function () {
//演示失败状态,并实现重传
var demoText2 = $('#demoText2');
demoText2.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText2.find('.demo-reload').on('click', function () {
uploadInst2.upload();
});
}
});
//视频上传
var uploadInst = upload.render({
elem: '#control_video_button', //绑定元素
url: "/xxx/uploadVideo",//上传接口
accept: 'video'
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#control_video_demo').attr('src', result); //图片链接(base64)
$('#control_video_demo').css('display','block');
$('#control_video_del').css('display','inline');
});
},
done: function(res){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
document.getElementById("control_video").value = res.filename;
document.getElementById("H_video").value = res.filename;
},error: function(res){
console.log(res);
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
//删除视频
$('#control_video_del').click(function(){
$('#control_video_demo').css('display','none');
$('#control_video_del').css('display','none');
$('#control_video').val('');
document.getElementById("H_video").value = "";
})
注意上传接口我用xxx代替了,记得改成你自己的接口
3.后台代码
@RequestMapping(value = "/uploadVideo", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> uploadVideo(@RequestParam MultipartFile file, HttpServletRequest request) {
//保存上传
OutputStream out = null;
InputStream fileInput = null;
try {
if (file != null) {
//如果在ie浏览器上传 getOriginalFilename()获取的文件名带路径 不正确
String fileName = file.getOriginalFilename();
System.out.println("fileName:" + fileName);
String filepath = "C:\\Users\\---此处请改为您自己的路径---\\house-video\\"+fileName;
File files = new File(filepath);
//打印查看上传路径
System.out.println("filepath:" + filepath);
if (!files.getParentFile().exists()) {
files.getParentFile().mkdirs();
}
file.transferTo(files);
Map<String, Object> map = new HashMap<>();
map.put("code", 0);
map.put("msg", "");
map.put("filename", fileName); //给前端返回上传的视频名
return map;
}
} catch (Exception e) {
} finally {
try {
if (out != null) {
out.close();
}
if (fileInput != null) {
fileInput.close();
}
} catch (IOException e) {
}
}
Map<String, Object> map = new HashMap<>();
map.put("code", 1);
map.put("msg", "");
return map;
}
@RequestMapping(value = "/uploadImage", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> upload(@RequestParam MultipartFile file, HttpServletRequest request) {
//保存上传
OutputStream out = null;
InputStream fileInput = null;
try {
if (file != null) {
//如果在ie浏览器上传 getOriginalFilename()获取的文件名带路径 不正确
String fileName = file.getOriginalFilename();
System.out.println("fileName:" + fileName);
String filepath = "C:\\Users\\---此处请改为您自己的路径---\\house-img\\"+fileName;
File files = new File(filepath);
//打印查看上传路径
System.out.println("filepath:" + filepath);
if (!files.getParentFile().exists()) {
files.getParentFile().mkdirs();
}
file.transferTo(files);
Map<String, Object> map = new HashMap<>();
map.put("code", 0);
map.put("msg", "");
map.put("filename", fileName); //给前端返回上传的图片名
return map;
}
} catch (Exception e) {
} finally {
try {
if (out != null) {
out.close();
}
if (fileInput != null) {
fileInput.close();
}
} catch (IOException e) {
}
}
Map<String, Object> map = new HashMap<>();
map.put("code", 1);
map.put("msg", "");
return map;
}
注意上传路径改成您自己的路径
4.实现效果
第一次发文章,有什么不足之处还请各位前辈指正,上述代码部分参考其他前辈写的,在此感谢各位前辈!