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

多图上传

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

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

    

        
上传图片:
        

            

                
                请选择jpg/png/gif格式图片上传
            
            

                
                请选择jpg/png/gif格式图片上传
            
            
        
    

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

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

    /*选择文件回调函数*/
    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

四：后台接受文件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 arr = new ArrayList<>();
        try {
            for (MultipartFile myfile : photoFile) {
                if (!myfile.isEmpty()) {
                    Map 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 saveFile(MultipartFile file){
        Map 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后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。