文档章节

bootstrap-upload上传图片

暗中观察
 暗中观察
发布于 07/12 23:07
字数 587
阅读 23
收藏 1

html页面

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<link th:href="@{/bootstrap/css/bootstrap.css}" type="text/css" rel="stylesheet" />
<link th:href="@{/css/fileinput.css}" type="text/css" rel="stylesheet" />

<body>

	<!-- 
<input id="f_upload" type="file" class="file" data-allowed-file-extensions='["jpg","png"]'/> -->

<input id="file-4" type="file" name="photo" class="file" data-upload-url="/upload" multiple="multiple">
	
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{/js/locales/zh.js}"></script>

<script src="js/plugins/sortable.js" type="text/javascript"></script>
<script src="js/fileinput.js" type="text/javascript"></script>
<script src="js/locales/fr.js" type="text/javascript"></script>
<script src="js/locales/es.js" type="text/javascript"></script>
<script src="themes/explorer-fa/theme.js" type="text/javascript"></script>
<script src="themes/fa/theme.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
	})
</script>
</body>
</html>

后台使用servlet3.0的part用于上传

	
	@RequestMapping("/upload")
	@ResponseBody
	public String upload(HttpServletRequest request) throws IOException, ServletException {
		
		String dir = System.getProperty("user.dir");
		
		Part p = request.getPart("photo");
		System.out.println(p.getSubmittedFileName());
		p.write(dir+File.separator+p.getSubmittedFileName());
		
		
		return "index";
	}
 @GetMapping("/refund/download")
    public void download(OrderRefund orderRefund, HttpServletResponse response) throws IOException{
        if(orderRefund.getFileNames().size()==1){//单文件下载
            downloadOneFile(orderRefund, response);
        }else {//多文件下载
            downloadMultiFile(orderRefund,response);
        }
    }
 @ResponseBody
    @RequestMapping(value = "/refund/upload",method = RequestMethod.POST,consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public Msg upload(HttpServletRequest request, HttpServletResponse response) throws IOException {
            String refundOrderId=request.getParameter("id");
            File fileUploadPath=new File(SystemProperties.FILE_UPLOAD_PATH +refundOrderId);
            if (!fileUploadPath.exists()){
                fileUploadPath.mkdirs();
            }
        if (ServletFileUpload.isMultipartContent(request)) {
                MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
                List<MultipartFile> fileList = multipartRequest.getFiles("reportFile");
                for (MultipartFile item : fileList) {
                    String fileName = item.getOriginalFilename();       //当前上传文件全名称
                    File savedFile = new File(fileUploadPath.getAbsolutePath(), fileName);
                    item.transferTo(savedFile);
                }
            }
            return Msg.success();
    }
    /**
     *
     * @description  下载单个文件
     * @author liyhu
     * @date 2018/7/15 11:14
     * @return void
     **/
    private void downloadOneFile(OrderRefund orderRefund, HttpServletResponse response) throws IOException{
        String fileName = orderRefund.getFileNames().get(0);
        File file = new File(new File(SystemProperties.FILE_UPLOAD_PATH +
                orderRefund.getId()).getAbsolutePath(),  fileName);

        response.setContentType("application/force-download");// 设置强制下载不打开
        response.addHeader("Content-Disposition",
                "attachment;fileName=" +URLEncoder.encode(fileName,"UTF-8"));// 设置文件名
        byte[] buffer = new byte[1024];
        FileInputStream fis = null;
        BufferedInputStream bis = null;
        OutputStream os = null;
        try {
            fis = new FileInputStream(file);
            bis = new BufferedInputStream(fis);
            os = response.getOutputStream();
            int i = bis.read(buffer);
            while (i != -1) {
                os.write(buffer, 0, i);
                i = bis.read(buffer);
            }
        } catch (Exception e) {
            logger.error("单文件下载失败:",e);
        } finally {
            IOUtils.close(os);
            IOUtils.close(bis);
            IOUtils.close(fis);
        }
    }
    /**
     *
     * @description  打包成zip进行下载
     * @author liyhu
     * @date 2018/7/15 11:13
     * @return void
     **/
    private void downloadMultiFile(OrderRefund orderRefund, HttpServletResponse response) throws IOException{
        response.setContentType("application/x-msdownload");
        response.setHeader("content-disposition", "attachment;filename="+URLEncoder.encode("附件.zip", "utf-8"));

        ZipOutputStream zos = new ZipOutputStream(response.getOutputStream());
        BufferedOutputStream bos = new BufferedOutputStream(zos);

        try{
            for(String fileName:orderRefund.getFileNames()){
                File file = new File(new File(SystemProperties.FILE_UPLOAD_PATH +orderRefund.getId()).getAbsolutePath(), fileName);
                if(file.exists()){
                    BufferedInputStream bis=null;
                    try{
                        bis = new BufferedInputStream(new FileInputStream(file));
                        zos.putNextEntry(new ZipEntry(fileName));
                        int len = 0;
                        byte[] buf = new byte[10 * 1024];
                        while( (len=bis.read(buf, 0, buf.length)) != -1){
                            bos.write(buf, 0, len);
                        }
                        bos.flush();
                    }finally {
                        IOUtils.close(bis);
                    }
                }else{
                    logger.error("文件:{}不存在",file.getAbsolutePath());
                }
            }
        }catch (IOException e){
            logger.error("多文件下载失败:",e);
        } finally{
            IOUtils.close(bos);
            IOUtils.close(zos);
        }
    }
   

 

© 著作权归作者所有

共有 人打赏支持
暗中观察
粉丝 1
博文 71
码字总数 30506
作品 0
惠州
私信 提问
结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1、bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web...

walb呀
2017/12/04
0
0
selenium2-python16-上传文件

文件上传操作也比较常见功能之一,上传功能操作 webdriver 并没有提供对应的方法,关键上传文 件的思路。 上传过程一般要打开一个系统的 window 窗口,从窗口选择本地文件添加。所以,一般会卡在...

丰_申
2016/02/08
11
0
基于 Python3 和 Tornado 的博客系统 - YangBlog

YangBlog Tornado Blog Demo 地址 YangBlog 技术栈 基于 Py3 + Tornado 前端框架 Bootstrap + JQuery 富文本编辑框 bootstrap-wysiwyg 字体图标 Font Awesome 按钮 Buttons 数据库 Mysql + ......

Yanshon
2017/12/07
193
0
利用 jQuery iframe 标签实现无刷新上传

jQuery AJAX 上传插件很多,本文介绍如何通过 jQuery 结合 iframe 标签实现类似 AJAX 的无刷新上传,内容重点在于表单 target 属性和 iframe 上传页面对接 。 上传表单(form)代码 <form id...

AOWANA
2016/03/21
80
0
yii2组件之多图上传插件FileInput的详细使用

作者:白狼 出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的...

白狼栈
2016/06/23
85
0

没有更多内容

加载失败,请刷新页面

加载更多

Fragment 退出动画导致fragment退出失败问题(罕见问题)

问题背景: Fragment: A , B; A is hidden; B is added; 操作: 返回键的时候执行操作: B transaction remove ; A transaction attach; 执行移除动画。transaction.setCustomAnimations(i......

Carlyle_Lee
12分钟前
1
0
Java并发编程学习四:CountDownLatch,CyclicBarrier,Semaphore以及原子类

上篇文章线程同步的关键字以及理解中介绍了一下多线程同步协作之间经常使用的关键字,今天这篇文章就介绍一下一些同步类以及原子类的使用吧。Java中提供了不少的同步类,如:CountDownLatch,...

JerryLin123
19分钟前
1
0
面试专题-框架

Spring Spring有哪些特点? 使用Spring有什么好处? 1 应用解耦 2 依赖注入 3 AOP 4 事务管理 5 MVC 6 集成开发 Spring应用程序看起来像什么? 一些接口及其实现 一些POJO类 一些xml配置文件 ...

这很耳东先生
30分钟前
2
0
锁和分布式锁

锁的由来: 多线程环境中,经常遇到多个线程访问同一个 共享资源 ,这时候作为开发者必须考虑如何维护数据一致性,这就需要某种机制来保证只有满足某个条件(获取锁成功)的线程才能访问资源...

Ala6
30分钟前
3
0
Vue + Vue-CLI + Mint-UI 移动端开发新手示例实战 - by dogstar

Vue + Vue-CLI + Mint-UI 移动端开发新手示例实战 - by dogstar 项目源代码,在码云上:https://gitee.com/dogstar/a-vue-mint-demo 快速使用 # 安装依赖npm install# 本地开发调试 lo...

暗夜在火星
44分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部