多图片上传及预览_各类型多图片预览-程序员宅基地

效果展示：

图片回显和选择图片预览：
多图片上传展示

点击图片展示：
放大图

功能实现

以下功能亲测，部分样式和js根据情况自行调整

<%--
  Created by IntelliJ IDEA.
  User: yutyi
  Date: 2018/9/3
  Time: 22:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${title}</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<!--引入jquery，bootstrap的js/css样式，msgbox是自定义js，文中引用到可以删除-->
    <%@include file="/common/meta.jsp"%>
</head>
<body class="hold-transition skin-blue">
<div>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box" style="margin-bottom: 80px;">
                    <form id="myform" class="form-horizontal" method="post" enctype="multipart/form-data">
                            <div class="form-group">
                                <label class="col-xs-2 control-label">附件</label>
                                <div class="col-xs-10">
                                    <label style="border: 1px dashed #dbdadd;padding: 10px;background-color: #80808033;">
                                        <input style="position:absolute;opacity: 0;width: 35px;height: 35px;left: 5px;" id="choose-file" multiple type="file" name="file" accept="image/gif,image/jpeg,image/x-png,image/png"/>
                                        <div style="width: 35px;height: 35px;background: url('${contextPath}/static/img/upload/icon_upload.png');background-size: 35px 35px;"></div>
                                    </label>
									<!--图片预览列表-->
                                    <div class="file-list" style="display: inline-block;width: auto;position: relative;top: -30px;">
									
                                    </div>
                                </div>
                            </div>
                            <!-- 模态框（Modal），点击图片放大 -->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-body">
                                            <img id="imgSrc" src="" alt="" style="width: 570px;height: 570px;"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dialog-footer">               
                            <button type="button" class="btn btn-primary" onclick="doSave();">保存</button>
                            <button type="button" class="btn btn-default" onclick="doClose();">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>
<script type="text/javascript">
	/*
	 * 保存
	 */
	function doSave(){
     
        var valid = $('#myform').valid();
        if (valid) {
     
			//使用formData发送ajax请求，注意[0],发现很多博客都没有写
            var formData = new FormData($("#myform")[0]);
            //删除formData中的File对象,设置将我们需要上传的fileList中File对象
            formData.delete("file");
            for (var i=0;i<fileList.length;i++) {
     
                formData.append("file",fileList[i]);
            }
			//添加需要删除的已上传的图片的id，后台解析删除
            formData.append("removeList",removeList);
			
            $.ajax({
     
                url : "${contextPath}/upload/multi",
                data : formData,
                type : "post",
                dataType : "json",
                cache : false,//上传文件无需缓存
                processData : false,//用于对data参数进行序列化处理 这里必须false
                contentType : false, //必须
                success : function (resp) {
     
                    if(resp.success){
     
                        alert("保存成功");
                    }else{
     
                        alert("保存失败");
                    }
                }
            });
        }
    }




    $(function () {
     
        /**
         * 编辑页面,获取已上传的图片，根据自己的需求更改
         * */
        var deviceId = "${param.deviceId}";
        if (deviceId) {
     
            var url = "${contextPath}/device/img";
            $.post(url,{
     deviceId:deviceId},function (data) {
     
                for (var i=0;i<data.length;i++) {
     
					//attachmentId是已上传图片的id，一般图片存储在服务器端规定的某个文件夹，可以使用nginx代理来回显
                    $list.append('<label data-id="'+data[i].attachmentId+'"><img src=localhost:81'+data[i].url+' alt="" style="width: 55px;height: 55px;" onclick="showImage(this)"/><i class="file-del" style="position: relative;left:-15px;top: -20px;color: red;">&times;</i></label>')
                }
            });
        }
    });


    /*
    * 图片上传
    * */
    //选择文件按钮
    $file = $("#choose-file");
    //回显的列表
    $list = $('.file-list');
    //选择要上传的所有文件
    fileList = [];
    //已添加需要删除的文件
    removeList = "";
    //当前选择上传的文件
    var curFile;
    // 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src
    $file.on('change',function(){
     
        //原生的文件对象(File对象数组)，相当于$file.get(0).files[0];
        curFile = this.files;
        //将curFile数组和FileList数组合并
        fileList = fileList.concat(Array.from(curFile));
        console.log(fileList);
        for(var i=0,len = curFile.length;i < len;i++){
     
            reviewFile(curFile[i])
        }

    });
	
    //回显图片
    function reviewFile(file){
     
        //实例化fileReader,
        var fd = new FileReader();
        //获取当前选择文件的类型
        var fileType = file.type;
        //调它的readAsDataURL并把原生File对象传给它，
        fd.readAsDataURL(file);//base64
        //监听它的onload事件，load完读取的结果就在它的result属性里了

        fd.onload = function(){
     
            $list.append('<label class="file-item"><img src="'+this.result+'" alt="" style="width: 55px;height: 55px;" onclick="showImage(this)"/><i class="file-del" style="position: relative;left:-15px;top: -20px;color: red;">&times;</i></label>')
        }
    }

	//删除图片
    $(".file-list").on('click','.file-del',function(){
     
        var $parent = $(this).parent();
		var index = $parent.index(".file-item");
		//index==-1时表示是已上传回显的图片
		if (index == -1) {
     
			removeList += $parent.attr("data-id")+",";
		}
		console.log(removeList);
		//删除选择的图片
		fileList.splice(index,1);
		$parent.remove();
    });

	//点击图片显示放大图(使用bootstrap的模态框)
    function showImage(e) {
     
        $("#imgSrc").attr("src",e.src);
        $('#myModal').modal('show');
    }

