网页多图上传保存到服务器及预览功能

 

多图上传

 

网页有原生的控件支持文件上传：input type="file"，h5也支持了多文件上传，即multiple属性，但是移动端兼容性不好，这里演示了主流pc端浏览器的多文件上传。

 

 

 

 

一：创建容器存放上传控件

<div>
    <dl>
        <dt>上传图片:</dt>
        <dd class="flex" id="imgList">
            <div class="img">
                <i class="uploadImg"></i>
                <span class="tip">请选择jpg/png/gif格式图片上传</span>
            </div>
            <div class="img">
                <i class="uploadImg"></i>
                <span class="tip">请选择jpg/png/gif格式图片上传</span>
            </div>
            <input type="file" name="photoFile" onchange="filePhoto(this.files)" id="photoFile" style="display: none;" multiple />
        </dd>
    </dl>
</div>

二：引入多图片上传插件ajaxfileupload.js和jQuery

<script type="text/javascript"  src="//code.jquery.com/jquery-1.8.2.min.js" ></script>
<script src="ajaxfileupload.js"></script>

三：文件上传前端逻辑代码：

    /*选择文件回调函数*/
    function filePhoto(f){
        var obj = $(".uploadImg");
        var fileSize = document.getElementById("photoFile").files.length;
        if(!fileSize){
            alert("请至少选择一张图片！");
            return ;
        }
        /*上传图片发送请求*/
        $.ajaxFileUpload(
                {
                    url: 'url',
                    type: 'post',
                    secureuri: false,           //是否需要安全协议，默认为false
                    fileElementId: 'photoFile',//文件上传域的ID
                    dataType: 'json',           //返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        if(data.status != 1){
                            layer.msg(data.msg);
                            return;
                        }
                        //显示上传的图片
                        for(var i in data.rows){
                            obj.eq(i).css("background-image","url("+data.rows[i]+")")
                        }
                        //显示上传的文件名
                        for(var i=0;i<f.length;i++){
                            $(".tip").eq(i).text(f[i].name);
                        }
                        cleanFile();
                    },
                    error: function (data, status, e){
                        alert("服务器繁忙，请稍后再试！");
                    }
                }
        );
    }

    /*点击上传*/
    $("body").on("click",".uploadImg",function () {
        $('#photoFile').click();
    })
    /*清除文件域*/
    function cleanFile(){
        var file = $("#photoFile") ;
        file.after(file.clone().val(""));
        file.remove();
    }

四：后台接受文件controller层：

/**
     * 上传图片
     * @param photoFile
     * @return
     */
    @RequestMapping(value = "/url", produces = { "application/json;charset=UTF-8" }, method = {
            RequestMethod.POST, RequestMethod.GET })
    @ResponseBody
    public BaseModel methord(MultipartFile[] photoFile) {
        BaseModel baseModel = new BaseModel();
        int r = 0;
        if (photoFile == null || photoFile.length == 0) {
            return new BaseModel("文件上传失败，请重试", r);
        }
        List<String> arr = new ArrayList<>();
        try {
            for (MultipartFile myfile : photoFile) {
                if (!myfile.isEmpty()) {
                    Map<String, Object> map =  saveFile(myfile);
                    if(map!=null){
                        r = NumberUtils.toInt(String.valueOf(map.get("ok")));
                        if(1 == r) {
                            arr.add(String.valueOf(map.get("url")));
                        }
                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
            return new BaseModel("文件上传失败！", r);
        }
        baseModel.setRows(arr);
        baseModel.setStatus(r);
        return baseModel;
    }

五：保存文件具体方法：
需要引入apache的io包,我引用的是commons-io-2.4.jar下载地址，使用它提供的FileUtils工具类

/**
     * 保存文件到服务器
     * @param file springMVC接收到的文件对象
     * @return
     */
    public Map<String,Object> saveFile(MultipartFile file){
        Map<String,Object> result = new HashMap<>(3);
        result.put("ok", 0);
        result.put("msg", "上传失败，请稍后再试");
        if(file == null || file.isEmpty()){
            return result;
        }
        /*根目录*/
        String realPath = "D:/file/image";
        /*允许上传图片格式*/
        String allowExt = "png,jpeg,jpg,gif";
        /*上传图片名称*/
        String originFileName = file.getOriginalFilename();
       /*上传文件后缀，如：jpg*/
        String fileExt = originFileName.substring(originFileName.lastIndexOf(".")+1, originFileName.length());
        /*文件大小限制2M*/
        long allowSize = 2*1024*1024;
        /*判断文件格式*/
        if( !allowExt.contains( "," + fileExt + "," ) ) {
            result.put("msg", "不支持该类型文件上传，仅支持["+ allowExt +"]等格式");
            return result;
        }
        /*判断文件大小*/
        if( allowSize < file.getSize() ) {
            result.put("msg", "文件大小超出限制，最大允许上传["+ allowSize/1024 + "KB]");
            return result;
        }
        try {
            File destFile = null;
            String fileName;
            /*采用年月日创建文件夹，采用时间戳创建文件名*/
            Date date = new Date();
            
            if( destFile == null ) {
                String dateStr = DateUtils.DateToString(new Date(), DateStyle.YYYY_MM_DD_EN);
                realPath = realPath + dateStr;
                fileName = date.getTime() + "." + fileExt;
                realPath = realPath + dateStr + "/" +  fileName;
                destFile = new File(realPath, fileName);
            }

            /*复制文件流*/
            FileUtils.copyInputStreamToFile(file.getInputStream(),destFile);

            result.put("ok", 1);
            result.put("msg", "上传成功");
            result.put("url",realPath);
            return result;
        } catch (Exception e) {
            return result;
        }
    }

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。