layui实现多图片上传以及视频上传，包括预览和删除功能

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">&#xe64a;</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">&#xe6ed;</i>视频上传</button>
         <button type="button" class="layui-btn layui-btn-danger cover" id="control_video_del" style="display: inline"><i class="layui-icon">&#xe640;</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.实现效果

第一次发文章，有什么不足之处还请各位前辈指正，上述代码部分参考其他前辈写的，在此感谢各位前辈！