</script>
</body>
</html>

上传多图片的后端控制类，仅供参考

package zyun.bme.platform.device.web;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import zyun.bme.platform.common.ConfigProperties;
import zyun.bme.platform.common.Constants;
import zyun.bme.platform.common.U;
import zyun.bme.platform.device.entity.Attachment;
import zyun.bme.platform.device.service.AttachmentService;

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

/**
 * 多文件上传控制器
 *
 * @author yutyi
 * @date 2018/09/27
 */
@Controller
@RequestMapping("/upload")
public class MultiFileUploadController {
    

    private Logger logger = LoggerFactory.getLogger(MultiFileUploadController.class);

    @Autowired
    private AttachmentService attachmentService;
    /**
     * 文件上传（支持多个文件），单个文件时也可以使用MultipartFile作为方法参数
     * @param request
     * @return
     * @throws IOException
     */
    @RequestMapping(value = {
    "/multi"})
    public String multiFileUpload(MultipartHttpServletRequest request,@RequestParam(required = false)String removeList) throws IOException {
    
		
		//删除需要删除的图片，仅通过图片id删除表中数据
        if (StringUtils.isNotEmpty(removeList)) {
    
            String[] images = removeList.split(",");
            ArrayList<Long> list = new ArrayList<>();
            for (String image : images) {
    
                if (StringUtils.isNotEmpty(image)) {
    
                    list.add(Long.parseLong(image));
                }
            }
            if (list.size() > 0) {
    
                attachmentService.deleteImage(list);
            }
        }
		
        //获取所有的文件上传表单内容
        List<MultipartFile> files = request.getFiles("file");
        if (files == null || files.size() == 0 ) {
    
            return "forward:/device/save";
        }

        for (MultipartFile file : files) {
    

            //获取原始文件名
            String filename = file.getOriginalFilename();
            //获取文件大小
            int size = (int) file.getSize();


            //保存路径
            String tempPath = ConfigProperties.getProp(Constants.UPLOAD_LOCATION);
           
		    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
            Date date = new Date(System.currentTimeMillis());
            String format = simpleDateFormat.format(date);
            String[] split = format.split("-");
            //添加年月日目录
            tempPath = tempPath+"/"+split[0]+"/"+split[1]+"/"+split[2];
            File fileDir = new File(tempPath);
            if (!fileDir.exists()) {
    
                fileDir.mkdirs();
            }
			
            //保存图片信息的实体类，根据自己情况编写
            Attachment attachment = new Attachment();
            attachment.setAttachmentId(U.id());
            attachment.setDataId(dataId);
            attachment.setName(filename);
            String url = tempPath+"/"+System.currentTimeMillis()+filename.substring(filename.indexOf("."));
            attachment.setUrl("/file/download"+url.substring(tempPath.indexOf("upload/")+6));
            attachment.setFileSize(size);
            attachmentService.insert(attachment);

            //上传文件
            BufferedOutputStream out = null;
            try {
    

                out = new BufferedOutputStream(new FileOutputStream(new File(url)));
                //上传文件
                out.write(file.getBytes());
                out.flush();
               logger.debug("上传文件的原始文件名:" + filename);
               logger.debug("上传文件的路径："+url);
            } catch (IOException e) {
    
                e.printStackTrace();
            } finally {
    
                if (out != null) {
    
                    out.close();
                }
            }

        }
        return "forward:/device/save";
    }
}

