XMLHttpRequest发送FormData(加入Blob),java后端接收返回结果,前端接收结果

最新推荐文章于 2024-06-04 17:42:21 发布
最新推荐文章于 2024-06-04 17:42:21 发布
阅读量9.6k 收藏 3
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29315565/article/details/80251616
版权 
 

 //上传
        this.upload = function (url, callback) {
            var fd = new FormData();
            fd.append("audioData", this.getBlob());
            //用ajax方法,后台controller拿不到文件,有知道的希望通知我,一起进步
            // $.ajax({
            //     type: "POST",
            //     url: url,
            //     data:fd,
            //     cache:false,
            //     processData: false,
            //     contentType: false,
            //     success:function (result) {
            //         callback(result);
            //     }
            // });
            var xhr = new XMLHttpRequest();
            if (callback) {
                //上传过程回调
                // xhr.upload.addEventListener("progress", function (e) {
                //     callback('uploading', e);
                // }, false);
                //上传完成回调
     

                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  qq_29315565
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    3
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  5
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
java 接收 xml_关于java后台如何接收xml格式的数据

				
			

			

				

					weixin_42184548的博客
				

				

					02-15
					
					2928
					
				

			

		

		

			
				
业务场景：用户发送下单请求，格式为xml格式，服务器接收数据完成下单，并返回结果给客户。请求格式：这段请求报文是xml格式的，在后台我们可以使用 javax.xml.bind.annotation 这个包格式化数据。比如：importjava.io.Serializable;importjavax.xml.bind.annotation.XmlAccessType;importjavax.xml....

			
		

	



                

              
                



	

		

			

				
					
浅析前端XMLHttpRequest与Java后端的交互

				
			

			

				

					大菜鸟的博客
				

				

					12-09
					
					6979
					
				

			

		

		

			
				
ajax通常会发送get和post两种请求，服务器后台也会通过相关的语法获取请求数据

1.get

get请求时send()方法中只能传递null作为参数，因为send()方法是将数据作为请求体发送的，而get方法是没有请求体的，因此send中填了数据也无效。

要通过get请求来向后台传递数据只能在url的末尾追加查询字符串，第一个串前加"?"，多个串之间要用"&"连接。此处要注意查询...

			
		

	



                


  
              

                


	

		

			

				
					
cocos2dx CCHttpclient与java后台通信

				
			

			

				

					王广帅--游戏开发技术
				

				

					04-13
					
					1312
					
				

			

		

		

			
				
一，本次测试的后台是用java的springmvc框架

			
		

	





	

		

			

				
					
用XMLHttpRequest实现文件上传和下载

					
最新发布

				
			

			

				

					m0_55251727的博客
				

				

					06-04
					
					301
					
				

			

		

		

			
				
XMLHttpRequest  实现调用接口进行上次和下载

			
		

	



		

			
		



	

		

			

				
					
ajax发送FormData，后台接收

				
			

			

				

					qq_43159578的博客
				

				

					05-21
					
					1985
					
				

			

		

		

			
				
1 前端用formdata()的方式提交


 let form=document.getElementById('form')
  var param = new FormData(form);
    let config = {
    //添加请求头
    headers: { 'Content-Type':'multipart/form-data'}
  };
  // 拿到file
  console.log(this.fileval);
  //  获取form所有数据
   const i

			
		

	





	

		

			

				
					
action请求_小伙给同事爬取数据竟获取不到，竟要使用这种请求方式才能获取？

				
			

			

				

					weixin_39816027的博客
				

				

					11-22
					
					175
					
				

			

		

		

			
				
Http请求中Form Data 和 Request Payload两种参数的区别 ?Ajax Post请求中常用的两种的形式：form data 和 request payload一、默认的表单方式请求 Form Datapost请求的Content-Type为application/x-www-form-urlencoded(默认的)，参数是在请求题中，即上面请求中的Form Data。Con...

			
		

	





	

		

			

				
					
Tomcat学习笔记（7）--FormData文件上传与后台接收

				
			

			

				

					Cake_C的博客
				

				

					09-17
					
					1612
					
				

			

		

		

			
				
开学半个月终于从开学期末粥和班级事务中解脱开了，累死，还是沉浸在代码世界宁静一些。
这一章本身与Tomcat没什么关系了 不过载体框架还是Tomcat还是记在这个专栏里吧。
首先框架是前端用ajax(XMLhttprequest)+FormData发送文件数据
后端用别人写的代码来分析所获得的数据流并解析出文件而后保存在服务器。
更为细致的描述见https://www.cnblogs.com/jimisun/p/9419269.html
我只是记录下我需要用到的内容。前辈真的强！！CTRL+C/V真爽
前端

			
		

	





	

		

			

				
					
前端分段传输大文件组件，基于HTML5 File API、Blob，后端采用node接收文件.zip

				
			

			

				

					02-14
				

			

		

		

			
				
5. 在后端接收到每个分片，存储并追踪进度。  对于后端，我们采用Node.js作为服务器端语言。Node.js提供了丰富的HTTP库，如Express，可以轻松处理HTTP请求。在接收前端上传的文件分片时，我们需要做以下事情： 1. ...

			
		

	





	

		

			

				
					
Ajax发送和接收二进制字节流数据的方法

				
			

			

				

					01-21
				

			

		

		

			
				
HTML5 Ajax 2.0标准中，增强了Ajax的许多功能，包括发送FormData数据，上传数据进度条等诸多功能。但实际上，Ajax可以字节发送二进制数据。 发送二进制数据  var oReq = new XMLHttpRequest(); oReq.open(POST, url,...

			
		

	





	

		

			

				
					
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

				
			

			

				

					11-26
				

			

		

		

			
				
最后，我们使用jQuery的`$.ajax()`函数或者原生的`XMLHttpRequest`对象来发送FormData。确保设置`processData`和`contentType`为`false`，以保持FormData的原始格式：  ```javascript $.ajax({  url: '...

			
		

	





	

		

			

				
					
XMLHttpRequest Level 2 使用指南

				
			

			

				

					11-24
				

			

		

		

			
				
1. **二进制数据处理**：新版本支持ArrayBuffer和Blob类型，允许开发者处理服务器返回的二进制数据，如图像、音频或视频文件。通过`responseType`属性，开发者可以选择以二进制形式接收数据，例如`xhr.responseType ...

			
		

	





	

		

			

				
					
FormData：FormData支持其中window.FormData未定义

				
			

			

				

					02-04
				

			

		

		

			
				
在前端开发中，FormData对象是HTML5引入的一个重要特性，用于构建和发送数据，通常与XMLHttpRequest或fetch API配合使用，以实现异步数据提交。然而，在某些情况下，你可能会遇到"FormData：FormData支持其中window....

			
		

	





	

		

			

				
					
ajax xmlhttprequest使用post传参数并向后台获取数据

					
热门推荐

				
			

			

				

					u013430672的专栏
				

				

					06-17
					
					2万+
					
				

			

		

		

			
				
ajax xmlhttprequest

			
		

	





	

		

			

				
					
AJAX 使用XMLHttpRequest对象发送和接受数据

				
			

			

				

					qq_42075398的博客
				

				

					03-04
					
					766
					
				

			

		

		

			
				
XMLHttpRequest是XMLHttp组件的对象，通过这个对象，Ajax可以像桌面应用程序一样只与服务器进行数据层的交换，而不必每次都刷 新界面，也不必每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又回忆了响应速度，缩短了用户的等待时间。
XMLHttpRequest对象与Ajax
在Ajax应用程序中，XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端，...

			
		

	





	

		

			

				
					
js 里的 XMLHttpRequest.send(formData) 用 java 中的 HttpURLConnection 怎么写?

				
			

			

				

					guoruijun_2012_4的专栏
				

				

					08-19
					
					534
					
				

			

		

		

			
				
function uploadSingleFile(file) {
    var formData = new FormData();
    formData.append("file", file);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/uploadFile");

    xhr.onload = function() {
        console.log(xhr.responseText);
        

			
		

	





	

		

			

				
					
后台怎样获得xmlhttprequest通过post上传的二进制数据_第一阶段，java核心技术开发：Ajax异步XMLHttpRequest对象...

				
			

			

				

					weixin_30197529的博客
				

				

					01-26
					
					222
					
				

			

		

		

			
				
标签：变化 页面 let javascrip 建立 rac doctype cep test 示例Ajax：    pageEncoding="utf-8"%>Test Ajax测试Ajax　　XMLHttpRequset对象相应服务器onreadystatechange事件当请求被发送到服务器时，我们需要执行一些基于响应的任务当readystate改变时，就会触发onreadystatec...

			
		

	





	

		

			

				
					
java post 多个参数_XMLHttpRequest post 传递多个参数及服务器端读取

				
			

			

				

					weixin_36225384的博客
				

				

					02-13
					
					728
					
				

			

		

		

			
				
一直没搞定XMLHttpRequest post方法如何传递多种参数，比如同时读取post参数和file参数var http = new XMLHttpRequest();var form = new FormData();// Add selected file to formform.append(me.getName(), file);form.append('filename', '1....

			
		

	





	

		

			

				
					
java后端接收 post_JAVA后端接收处理上传图片 超级简单

				
			

			

				

					weixin_34749048的博客
				

				

					01-27
					
					5246
					
				

			

		

		

			
				
使用MultipartFile进行接收上传图片非常的简单。文中实例是博智互联在SpringBoot项目上，使用Spring MVC的MultipartFile类在JAVA后端 接收前端上传文件的请求。这里只给大家处理controller层，server保存逻辑具体使用什么技术保存持久化大家可以任意发挥。MultipartFile 单文件图片上传。接收文件，先保存文件，再把文件保存到对象，再保存对象...

			
		

	





	

		

			

				
					
java页面接收xml数据_使用XMLHTTP Request Object获取服务器数据

				
			

			

				

					weixin_33389183的博客
				

				

					02-26
					
					432
					
				

			

		

		

			
				
在Web客户端使用xmlhttp对象，可以十分方便的和服务器交换数据，我们可以获取和发送任何类型的数据，甚至二进制数据到服务器上。xmlhttp技术同时也是目前大多数无刷新页面使用的和服务器交换数据的方式，这种方式比以往的隐藏iframe的方法要方便和经济的多。同时让我们高兴得是xmlhttp并不是IE特有的东西，虽然目前还不是W3C的标准，不过IE, Netscape/Mozilla, 和Saf...

			
		

	





	

		

			

				
					
后端返回了application/octet-stream 前端怎么不下载文件 使用formData上传这个文件

				
			

			

				

					05-18
				

			

		

		

			
				
如果后端返回的是`application/octet-stream`类型的文件，前端可以通过创建一个Blob对象并将其传递给FormData来上传文件。具体步骤如下：

1. 首先，使用XMLHttpRequest或Fetch API从后端获取响应，并将其转换为Blob对象。示例代码如下：

```javascript
fetch('http://example.com/file', {
  method: 'GET',
})
.then(response => response.blob())
.then(blob => {
  // 处理Blob对象
})
.catch(error => {
  // 处理错误
});
```

2. 创建一个FormData对象，并将Blob对象添加到其中。示例代码如下：

```javascript
const formData = new FormData();
formData.append('file', blob, 'filename');
```

其中，第一个参数是表单字段的名称，第二个参数是Blob对象，第三个参数是文件名。

3. 使用XMLHttpRequest或Fetch API将FormData对象上传到后端。示例代码如下：

```javascript
fetch('http://example.com/upload', {
  method: 'POST',
  body: formData,
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
});
```

这样，就可以将后端返回的`application/octet-stream`类型的文件上传到服务器了。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 5

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值