ssi-uploader和webuploader批量图片图片上传插件使用

由于业务需要，需要做一个批量上传图片的功能，因此本人采用的是图片上传插件来完成的，可以采用的有两种插件实现方式，那么现在来说下实现方式一：

1、这种方式采用的是ssi-uploader图片上传插件，bootstarp.min.css不是必须的，我这里只是添加显示添加按钮的样式。

前台页面写法配置：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/static/assets/bootstarp/css/bootstrap.min.css" />
    <link rel="stylesheet" href="<%=basePath%>/static/assets/js/ssi-uploader/styles/ssi-uploader.css"/>
    <script src="<%=basePath%>/static/assets/js/ssi-uploader/js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="<%=basePath%>/static/assets/js/ssi-uploader/js/ssi-uploader.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
    <div class="col-lg-12">
        <form class="form-horizontal form-bordered" role="form" id="uploadImage">
            <section class="panel">
                <header class="panel-heading">
                    <h2 class="panel-title">审批截图上传</h2>
                </header>
                <div class="panel-body">
                    <!--图片上传-->
                    <div class="row">
                       <div class="col-md-12">
                           <h3>审批截图上传：</h3>
                           <input type="file" multiple id="ssi-upload" data-validate="required:" />
                       </div>
                    </div>
                </div>
                <footer class="panel-footer">
                    <input type="button" class="btn btn-primary" onclick="location.href='<%=basePath%>/login/main'" value="退出"/>
                    <%--<input type="button" class="btn btn-primary" id="submitBtn" value="上传"/>--%>
                </footer>
            </section>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        //初始化插件
        $('#ssi-upload').ssi_uploader({
            url: '<%=basePath%>/testFileUpload',
            dropZone:false,//禁止拖拽
            maxNumberOfFiles:9,//最多上传文件
            maxFileSize:5,//文件最大为5M
            allowed:['jpg','gif','txt','png','pdf'],//允许上传的文件格式
            locale:"zh_CN",//使用中文
            preview:true,//启用预览效果
            onUpload:function(data){
                //if(data == "true"){
                alert("上传成功！");
                /*window.location.href="<%=basePath%>/login/main";*/
                //}
            }
        });
    })
</script>
</body>
</html>

后台处理图片上传操作：

 @RequestMapping(value = "testFileUpload",method = {RequestMethod.GET,RequestMethod.POST})
    @ResponseBody
    public String testFileUpload(HttpServletRequest request,HttpServletResponse response,Map<String, Object> model){
        MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request;
        Map<String, MultipartFile> files = Murequest.getFileMap();//得到文件map对象
        String upaloadUrl ="D:/upload/photo/";//得到当前工程路径拼接上文件名
        File dir = new File(upaloadUrl);
        if(!dir.exists())//目录不存在则创建
            dir.mkdirs();
        for(MultipartFile file :files.values()){
            String  fileName=file.getOriginalFilename();//相片的名字
            File tagetFile = new File(upaloadUrl+fileName);//创建文件对象
            if(!tagetFile.exists()){//文件名不存在 则新建文件，并将文件复制到新建文件中
                try {
                    tagetFile.createNewFile();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                try {
                    file.transferTo(tagetFile);//到这里就可以上传了，以下是处理图片及允许gif的上传
                    //图片扩展名
                    String types=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
                    //以1024*768大小改变图片,如果是gif则放开限制，如果需要存储原图则不需要处理
                    if(!types.contains("gif")){
//                       Thumbnails.of(tagetFile).size(1024,768).toFile(tagetFile);
                    }
                } catch (IllegalStateException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        return "true";
    }

上传插件样式：

添加文件样式：

上传成功样式：

注：上传后的清空只是前台清空，并没有给出后台清空的方法，因此如果要实现后台清空需要自己扩展插件。

第二种上传图片插件使用（webuploader.js图片上传插件）：

首先引用图片插件需要的相关文件：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="<%=basePath%>/static/assets/js/ssi-uploader/js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/static/assets/js/webupload/css/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/static/assets/js/webupload/css/style.css" />
    <script type="text/javascript" src="<%=basePath%>/static/assets/js/webupload/js/webuploader.js"></script>
    <script type="text/javascript" src="<%=basePath%>/static/assets/js/webupload/js/upload.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="container">
        <!--头部，相册选择和格式选择-->
        <div id="uploader">
            <div class="queueList">
                <div id="dndArea" class="placeholder">
                    <div id="filePicker"></div>
                    <p>或将照片拖到这里，单次最多可选300张</p>
                </div>
            </div>
            <div class="statusBar" style="display:none;">
                <div class="progress">
                    <span class="text">0%</span>
                    <span class="percentage"></span>
                </div><div class="info"></div>
                <div class="btns">
                    <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

此插件的访问后台的操作，独立为了一个js文件，文件位置如下：

server对应的值，为上传图片的链接

上传图片后台处理：

@RequestMapping(value = "testFileUpload",method = {RequestMethod.GET,RequestMethod.POST})
    @ResponseBody
    public String testFileUpload(HttpServletRequest request,HttpServletResponse response,Map<String, Object> model){
        MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest)request;
        Map<String, MultipartFile> files = Murequest.getFileMap();//得到文件map对象
        String upaloadUrl ="D:/upload/photo/";//得到当前工程路径拼接上文件名
        File dir = new File(upaloadUrl);
        if(!dir.exists())//目录不存在则创建
            dir.mkdirs();
        for(MultipartFile file :files.values()){
            String  fileName=file.getOriginalFilename();//相片的名字
            File tagetFile = new File(upaloadUrl+fileName);//创建文件对象
            if(!tagetFile.exists()){//文件名不存在 则新建文件，并将文件复制到新建文件中
                try {
                    tagetFile.createNewFile();
                } catch (IOException e) {
                    e.printStackTrace();
                }
                try {
                    file.transferTo(tagetFile);//到这里就可以上传了，以下是处理图片及允许gif的上传
                    //图片扩展名
                    String types=fileName.substring(fileName.lastIndexOf(".")+1).toLowerCase();
                    //以1024*768大小改变图片,如果是gif则放开限制，如果需要存储原图则不需要处理
                    if(!types.contains("gif")){
//                       Thumbnails.of(tagetFile).size(1024,768).toFile(tagetFile);
                    }
                } catch (IllegalStateException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        return "true";
    }

效果图：

上传前：（可以删除，可以旋转图片）

上传后：（不能删除图片）

至此，两个图片上传插件的简单应用完成，不足之处望指教。

ssi-uploader和webuploader批量图片图片上传插件使用

猜你喜欢