您的位置：首页 > Web前端 > BootStrap

Bootstrap-fileinput 多图片上传编辑

2017-04-16 18:18 621 查看

转自：http://blog.csdn.net/wuwenjinwuwenjin/article/details/49507595

前言：关于Bootstrap-fileinput 如何配置不做说明，自行去官网查看。网址： http://plugins.krajee.com/file-input
逻辑说明：先从后台获取数据展示，然后进行编辑。

废话不多说，直接上代码.

1. 页面部分代码：

[html]
view plain
copy

<div class="form-group">
     <label for="inputEmail3" class="col-xs-3 control-label">项目LOGO</label>
     <div class="col-xs-7">
         <input id="testlogo" type="file" name="icoFile"   class="file-loading" />
         <input type="text" name="htestlogo" id="htestlogo" onchange="addFile(this)" >
     </div>
</div>

说明：其中onchange()为我业务需要，上传完成后自动执行一个添加事件。此方法可以去掉。
2. 获取初始化数据方法：

[html]
view plain
copy

// 初始化获取原有文件
  $(function(){
    $.ajax({
       type : "post",
       url : "/eim/project/testFileUpload.do",
       dataType : "json",
       success : function(data) {
        layer.msg('操作成功！');
        showPhotos(data);
       },
       error: function(XMLHttpRequest, textStatus, errorThrown) {
              layer.msg('操作失败！');
                   }
   });

  });

说明：此处我返回是一个对象数组：List<MemberUser>，可以理解为获取一个班中所有的学生，展示头像
3.初始化bootstrap-fileinput 组件：

[html]
view plain
copy

@RequestMapping(value="/uploadFile",method=RequestMethod.POST)
    @ResponseBody
    public Object uploadFile(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //转型为MultipartHttpServletRequest
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
        //获取文件到map容器中
        Map<String,MultipartFile> fileMap = multipartRequest.getFileMap();
        //获取页面传递过来的路径参数
        folderPath = request.getParameter("folder");
        String rootPath = BaseConfig.uploadPath;
        String filePath = rootPath + folderPath+"/";
        //文件上传并返回map容器，map存储了文件信息
        FileModel fileModel = UploadifyUtils.uploadFiles(filePath,fileMap);
        boolean flag = service.add(fileModel);
        if(flag){
            String result = fileModel.getId()+";"+fileModel.getFilePath()+";"+fileModel.getName()+";"+fileModel.getFilePath();
            Map map = new HashMap<>();
            map.put("id", fileModel.getId());

            //返回文件保存ID
            //response.getWriter().write(map);
            return map;
        }
        return null;
    }

说明：该段代码为获取上传文件的部分信息，如文件名，上传的路径等，将文件信息保存到表中，对应对象为 FileModel 。
5.上传完成后重新刷新该组件即可。

最终展示效果：

说明：此处指针对txt文件类型判断，其余的doc，ppt里面有对应的展示图标，只须在判断是添加对应样式即可

附：根据路径过去/下载文件代码：

[html]
view plain
copy

/**
     * 文件下载
     *
     * @param savePath
     *            保存目录
     * @param name
     *            文件原名
     * @param file
     *            保存时的名称包含后缀
     * @param request
     * @param response
     * @return
     */
    public static String down(String savePath, String name, String fileName, HttpServletRequest request,
            HttpServletResponse response) {
        try {
            String path = savePath + "/" + name;
            File file = new File(path);
            if (!file.exists()) {
                // 不存在
                request.setAttribute("name", fileName);
                return "download_error";// 返回下载文件不存在
            }
            response.setContentType("application/octet-stream");
            // 根据不同浏览器设置response的Header
            String userAgent = request.getHeader("User-Agent").toLowerCase();

            if (userAgent.indexOf("msie") != -1) {
                // ie浏览器
                // System.out.println("ie浏览器");
                response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(name, "utf-8"));

            } else {
                response.addHeader("Content-Disposition",
                        "attachment;filename=" + new String(name.getBytes("utf-8"), "ISO8859-1"));
            }

            response.addHeader("Content-Length", "" + file.length());
            // 以流的形式下载文件
            InputStream fis = new BufferedInputStream(new FileInputStream(path));
            byte[] buffer = new byte[fis.available()];
            fis.read(buffer);
            fis.close();
            //response.setContentType("image/*"); // 设置返回的文件类型
            OutputStream toClient = response.getOutputStream();
            OutputStream bos = new BufferedOutputStream(toClient);
            //BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(bos));
            bos.write(buffer);
            //bw.close();
            bos.close();
            toClient.close();
            return null;
        } catch (Exception e) {
            e.printStackTrace();
            //response.reset();
            return "exception";// 返回异常页面
        } finally {
           /* if (toClient != null) {
                try {
                    toClient.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }*/

        }
    }

附：

[html]
view plain
copy

UploadifyUtils.uploadFiles 部分代码

[html]
view plain
copy

public static FileModel uploadFiles(String savePath,Map<String,MultipartFile> fiLeMap){
        //上传文件
        //附件模型对象
        FileModel fm=new FileModel();
        try {
            File file = new File(savePath);
            //判断文件夹是否存在,如果不存在则创建文件夹
            makeDir(file);
            if(fiLeMap!=null){
                for(Map.Entry<String, MultipartFile> entity:fiLeMap.entrySet()){
                    MultipartFile f = entity.getValue();
                    if(f!=null&&!f.isEmpty()){
                        String uuid=UploadifyUtils.getUUID();//uuid作为保存时的文件名
                        String ext=UploadifyUtils.getFileExt(f.getOriginalFilename());//获取文件后缀
                        //保存文件
                        File newFile = new File(savePath+"/"+uuid+"."+ext);
                        f.transferTo(newFile);
                        fm.setFileName(f.getOriginalFilename());
                        fm.setName(uuid+"."+ext);
                        fm.setFilePath(savePath);//保存路径
                        fm.setExt(ext);
                        fm.setSize(f.getSize());
                    }
                }
            }
            return fm;

        }catch (Exception e) {
            log.error(e);
            return null;
        }
    }

****************************************************************************************************************************************************************************

优化修改：

上面的文件下载方法有一个bug。当上传的文件名中存在特殊在字符( ,[] )时会导致无法下载。可以改为使用spring下载代替流的方式。下面是代码：[/u]

[html]
view plain
copy

/**
     * @version 1.0
     * @Title: downLoad
     * @Description: spring下载附件
     * @param fileId 附件id
     * @param HttpServletRequest
     * @param HttpServletResponse
     * @author qcym
     * @date 2016年9月6日15:55:49
     * @throws
     */
     @RequestMapping(value="/downLoad")
     public ResponseEntity<byte[]> downLoad(String fileId,HttpServletRequest request,HttpServletResponse response){
         try {
                // 附件id不为空
                if(StringUtils.isNotEmpty(fileId)){
                // 获取附件信息
                MailFile mailFile = fileDao.selectByPrimaryKey(fileId);
                // 获取附件真是名称
                String fileName = mailFile.getFileRealname();
                // 获取服务器上的文件
                String filePath = mailFile.getFileUrl()+mailFile.getFileName();
                    File file = new File(filePath);

                    HttpHeaders headers = new HttpHeaders();
                    fileName=new String(fileName.getBytes("UTF-8"),"iso-8859-1");//为了解决中文名称乱码问题
                    headers.setContentDispositionFormData("attachment", fileName);
                    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
                    return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),
                                                      headers, HttpStatus.CREATED);
                }
        }catch (Exception e) {
            e.printStackTrace();
            throw new BusinessException("1014", "附件下载错误:"+e.getMessage());
        }
        return null;
     }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航