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

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

前端插件

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

• ssi-uploader.css
• ssi-uploader.js

下载地址：http://www.jq22.com/jquery-info9613

后端框架

• SpringMVC

前端实现

前端代码

<link rel="stylesheet" href="ssi-uploader.css" type="text/css"/><script src="ssi-uploader.js" type="text/javascript"></script># 这里省略了一些UI上的HTML代码，对于文件上传来说，最主要的是下面这个input标签，用来放置插件中生成的# 上传UI和相关的实现。<div class="box-body">    <input type="file" multiple id="image_upload"/></div>...<script type="text/javascript">$(function() {    $("#image_upload").ssi_uploader({        url: "user/image/upload",    // 上传图片的地址        data: {            "user_id": '${bean.userId}'     // 上传图片附带的额外信息        },        dropZone: false,        allowed: ["jpg","png"],     // 支持图片类型        locale: "zh_cn",        maxNumberOfFiles: 1,        // 最大上传文件数，可根据需要设置        // 图片上传前回调函数，这里上传前加了一个加载的动画        beforeUpload:function(){            zeroModal.loading(2);        },        // 所有图片上传完毕后回调函数，这里在上传完成后关闭了加载动画        onUpload:function(){            zeroModal.closeAll();        },        // 每个图片上传完成后回调函数        onEachUpload: function (fileInfo) {            // 这里在图片上传成功后将图片展示在用户图片列表中            showImage(fileInfo.returnMsg);        },    });/** * 展示用户图片，这个方法里会生成图片展示的HTML，并放入展示图片列表中，使用的css是ssi-uploader * 插件的css，保持UI风格一致 */function showImage(userImage) {    $("#btn_entry_row").show();    $("#user_save_image_row").show();    var imageTable = "<table class='ssi-imgToUploadTable ssi-pending'>\        <tbody>\            <tr>\                <td class='ssi-upImgTd'>\                    <img class='ssi-imgToUpload' src='"+ userImage.showUrl +"'>\                </td>\            </tr>\            <tr>\                <td>\                    <button data-image-id='"+ userImage.imageId +"' class='ssi-button error ssi-removeBtn btn-remove-image'>\                    <span class='trash10 trash'></span>\                    </button>\                </td>\            </tr>\        </tbody>\    </table>";    $("#image_list").append(imageTable);}   /** * 删除指定图片，使用异步删除，删除完之后可将页面上的指定图片UI删掉，失败的话可以弹个框 */$("#image_list").on("click", ".btn-remove-image", function() {    var object = $(this);    zeroModal.confirm("是否确定删除图片?", function() {        var imageId = $(object).attr("data-image-id");        var sendData = {"image_id": imageId};        zeroModal.loading(2);        $.post("user/image/delete", sendData, function(response) {            zeroModal.closeAll();            if(response.code == 0) {                // 图片删除成功操作            } else {                // 图片删除失败操作            }        });    });});})</script>

ssi-uploader插件

使用方法

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

<link rel="stylesheet" href="path/to/ssi-uploader.css"><script src="path/to/ssi-uploader.js"></script>

HTML结构

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

<input type="file" multiple id="ssi-upload"/>

初始化插件

在页面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到后端；因此，后端只需要完成单张图片的上传保存即可。

实现逻辑

1. 后端获取图片信息
2. 根据图片数据生成md5值作为图片的名称
3. 保存图片到指定路径，并将图片保存路径与上传上来的用户的关联关系保存到数据表
4. 生成图片的展示URL，返回给客户端，用于展示

实现代码

Controller：

/** * 上传用户图片 */@RequestMapping("/upload")@ResponseBodypublic UserImageVo uploadImage(HttpServletRequest request) throws IOException {    // SpringMVC 文件上传    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;    // 获取图片信息    Map<String, MultipartFile> 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中获取的。点击左上方的选择文件，可选择要上传的图片，我这里设置了仅允许上传一张图片，所以只能一张一张上传，大家使用时可以根据需要设置上传图片的个数，点击清除，可将所有未上传的图片清除掉。

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