文档章节

使用form表单同时实现上传文件和提交文本数据

貔貅叔
 貔貅叔
发布于 2018/12/12 15:01
字数 612
阅读 61
收藏 0

使用form表单同时实现上传文件和提交文本数据,此示例中在后台将文件上传到阿里的oss存储服务器中

申请oss相关账号:
endpoint = "http://oss-cn-qingdao.aliyuncs.com";
accessKeyId = "key";
accessKeySecret = "secret";
bucketName = "空间名";

 

添加依赖:
 

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.3.0</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>

 

编写OSS上传代码:

private OSS ossClient;

/*
 * getOss
 * @description: 创建OSSClient实例
 * @author 李阳
 * @date 2018/12/12
 * @params []
 * @return void
 */
public void getOss() {
    this.ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
}

/*
 * upload
 * @description:oss中上传文件,返回文件名
 * @author 李阳
 * @date 2018/12/12
 * @params [request]
 * @return java.lang.String
 */
public String upload(HttpServletRequest request) throws IOException {
    String newFileName = null;
    try {
        //上传文件
        CommonsMultipartResolver multipartResolver =
                new CommonsMultipartResolver(request.getSession().getServletContext());
        // 判断 request 是否有文件上传,即多部分请求
        if (multipartResolver.isMultipart(request)) {
            // 转换成多部分request
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            // 取得request中的所有文件名
            Iterator<String> iter = multiRequest.getFileNames();
            //此处上传单个文件,如需多个文件改为while循环
            if (iter.hasNext()) {
                // 取得上传文件
                MultipartFile file = multiRequest.getFile(iter.next());
                if (file != null) {
                    // 取得当前上传文件的文件名称
                    String myFileName = file.getOriginalFilename();
                    // 如果名称不为“”,说明该文件存在,否则说明该文件不存在
                    if (StringUtils.isNotEmpty(myFileName.trim())) {
                        getOss();
                        newFileName = System.currentTimeMillis() + myFileName.substring(myFileName.lastIndexOf("."));
                        // 上传客户端文件到oss,如直接上传服务器文件到oss,可使用new FileInputStream(  new File("服务器文件路径"))
                        ossClient.putObject(bucketName, newFileName, file.getInputStream());
                    }
                }
            }
        }
    } catch (IOException e) {
        logger.error(e.getMessage(), e);
    } finally {
        // 关闭ossClient
        if (null != ossClient)
            ossClient.shutdown();
    }
    return newFileName;
}
//删除
// ossClient.deleteObject(bucketName, oldName);

 

api接口:

@RequestMapping(value = "/kevin/upload", method = RequestMethod.POST)
public void upload(CustomObject params, HttpServletRequest request) {
    try {
        String fileName = upload(request);

        // todo:使用params和filename实现服务端业务
    } catch (Exception e) {
        logger.error(e.getMessage(), e);
    }
}

 

前端:

<form id="form0">
    <label>上传图片</label>
    <input type="file" name="img">
    </br>  </br>
    <label>宽高比例</label>
    <input type="text" name="ratio"/>  </br>  </br>
    <button type="button" id="submit">提交</button>
</form>
<script>
    //获得整个form
    var form = new FormData(document.getElementById("form0"));
    //form追加提交的数据
    form.append("token", token);
    $.ajax({
        url: "/kevin/upload",
        type: 'POST',
        data: form,
        contentType: false, //不指定提交数据类型
        processData: false, //提交数据不做处理
        success: function (returndata) {
            console.log(returndata);
            var result = JSON.parse(returndata);
            // 判断逻辑
        }
    });
</script>

 

效果图:

 

申请账号地址:
https://help.aliyun.com/document_detail/32008.html?spm=a2c4g.11186623.6.708.7dbcc06dPWVcv7
https://help.aliyun.com/document_detail/32011.html?spm=a2c4g.11186623.6.710.70a56328AynJIs

 

© 著作权归作者所有

共有 人打赏支持
貔貅叔
粉丝 5
博文 117
码字总数 54737
作品 0
咸阳
程序员
私信 提问
javaweb开发之处理表单上传文件和文件下载

一、基于表单的上传文件 1. enctype属性 当表单需要上传文件时,需指定表单 enctype 的值为 multipart/form-data。 在 form 元素的语法中,enctype 属性指定将数据发送到服务器时浏览器使用的...

小米米儿小
2013/12/06
0
0
Django之路——7 django与ajax

Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更...

袁勇i
2018/07/05
0
0
php文件上传

一.首先看看html的form表单结构 form表单需要定义method的属性的值,可以为2种:get和post; get是把参数列表加到对应的form表单的URL中,传输文件大小受限制,安全性低;post的传输是我们看不...

马大哈tt
2017/11/11
0
0
模拟HTML表单上传文件(RFC 1867)

模拟HTML表单上传文件(RFC 1867) 2011-03-27 18:59 by 老赵, 10845 visits 如今使用HTTP协议定制API已经是十分常见的事情,在普通的GET和POST请求中传递些参数估计人人都会,但是如果我们需...

miscellanea
2014/06/27
0
0
commons-fileupload组件上传图片介绍

基于表单的文件上传 如果在表单中使用表单元素 <input type=“file” />,浏览器在解析表单时,会自动生成一个输入框和一个按钮,输入框可供用户填写本地文件的文件名和路径名,按钮可以让浏...

wumingyue
2012/08/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

区块链时代的拜占庭容错:Tendermint (七)

原文题目:《Tendermint: Byzantine Fault Tolerance in the Age of Blockchains》 原文作者:Ethan Buchman 本文为节选 软件实现 Tendermint采用Go语言实现,代码在https://github.com/tend...

万向区块链
14分钟前
5
0
日志分级输出到指定文件

log4j.properties文件 #根设置,输出级别为DEBUG级别, 输出文件为 ERRORA,stdout,DEBUGAlog4j.rootLogger=DEBUG,ERRORA,stdout,DEBUGA#过滤掉spring框架下的额外日志#log4j.category...

嘴角轻扬30
20分钟前
1
0
Hash源码分析(JDK1.7和1.8的对比)

前言 HashMap 在 Java 和 Android 开发中非常常见 而HashMap 1.8 相对于 HashMap 1.7 更新多 今天,我将通过源码分析HashMap 1.8 ,从而讲解HashMap 1.8 相对于 HashMap 1.7 的更新内容,希望...

瑞查德-Jack
20分钟前
3
0
Amino——表现层

一、Amino 整体视觉感受 Amino采用的主题色是神秘的蓝紫色,搭配白色图标和文字,其他图标、按钮、卡片等采用饱和度较高的亮色,整体风格活泼灵动。蓝紫色给人一种神秘感,好比陌生人之间的社...

铸剑为犁413
22分钟前
1
0
日志服务与SIEM(如Splunk)集成方案实战

背景信息 目标 本文主要介绍如何让阿里云日志服务与您的SIEM方案(如Splunk)对接, 以便确保阿里云上的所有法规、审计、与其他相关日志能够导入到您的安全运维中心(SOC)中。 名词解释 LOG(S...

阿里云官方博客
33分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部