本文链接：https://blog.csdn.net/yutao_Struggle/article/details/83316439

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

C#连接OPC C#上位机链接PLC程序源码 1.该程序是通讯方式是CSharp通过OPC方式连接PLC_c#opc通信-程序员宅基地

文章浏览阅读565次。本文主要介绍如何使用C#通过OPC方式连接PLC，并提供了相应的程序和学习资料，以便读者学习和使用。OPC服务器是一种软件，可以将PLC的数据转换为标准的OPC格式，允许其他软件通过标准接口读取或控制PLC的数据。此外，本文还提供了一些学习资料，包括OPC和PLC的基础知识，C#编程语言的教程和实例代码。这些资料可以帮助读者更好地理解和应用本文介绍的程序。1.该程序是通讯方式是CSharp通过OPC方式连接PLC，用这种方式连PLC不用考虑什么种类PLC，只要OPC服务器里有的PLC都可以连。_c#opc通信

Hyper-V内的虚拟机复制粘贴_win10 hyper-v ubuntu18.04 文件拷贝-程序员宅基地

文章浏览阅读1.6w次，点赞3次，收藏10次。实践环境物理机：Windows10教育版，操作系统版本 17763.914虚拟机：Ubuntu18.04.3桌面版在Hyper-V中的刚安装好Ubuntu虚拟机之后，会发现鼠标滑动很不顺畅，也不能向虚拟机中拖拽文件或者复制内容。在VMware中，可以通过安装VMware tools来使物理机和虚拟机之间达到更好的交互。在Hyper-V中，也有这样的工具。这款工具可以完成更好的鼠标交互，我的..._win10 hyper-v ubuntu18.04 文件拷贝

java静态变量初始化多线程，持续更新中_类初始化一个静态属性为线程池-程序员宅基地

文章浏览阅读156次。前言互联网时代，瞬息万变。一个小小的走错，就有可能落后于别人。我们没办法去预测任何行业、任何职业未来十年会怎么样，因为未来谁都不能确定。只能说只要有互联网存在，程序员依然是个高薪热门行业。只要跟随着时代的脚步，学习新的知识。程序员是不可能会消失的，或者说不可能会没钱赚的。我们经常可以听到很多人说，程序员是一个吃青春饭的行当。因为大多数人认为这是一个需要高强度脑力劳动的工种，而30岁、40岁，甚至50岁的程序员身体机能逐渐弱化，家庭琐事缠身，已经不能再进行这样高强度的工作了。那么，这样的说法是对的么？_类初始化一个静态属性为线程池

idea 配置maven，其实不用单独下载Maven的。以及设置新项目配置，省略每次创建新项目都要配置一次Maven_安装idea后是不是不需要安装maven了?-程序员宅基地

文章浏览阅读1w次，点赞13次，收藏43次。说来也是惭愧，一直以来，在装环境的时候都会从官网下载Maven。然后再在idea里配置Maven。以为从官网下载的Maven是必须的步骤，直到今天才得知，idea有捆绑的 Maven 我们只需要搞一个配置文件就行了无需再官网下载Maven包以后再在新电脑装环境的时候，只需要下载idea ，网上找一个Maven的配置文件放到默认的包下面就可以了！也省得每次创建项目都要重新配一次Maven了。如果不想每次新建项目都要重新配置Maven，一种方法就是使用默认的配置，另一种方法就是配置 .._安装idea后是不是不需要安装maven了?

奶爸奶妈必看给宝宝摄影大全-程序员宅基地

文章浏览阅读45次。家是我们一生中最重要的地方,小时候,我们在这里哭、在这里笑、在这里学习走路,在这里有我们最真实的时光,用相机把它记下吧。　　很多家庭在拍摄孩子时有一个看法,认为儿童摄影团购必须是在风景秀丽的户外,即便是室内那也是像大酒店一样...

构建Docker镜像指南，含实战案例_rocker/r-base镜像-程序员宅基地

