最简单javaWeb多图上传功能并回显页面(非插件)

男娘i 2022-01-27 22:43 578阅读 0赞

之前做多图上传，用过百度插件webuploader，插件的好处就是美观，方便，操作简单，

这次换一个简单一点的，基本是纯手写的。操作也是很简单，所以记录一下；

样例如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE_size_16_color_FFFFFF_t_70][]

先来html页面的代码：

js代码：

//创建数组保存图片
        var files = new Array();
        var id = 0;
        //选择图片按钮隐藏input[file]
        $("#projectUploadTp").click(function() {
            $("#projectFile").trigger("click");
        });
        //选择图片
        $("#projectFile").change(function() {
            //获取所有图片
            var img = document.getElementById("projectFile").files;
            //遍历
            for (var i = 0; i < img.length; i++) {
                //得到图片
                var file = img[i];
                //把图片存到数组中
                files[id] = file;
                id++;
                //获取图片路径
                var url = URL.createObjectURL(file);
                //创建img
                var box = document.createElement("img");
                box.setAttribute("src", url);
                box.className = 'img';
                //创建div
                var imgBox = document.createElement("div");
                imgBox.style.display = 'inline-block';
                imgBox.className = 'img-item';
                //创建span
                var deleteIcon = document.createElement("span");
                deleteIcon.className = 'delete';
                deleteIcon.innerText = 'x';
                //把图片名绑定到data里面
                deleteIcon.id = img[i].name;
                //把img和span加入到div中
                imgBox.appendChild(deleteIcon);
                imgBox.appendChild(box);
                //获取id=gallery的div
                var body = document.getElementsByClassName("gallery")[0];
                body.appendChild(imgBox);
                //点击span事件
                $(deleteIcon).click(function() {
                    //获取data中的图片名
                    var filename = $(this).attr('id');
                    //删除父节点
                    $(this).parent().remove();
                    var fileList = Array.from(files);
                    //遍历数组
                    for (var j = 0; j < fileList.length; j++) {
                        //通过图片名判断图片在数组中的位置然后删除
                        if (fileList[j].name == filename) {
                            fileList.splice(j, 1);
                            id--;
                            break;
                        }
                    }
                    files = fileList;
                });
            }
        });

后台接收以及图片处理代码：

FileUtils.**upload**(imgs\[i\],projectImagesPath,"projectImages"+i);

上传方法可参考我的博客[javaWeb文件上传下载（复制粘贴即可使用）][javaWeb]

接收图片
    private MultipartFile[] imgs;
    get,set省略...
    
      @RequestMapping(value = "projectSaveNew")
        @ResponseBody
        public String projectSaveNew(HttpServletRequest request, ProjectInfoNewVo projectInfoNewVo, BindingResult bindingResult) throws Exception {
            return projectInfoServiceIpml.saveProjectNew(projectInfoNewVo, SessionUtils.getUser(request));
        }
    
    
                //开始处理图片代码
                //因为图片会是多个，所以采用了一对多关联表方式进行存储
                List<FileImages> FileImagesList = new ArrayList<>();//项目中的图片信息
                if(null != projectInfo.getImgs()){
                    MultipartFile[] imgs = projectInfo.getImgs();
                    if(null != imgs && imgs.length>0){
                        for (int i = 0;i < imgs.length;i++) {
                            FileImages fileImages = new FileImages();
                            String path = "";
                            String name = "";
                            String upload =  
                            //上传方法
                            FileUtils.upload(imgs[i],projectImagesPath,"projectImages"+i);
                            Map<String, Object> map = JSON.parseObject(upload);
                            String code = (String) map.get("code");
                            if ("500".equals(code)) {
                                logger.info("第" + i +"个图片上传失败,请联系管理员！");
                                throw new Exception("图片上传失败,请联系管理员");
    
                            }
                            name = (String) map.get("fileName");
    
                            fileImages.setCreaterTime(new Date());
                            fileImages.setFileName(name);
                            fileImages.setFilePath("/project/images/" +name);
                            fileImages.setOperator(projectInfo.getSubmitPeople()+"");
                            fileImages.setProjectId(projectInfo.getProjectId());
                            fileImages.setRemarks("项目采集中的图片");
                            FileImagesList.add(fileImages);
                        }
                        int insertFileImagesList = fileImagesMapper.insertList(FileImagesList);
                        count = (count + insertFileImagesList);
                    }
                }

好了，这样就可以实现了多图上传功能，基本上就是复制粘贴可用；

至于回显呢就是利用保存在数据库中的图片地址进行回显给页面的图片标签中就好了；

下方在提供一下回显的js代码吧

//拿到图片的地址 
      var fileImages =  projectInfoVo.fileImagesVoList;
        //
        if( null != fileImages && fileImages.length>0){
    
            for (var i = 0; i < fileImages.length; i++) {
    
                var path =  projectInfoVo.fileImagesVoList[i].filePath;
                var name =  projectInfoVo.fileImagesVoList[i].fileName;
                //加载图片
                huixiantupian(prefixHttpUrl+path,name);
            }
        }
    
    
     function huixiantupian(url,name){
            //创建img
            var box = document.createElement("img");
            box.setAttribute("src", url);
            box.className = 'img';
            //创建div
            var imgBox = document.createElement("div");
            imgBox.style.display = 'inline-block';
            imgBox.className = 'img-item';
            //创建span
            var deleteIcon = document.createElement("span");
            deleteIcon.className = 'delete';
            deleteIcon.innerText = 'x';
            //把图片名绑定到data里面
            deleteIcon.id = name;
            //把img和span加入到div中
            imgBox.appendChild(deleteIcon);
            imgBox.appendChild(box);
            //获取id=gallery的div
            var body = document.getElementsByClassName("gallery")[0];
            body.appendChild(imgBox);
            //点击span事件
            $(deleteIcon).click(function() {
                //获取data中的图片名
                var filename = $(this).attr('id');
                //删除父节点
                $(this).parent().remove();
                var fileList = Array.from(files);
                //遍历数组
                for (var j = 0; j < fileList.length; j++) {
                    //通过图片名判断图片在数组中的位置然后删除
                    if (fileList[j].name == filename) {
                        fileList.splice(j, 1);
                        id--;
                        break;
                    }
                }
                files = fileList;
            });
        }

好了，代码就这么简单，大家可以参考的去使用；如有问题可以留言一起讨论；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hpYW9kb25nZ2U1MjE_size_16_color_FFFFFF_t_70]: /images/20220128/45fafcd976f244c1a6a3ebd5f085bcbb.png
[javaWeb]: https://blog.csdn.net/Xiaodongge521/article/details/84770374