http不使用Form表单发送文件数据和非文件数据(上传篇)

最新推荐文章于 2022-03-11 13:48:21 发布
最新推荐文章于 2022-03-11 13:48:21 发布
阅读量1k 收藏 2
点赞数 1
文章标签： 后端
原文链接：https://segmentfault.com/a/1190000007194738
版权

这里要说一下，本篇我重点说的是上传，至于下载，查看对应的下载篇

在原来，文件的上传是使用form表单去提交，有的时候为了上传文件，还要专门为上传文件写一个form表单上传文件，十分的麻烦，探索宇宙已经很累了，哪有时间浪费啊！！^_^

正式进入主题

先看看怎么从html页面中发送文件，回答是：使用 FormData

FormData使用h5新添加的一个对象，可以用来包装要发送的数据，一个例子

<body>
    <form>
        <label for="">上传文件</label>
        <input type="file" id="picture" />
        <input type="button" value="确认提交" onclick="confirm()">
    </form>
    
    <script>
        function confirm(e){
            var xmlHttp;
            if(window.XMLHttpRequest){
                xmlHttp = new XMLHttpRequest();
            }else{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //构造FormData对象
            var formData = new FormData();
            //添加非文件数据
            formData.append("username","123456");
            formData.append("password","67890");
            //添加文件数据
            formData.append("picture",document.getElementById("picture").files[0])
            //使用POST方法发送数据
            xmlHttp.open("POST","/imageUpload",true);
            xmlHttp.send(formData)
            //返回的数据
            xmlHttp.onreadystatechange=function(){
                if (xmlHttp.readyState==4 && xmlHttp.status==200){
                    console.log(xmlHttp.responseText);
                }
            }
        }
    </script>
</body>

如上所述，你就已经发送了

{
    username:123456,
    password:67890,
    picture:文件数据(其实这里是将文件转换为二进制了)
}

我们可以看见使用FormData添加数据非常的简单，特别是解决了在上传文件只能使用form表单的憋屈。
下面我要说说，使用FormData包装好的数据怎么传输的，我想这是非常有必要的，特别是当你在后端解析数据的时候，必须要知道传给后台的数据长什么样

使用FormData后，会将request的Content-Type设置为

“multipart/form-data;boundary=----"+一段随机的字母;

上面的boundary正如字面的意思一样，就是一个分界的意思，分开每一个键值对数据，具体的数据格式为

--boundary(换行)
Content-Disposition:form-data;name=“数据的键”(换行)
\r\n(换行)
数据的值(“换行”)

注意每一个boundary的前面要加两个“－”
对于文件的数据格式为:

—boundary(换行)
Content-Disposition:form-data;name=“数据的键”;filename=“文件名”(换行)
\r\n
Content-Type:*/*(换行)
\r\n
文件的二进制编码

用我们前面的例子，发送的数据为:

--boundary
Content-Disposition:form-data;name="username"
\r\n
123456
--boundary
Content-Disposition:form-data;name="password"
\r\n
67890
--boundary
Content-Disposition:form-data;name="picture";filename="上传的文件名"
\r\n
Content-Type:image/jpeg;
对图片进行二进制编码后的数据
--boundary--

上面的boundary是一个变量，可以是一串随机数,不过FormData默认是四个"-"加一串随机数。
在最后也要添加一个分界，不一样的是在分界的前后各加了两个"-",表示数据发送完毕。

至此上传篇结束了

weixin_34356138
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SSH框架不用form表单上传图片两种方式FormData和ajaxFileUpload
未曾远去
12-20 1297
两种方式FormData最好用简单ajaxFileUpload有bug，会出现 第二个文件上传图片onchange无效问题 我是以百度身份证识别为例。 ajaxFileUpload ajaxFileUpload要先引入ajaxFileUpload.js--&gt;下载 jsp页面 &lt;script type="text/javascript"&gt; function select...
html表单是怎样发送文件,http不使用Form表单发送文件数据和非文件数据(上传篇)...
weixin_42271195的博客
06-25 804
这里要说一下，本篇我重点说的是上传，至于下载，查看对应的下载篇在原来，文件的上传是使用form表单去提交，有的时候为了上传文件，还要专门为上传文件写一个form表单上传文件，十分的麻烦，探索宇宙已经很累了，哪有时间浪费啊！！^_^正式进入主题先看看怎么从html页面中发送文件，回答是：使用 FormDataFormData使用h5新添加的一个对象，可以用来包装要发送的数据，一个例子上传文件func...
不用form提交表单，用ajax上传文件
05-22
不用form提交表单，用ajax异步上传文件，使用jdk8版本，否则可能无法运行
Jquery不使用form表单异步上传文件的方法
liu709127859的专栏
03-13 901
原文链接：https://blog.csdn.net/u014762625/article/details/80827112 现在的项目中需要使用到不刷新页面的方式实现上传文件，实现方法如下： html代码： 文件:<input id="file" type="file" name="file"/> <button id="upload">上传文件</but...
如何在不使用 HTML 表单的情况下将文件上传到 Java Servlet
allway2的博客
03-11 556
使用由 HTML 代码制作的 Web 表单将文件从 Web 浏览器上传到服务器是很简单的。这通常称为基于表单的文件上传，通常适用于基于 Web 的应用程序。独立或基于命令行的应用程序——有时需要将文件上传到 Web 服务器，但不能使用 HTML 格式的上传表单？那么，本文将通过实现以下解决方案来回答这个问题： 服务器：使用 Java servlet 接收从客户端上传的文件，并将其保存到服务器磁盘上的文件中。 客户端：是一个基于命令行的程序，它将HTTP POST 请求连同文件的二进制数据一起发送到
有关文件上传 非ajax提交 得到后台数据问题
12-28
下文给大家介绍文件上传非ajax提交得到后台数据的操作方法，具体详情如下所示； <form name=configForm id=configForm method=post action= > 　.......... </form> 根据id获得表单数据然后发送ajax...
Vue axios 中提交表单数据(含上传文件)
12-02
我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <...
C++使用libcurl提供的API上传文件且Post表单数据
04-21
用form-data 表单形式发送数据,并且上传文件，完整示例，使用libcurl提供的API上传文件。项目使用Vc++ 6.0 和 VS 2017同时编译通过，上传表单数据和文件测试成功。
asp.net 模拟提交有文件上传的表单(通过http模拟上传文件)
10-29
通过HTTP模拟GET或POST请求，提交数据到服务端获取响应，比较常见些；但如上传文件到服务端，使用html form当然简单了，而因环境所限有时需要使用模拟方法去提交有附件(文件上传)的表单。
NodeJs form-data格式传输文件的方法
12-23
导致的问题是使用起来就不太方便了，比如用koa上传文件，网上资料有限，对于小白而言，文件上传操作就困难多了。 form表单上传文件流程（PHP和node js） 文件上传操作原理 form表单【注意：enctype=”multipart/form...
使用HttpClient以文件流的方式上传文件(非multipartFormData方式)
weixin_30378311的博客
03-06 523
@Test public void testAdd() throws IOException { HttpPost post = new HttpPost("http://localhost:8182/api/media/add?app=test&access_token=1234&fileName=测试一下.jpg&ContentType=...
不基于form表单的请求方式（前端一）
dengjili的专栏
11-03 1396
目录传统form方式基于button方式改进基于 h5新特性form元素改进基于异步请求XMLHttpRequest方式改进基于jquery库ajax方式改进相关文档下载 传统form方式 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;form 标签&lt;/tit..
没有Form表单的情况下，采用Ajax上传文件
KEVEN410423的博客
03-14 1908
前言：一般情况下采用form表单，设置enctype="multipart/form-data" 即可实现附件上传功能，操作如下：&lt;form action="" method="post" enctype="multipart/form-data"&gt; &lt;input type="file" name="file" value=&quot
纯原生Ajax2.0（不用FormData）实现表单及文件上传
weixin_34356138的博客
05-10 2045
一、概述 通常我们用Ajax上传文件的时候都会用到FormData,这种方式比较简单。今天介绍一种用纯Ajax上传文件的方式 表单数据可以用一下四种方式进行发送: 1.method:POST,enctype:application/x-www-form-urlencoded (默认编码方式); 2.method:POST,enctype:text/plain; 3.method:POST,enct...
没有表单控件时，如何上传文件到后端
weixin_33744141的博客
08-08 242
html如何支持文件上传，是在 rfc-1867 里面规定的，这个标准规定了上传文件时，表单控件input的类型应设置为 file, FORM的ENCTYPE应设置为"multipart/form-data"。 如果我们希望把页面上某些用户输入/修改的数据以文件的形式上传到后端，应该如何做呢？ 只需将数据以formData发送到后端即可。 步骤非常简单：1. 构造formData 　　va...
不用form表单ajax上传图片（单个图片上传实例）及回显
焱敦的博客
04-25 3576
一、html代码段（这里无css样式） <input id="hidupload" onchange="upchange()" style="display:none;"/> <button onclick="hideup()">上传文件</button> <img id="hidimg" src=""/> <button onclick=...
实现文件上传---非form提交方式（实例、教程）
yanggang_1997_2000的博客
09-18 727
转：http://blog.csdn.net/caizhh2009/article/details/7012956 利用resteasy框架构建rest webservice----第三波：实现文件上传---非form提交方式（实例、教程） 分类： webservice web restful java resteasy 2011-11-25 18:00 1159人阅读 评论(8) 收藏 举...
不依赖form表单的文件上传的原生JS实现
lilongxian的博客
12-20 896
var url='api/upload' //上传文件的服务器地址。 file="...", //你已经获取到的文件,如下截图说明。 form_data=new FormData(), //创建FormData对象，这就是不依赖form表单的关键。 http_req=new XMLHttpRequest(); //创建请求对象。 http_req.onload...
不用form提交数据_【转帖】post请求常见的数据提交方式
weixin_39703561的博客
12-11 638
一般我们在就行接口测试的时候，post请求一般会有多种body参数提交方式。今天给大家讲解一下post请求常见的数据提交方式：一、multipart/form-datamultipart/form-data 就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。当上传的字段是文件时，会有Conten...
java发送form表单 实现文件上传
最新发布
06-02
要实现文件上传，可以使用Java的HttpURLConnection类结合multipart/form-data格式实现，具体实现步骤如下： 1. 创建URL对象，指定要提交的URL地址。 2. 调用URL对象的openConnection()方法，获得HttpURLConnection对象。 3. 设置HttpURLConnection对象的请求方法，如POST。 4. 设置HttpURLConnection对象的其他请求参数，如请求头信息、Cookie等。 5. 设置HttpURLConnection对象的输出流，用于向服务器写入提交的数据。 6. 设置输出流的内容为multipart/form-data格式，包括boundary等信息。 7. 写入表单数据到输出流中，包括文件上传的字段名、文件名、文件内容等信息。 8. 调用HttpURLConnection对象的connect()方法，建立连接。 9. 向输出流中写入提交的数据。 10. 调用HttpURLConnection对象的getResponseCode()方法，获得服务器响应码。 11. 如果响应码为200，则调用HttpURLConnection对象的getInputStream()方法，获得服务器返回的数据流。 12. 读取数据流中的数据，进行处理。 下面是一个简单的示例代码： ```java URL url = new URL("http://example.com/upload"); HttpURLConnection conn = (HttpURLConnection) url.openConnection(); conn.setRequestMethod("POST"); conn.setDoOutput(true); conn.setRequestProperty("Content-Type", "multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW"); File file = new File("path/to/file"); String boundary = "----WebKitFormBoundary7MA4YWxkTrZu0gW"; String CRLF = "\r\n"; String charset = "UTF-8"; OutputStream output = conn.getOutputStream(); output.write(("--" + boundary + CRLF).getBytes(charset)); output.write(("Content-Disposition: form-data; name=\"file\"; filename=\"" + file.getName() + "\"" + CRLF).getBytes(charset)); output.write(("Content-Type: " + URLConnection.guessContentTypeFromName(file.getName()) + CRLF).getBytes(charset)); output.write(("Content-Transfer-Encoding: binary" + CRLF).getBytes(charset)); output.write((CRLF).getBytes(charset)); Files.copy(file.toPath(), output); output.write((CRLF + "--" + boundary + "--" + CRLF).getBytes(charset)); output.close(); if (conn.getResponseCode() == HttpURLConnection.HTTP_OK) { InputStream input = conn.getInputStream(); // 处理服务器返回的数据 } conn.disconnect(); ``` 注意事项： - 需要指定Content-Type为multipart/form-data，并设置boundary参数。 - 在写入表单数据时需要加上boundary和Content-Disposition等信息。 - 文件内容需要通过文件流写入输出流中，不能使用writer等字符流。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值