文档章节

bootstrap-upload上传图片

暗中观察
 暗中观察
发布于 07/12 23:07
字数 587
阅读 9
收藏 0
点赞 0
评论 0

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);
        }
    }
   

 

© 著作权归作者所有

共有 人打赏支持
暗中观察
粉丝 0
博文 53
码字总数 26069
作品 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
使用DjangoUeditor将Ueditor移植到Django(BAE环境下)

UEditor是百度出品的开源富文本编辑器,BSD协议,外观、功能都不错。 DjangoUeditor是UEditor在Django上的移植版 项目地址https://github.com/zhangfisher/DjangoUeditor 由于UEditor没有出p...

刀心
2015/06/10
0
0
bootstrap fileupload记录

本来是准备学习bootstrap的,想写个文件上传的demo,但是百度了半天,最终也没有找到想要的内容,现在把学习过程中的资料纪录一下,以便使用: js下载: 地址是:https://github.com/kartik...

创意顽石
2015/12/29
2.5K
0
基于Metronic的Bootstrap开发框架经验总结(17)-- 使用 summernote插件实现HTML文档的编辑和图片插入操作

在很多场合,我们需要在线编辑HTML内容,然后在页面上或者其他终端上(如小程序、APP应用等)显示,编辑HTML内容的插件有很多,本篇介绍基于Bootstrap的 summernote插件实现HTML文档的编辑和...

walb呀
2017/12/04
0
0
[分享]WeX5中input拍照上传图片方法分享,可单图与多图

演示用,比较简陋,勿怪,方法简单! input被点击之后默认出现拍照,文档等选项,可以拍照上传,也可以选图库文件上传,也可以录像进行视频上传,自己对应修改文件类型判断就可以了 这些功能...

小次叶
2016/09/06
74
0
CKEditor图片上传实现详细步骤

CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传。 “预览”中有一大堆鸟语,看得很不爽。可以打开ckeditor/plugins/image/...

netmouse
2016/02/18
236
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

FOMO游戏代码解析

源代码在此处

怎当她临去时秋波那一转
11分钟前
0
0
EOS智能合约与DApp开发入门

EOS的是Block.One主导研发的一个区块链底层公链系统,它专门为支撑商业去中心化 应用(Decentralized Application)而设计,其代码开源。 比特币被称为区块链1.0,因为它开辟了数字加密货币的...

笔阁
23分钟前
1
0
编译cjson到dll

https://blog.csdn.net/mengzhisuoliu/article/details/52203724 编译完成后 是纯lua实现的json decode 的10倍以上...

梦想游戏人
33分钟前
0
0
JS基础- Date 对象

Date 对象 Date 对象用于处理日期和时间。 创建 Date 对象的语法: var myDate=new Date() 注释:Date 对象会自动把当前日期和时间保存为其初始值。 Date 对象属性 属性 描述 constructor 返...

ZHAO_JH
35分钟前
0
0
Python数据分析numpy(1)

Python开源的科学计算基础库 1.表示N维数组对象ndarray 2.线性代数、傅里叶变换、随机数生成 3.广播函数,整合c++、c 一.数据的维度 1.数据 2.数据维度 3.一维数据 (1)特点 (2)Python中的...

十年磨一剑3344
38分钟前
0
0
csv导入Hive脚本

from pyspark.sql import HiveContexthivec = HiveContext(sc) # 创建一个hivecontext对象用于写执行SQL,sc为sparkcontext# 拼接一个字段类型字符串str_s = 'label String,'...

gulf
40分钟前
0
0
TensorFlow 隐含层 拟合 异或运算

a⊕b = (¬a ∧ b) ∨ (a ∧¬b) 数据 X = [[0, 0], [0, 1], [1, 0], [1, 1]]Y = [[0], [1], [1], [0]] 单层网络只能拟合线性问题,由于异或是非线性问题,需要使用多层网络 输入和输出 [[...

阿豪boy
54分钟前
0
0
SVN 教程

http://www.runoob.com/svn/svn-tutorial.html 记一次 svn 管理的项目迁移工作 之前A服务器上的项目版本管理工具是用的SVN,后来,之前管理linux服务器的员工离职了,这管理服务器的工作也就...

yeahlife
55分钟前
0
0
在Python中,不用while和for循环遍历列表

a = [1, 2, 3, 8, 9]def printlist(l, index): if index == len(l): return else: print(l[index]) printlist(l, index + 1)printlist(a,......

丁典
56分钟前
0
0
Kubernetes使用中发现的错误及解决

运行 kubectl dashboard 时报错: Error validating service: Error getting service kubernetes-dashboard: services "kubernetes-dashboard" not found 排查 kubectl get po --all-names......

哎码
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部