前端实现多图片上传查看功能（带UI实现）-白红宇

前端实现多图片上传查看功能（带UI实现）

阅读量：2216 次

发布时间：2019-05-07

本文共 3706 字，大约阅读时间需要 12 分钟。

由于业务需求，需要实现多图片的上传，并且能够实时查看用户上传的图片列表。因此从网上找了一个不错的插件，并和bootstrap UI进行的兼容。基本能够满足需求。下面就是我的实现过程（PS：本人前端了解不太深，所以基本是实现了功能… UI没有太多考虑…）

前端插件

可拖拽和带预览图的jQuery文件上传插件ssi-uploader

ssi-uploader.css

ssi-uploader.js

下载地址：

后端框架

SpringMVC

前端实现

前端代码


   # 这里省略了一些UI上的HTML代码，对于文件上传来说，最主要的是下面这个input标签，用来放置插件中生成的# 上传UI和相关的实现。
       
    
   
...

ssi-uploader插件

使用方法

在页面中引入ssi-uploader.css和ssi-uploader.js文件。

HTML结构

最基本的文件上传HTML结构是使用一个<input>元素，类型为file，并指定一个id。

初始化插件

在页面DOM元素加载完毕之后，可以通过ssi_uploader方法来初始化该文件上传插件。

$('#ssi-upload').ssi_uploader({    url: 'path/to/upload.php'});

配置参数

ssi_uploader文件上传插件的可用配置参数如下：

回调函数

ssi-uploader文件生成插件支持4种回调函数：beforeUpload、beforeEachUpload、onUpload和onEachUpload。

beforeUpload

beforeUpload回调函数在文件上传前执行的回调函数。

$('input').ssi_uploader({url:'uploadAction.php',beforeUpload:function(){
      console.log('文件上传准备就绪！');}})$('input').on('beforeUpload.ssi-uploader',function(){
   console.log('一个文件准备上传。')});

beforeEachUpload

beforeEachUpload回调函数在每一个单独的文件上传前执行的回调函数。该函数访问每个文件的信息和xhr对象。如果终止了某个文件，你可以设置一个字符串，提示取消的原因，并显示的错误信息中。

$('input').ssi_uploader({url:'uploadAction.php',beforeEachUpload:function(fileInfo,xhr){   console.log(fileInfo.name+' '+fileInfo.type+' '+fileInfo.size);   if(fileInfo.size > 1){ xhr.abort(); }   return '文件尺寸太大！';}});$('input').on('beforeEachUpload.ssi-uploader',function(){console.log('A file is going for uploading.')});

onUpload

beforeUpload回调函数在文件上传后执行的回调函数。

$('input').ssi_uploader({url:'uploadAction.php',onUpload:function(){
      console.log('文件上传完毕！');}})$('input').on('onUpload.ssi-uploader',function(){
   console.log('文件上传完毕！')});

onEachUpload

beforeUpload回调函数在每一个单独的文件上传后执行的回调函数。

$('input').ssi_uploader({url:'uploadAction.php',onEachUpload:function(fileInfo){   console.log(fileInfo.uploadStatus+' 'fileInfo.name+' '+fileInfo.type+' '+fileInfo.size+' '+fileInfo.uploadStatus);}});$('input').on('onEachUpload.ssi-uploader',function(){console.log('A file uploaded.')});

后端实现

后端接收上传的图片是通过SpringMVC实现的。前端多张图片上传时，是将多张图片一张一张post到后端；因此，后端只需要完成单张图片的上传保存即可。

实现逻辑

后端获取图片信息

根据图片数据生成md5值作为图片的名称

保存图片到指定路径，并将图片保存路径与上传上来的用户的关联关系保存到数据表

生成图片的展示URL，返回给客户端，用于展示

实现代码

Controller：

/** * 上传用户图片 */@RequestMapping("/upload")@ResponseBodypublic UserImageVo uploadImage(HttpServletRequest request) throws IOException {    // SpringMVC 文件上传    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;    // 获取图片信息    Map
   
     files = multipartRequest.getFileMap();    MultipartFile image = files.get("files[]");    // 上传图片传上来的额外新鲜    String userId = request.getParameter("user_id");    // 图片数据    byte[] imageData = image.getBytes();    // 图片原名称    String imageName = image.getOriginalFilename();    if(StringUtils.isEmpty(userId)) {        throw new NullPointerException("kaoqin user id is empty...");    }    // 保存图片并返回保存路径    String imagePath = fileService.uploadUserImage(imageData, imageName);    if(StringUtils.isEmpty(imagePath)) {        throw new IOException("user image upload error...");    }    UserImageBean bean = new UserImageBean();    bean.setId(UuidUtils.create());    bean.setUser_id(userId);    bean.setImage(imagePath);    boolean isSaveSuccess = userImageService.saveUserImage(bean);    if(isSaveSuccess) {        UserImageVo userImageVo = new UserImageVo();        userImageVo.setImageId(bean.getId());        // 获取图片展示URL        userImageVo.setShowUrl(fileService.queryImageShowUrl(imagePath));        return userImageVo;    }    throw new IOException("user image save error...");}

图片上传的逻辑就是传统的保存文件，这里就不在写了…

实现效果

这里写图片描述

上面的截图就是最终的实现效果。前端框架使用了bootstrap，所以一些展示的UI效果都是从bootstrap中获取的。点击左上方的选择文件，可选择要上传的图片，我这里设置了仅允许上传一张图片，所以只能一张一张上传，大家使用时可以根据需要设置上传图片的个数，点击清除，可将所有未上传的图片清除掉。

下面的图片列表展示的就是用户已经上传的图片了，当上面的图片上传成功后，就会在下面的图片列表中显示出来；点击红色的垃圾箱图标，可以删除图片。

你可能感兴趣的文章