文章浏览阅读429次。Dockerfile介绍Dockerfile是构建镜像的指令文件，由一组指令组成，文件中每条指令对应linux中一条命令，在执行构建Docker镜像时，将读取Dockerfile中的指令，根据指令来操作生成指定Docker镜像。Dockerfile结构：主要由基础镜像信息、维护者信息、镜像操作指令、容器启动时执行指令。每行支持一条指令，每条指令可以携带多个参数。注释可以使用#开头。指令说明FROM 镜像：指定新的镜像所基于的镜像MAINTAINER 名字：说明新镜像的维护（制作）人，留下_rocker/r-base镜像

随便推点

毕设基于微信小程序的小区管理系统的设计ssm毕业设计_ssm基于微信小程序的公寓生活管理系统-程序员宅基地

文章浏览阅读223次。该系统将提供便捷的信息发布、物业报修、社区互动等功能，为小区居民提供更加便利、高效的服务。引言：随着城市化进程的加速，小区管理成为一个日益重要的任务。因此，设计一个基于微信小程序的小区管理系统成为了一项具有挑战性和重要性的毕设课题。本文将介绍该小区管理系统的设计思路和功能，以期为小区提供更便捷、高效的管理手段。四、总结与展望：通过本次毕设项目，我们实现了一个基于微信小程序的小区管理系统，为小区居民提供了更加便捷、高效的服务。通过该系统的设计与实现，能够提高小区管理水平，提供更好的居住环境和服务。_ssm基于微信小程序的公寓生活管理系统

如何正确的使用Ubuntu以及安装常用的渗透工具集.-程序员宅基地

文章浏览阅读635次。文章来源i春秋入坑Ubuntu半年多了记得一开始学的时候基本一星期重装三四次=-= 尴尬了觉得自己差不多可以的时候就吧Windows10干掉了 c盘装Ubuntu 专心学习. 这里主要来说一下使用Ubuntu的正确姿势Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的开源GNU/Linux操作系统，Ubuntu 是基于DebianGNU/Linux，支..._ubuntu安装攻击工具包

JNI参数传递引用_jni引用byte[]-程序员宅基地

文章浏览阅读335次。需求：C++中将BYTE型数组传递给Java中，考虑到内存释放问题，未采用通过返回值进行数据传递。public class demoClass{public native boolean getData(byte[] tempData);}JNIEXPORT jboolean JNICALL Java_com_core_getData(JNIEnv *env, jobject thisObj, jbyteArray tempData){ //resultsize为s..._jni引用byte[]

三维重建工具——pclpy教程之点云分割_pclpy.pcl.pointcloud.pointxyzi转为numpy-程序员宅基地

文章浏览阅读2.1k次，点赞5次，收藏30次。本教程代码开源：GitHub 欢迎star文章目录一、平面模型分割1. 代码2. 说明3. 运行二、圆柱模型分割1. 代码2. 说明3. 运行三、欧几里得聚类提取1. 代码2. 说明3. 运行四、区域生长分割1. 代码2. 说明3. 运行五、基于最小切割的分割1. 代码2. 说明3. 运行六、使用 ProgressiveMorphologicalFilter 分割地面1. 代码2. 说明3. 运行一、平面模型分割在本教程中，我们将学习如何对一组点进行简单的平面分割，即找到支持平面模型的点云中的所有._pclpy.pcl.pointcloud.pointxyzi转为numpy

以NFS启动方式构建arm-linux仿真运行环境-程序员宅基地

文章浏览阅读141次。一其实在 skyeye 上移植 arm-linux 并非难事,网上也有不少资料, 只是大都遗漏细节, 以致细微之处卡壳，所以本文力求详实清析, 希望能对大家有点用处。本文旨在将 arm-linux 在 skyeye 上搭建起来，并在 arm-linux 上能成功 mount NFS 为目标, 最终我们能在 arm-linux 里运行我们自己的应用程序. 二安装 Sky..._nfs启动 arm

攻防世界 Pwn 进阶第二页_pwn snprintf-程序员宅基地

文章浏览阅读598次，点赞2次，收藏5次。00为了形成一个体系，想将前面学过的一些东西都拉来放在一起总结总结，方便学习，方便记忆。攻防世界 Pwn 新手攻防世界 Pwn 进阶第一页01 4-ReeHY-main-100超详细的wp1超详细的wp203 format2栈迁移的两种作用之一：栈溢出太小，进行栈迁移从而能够写入更多shellcode，进行更多操作。栈迁移一篇搞定有个陌生的函数。C 库函数 void *memcpy(void *str1, const void *str2, size_t n) 从存储区 str2 _pwn snprintf