使用FormData对象添加字段方式上传文件

最新推荐文章于 2025-06-18 20:45:00 发布
最新推荐文章于 2025-06-18 20:45:00 发布
阅读量4.9k 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ttn456456/article/details/80695864 
<input type="file" id="file">
var formData = new FormData();
formData.append('file',$('#file')[0].files[0]);
$.ajax({
    url: '',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

                

        

    

    
  



    

      

        

            

              
                
                  ttn456456
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
JQuery基于FormData异步提交数据文件

				
			

			

				

					11-19
				

			

		

		

			
				
web中数据提交事件是常常发生的，但是大多数情况下我们不希望使用html中的form表单提交，因为form表单提交会中断当前浏览器的操作并且会调到另一个地址（即使这个地址是当前页面），并且会重复加载一些html浪费带宽，我们希望达到一个无刷新的、异步的提交效果来给用户更好的体验，这时候就要使用ajax，ajax可以不依赖表单自行发起一次http请求并且取回服务器响应的数据，这就是ajax的简便之处。我们这里使用JQuery中封装好的ajax函数，更加简便。下面列举几个使用ajax异步提交数据的方法。
一：jquery.js中的$.ajax方法

此方法依赖jquery.js插件，有很多版本，可

			
		

	



                

            
              



	

		

			

				
					
jQuery Ajax使用FormData对象上传文件的方法

				
			

			

				

					11-23
				

			

		

		

			
				
在现代Web开发中，文件上传是一项常见的功能，jQuery与Ajax结合使用FormData对象提供了一种高效、灵活的异步上传方式。FormData对象允许我们构建一个模拟的表单数据集，然后利用XMLHttpRequest对象发送这些数据，而...

			
		

	



              


  
              

                


	

		

			

				
					
JavaScript - AJAX 通过 FormData 上传 form 表单中的所有数据（text 文本，files 图片等二进制文件）

				
			

			

				

					kikajack的博客
				

				

					02-01
					
					3430
					
				

			

		

		

			
				
FormData 对象的使用 
FormData 定义



1. FormData 对象

FormData 对象是 ES6 中的对象，IE10 以下不兼容。 
利用FormData对象，可以通过 JavaScript 用键值对来模拟一系列表单控件，还可以使用 XMLHttpRequest 的 send() 方法来异步的提交这个”表单”。比起普通的 ajax，使用 FormData 的最大优点就

			
		

	





	

		

			

				
					
AI问答：理解 FormData 和 fd.append(‘file‘, file) / 文件上传 / 多文件上传 / form 表单

					
最新发布

				
			

			

				

					snow的博客
				

				

					06-18
					
					338
					
				

			

		

		

			
				
本文介绍了JavaScript中FormData对象的使用方法，特别针对文件上传场景。FormData用于构造表单数据，主要步骤包括：创建FormData实例后，用append()方法添加字段（如文件对象），其中'file'为服务器接收参数名。文件可来自<input type="file">或拖放操作，发送时通过fetch或XMLHttpRequest自动处理Content-Type。服务器端需使用multer等中间件接收multipart/form-data数据。关键点包括：浏览器自动处理编码、支持多文件

			
		

	



		

			
		



	

		

			

				
					
js上传文件并且附带自定义信息

				
			

			

				

					勤劳的搬运工
				

				

					08-26
					
					1070
					
				

			

		

		

			
				
实现的思路用了一个保存信息的数组和一个图片的数组 保持住两者的顺序一一对应 最后提交到后台 下面贴出相关代码 供有需要的同学参考
页面：

代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt...

			
		

	





	

		

			

				
					
JS文件动态上传进度条

				
			

			

				

					weixin_55757789的博客
				

				

					11-27
					
					741
					
				

			

		

		

			
				
html文件 用的bootcss样式 要上传bootcss样式和


<input type="file" id="file1">
    <button id="btn">上传文件</button>
    <br>
    <div class="progress" style="width: 500px; margin: 15px 10px;">
        <div class="progress-bar progress-b..

			
		

	





	

		

			

				
					
php+html5使用FormData对象提交表单及上传图片的方法

				
			

			

				

					12-18
				

			

		

		

			
				
使用FormData对象提交表单和上传文件通常涉及到AJAX请求。以下是一个使用jQuery的示例，展示了如何使用FormData对象上传表单数据和图片：  ```html   <!-- ... -->  <p>photo:<input type="file" name="photo"></p> ...

			
		

	





	

		

			

				
					
通过Ajax方式上传文件使用FormData进行Ajax请求

				
			

			

				

					10-21
				

			

		

		

			
				
因此，对于文件上传，需要使用FormData对象来封装文件内容和其他表单数据。  以下是使用FormData和JQuery Ajax进行文件上传的一个示例代码：  ```javascript $.ajax({  url: "***",  type: "POST",  data: new ...

			
		

	





	

		

			

				
					
input 详解之文件上传、new FormData()对象

				
			

			

				

					muzidigbig的博客
				

				

					11-27
					
					1万+
					
				

			

		

		

			
				
一、浏览器post表单提交
通常的input组件表单提交时，按照form属性提交的其中enctype=”application/x-www-form-urlencoded”是默认值
new Formdata()函数支持传入一个数组参数，用于添加一系列键值对到FormData对象中。



let formData = new FormData([
 ['key1', 'value1'],
 ['key2', 'value2']
]);用已有的表单来初始化一个对象实例

			
		

	





	

		

			

				
					
formData对象

				
			

			

				

					u012841667的专栏
				

				

					10-22
					
					1385
					
				

			

		

		

			
				
formData对象用于组装表单数据，以键值对的形式存在。 
方法 
1、append()往值集中新增值append(name, value, file)
append(name, value)value可以是string，Blob，File，可以使用同一个名称添加多个值。 
当一个 Blob 或 File 被作为第二个参数的时候， Blob 对象的默认文件名是 “blob”。 File 对象的默认

			
		

	





	

		

			

				
					
new formData中放入对象或数组对象

				
			

			

				

					m0_50809284的博客
				

				

					08-07
					
					472
					
				

			

		

		

			
				
使用JSON.stringify()的方式。

			
		

	





	

		

			

				
					
FormData用法笔记

				
			

			

				

					Y_I_M_I_l_u_c_k的博客
				

				

					11-22
					
					390
					
				

			

		

		

			
				
formData的用法笔记

			
		

	





	

		

			

				
					
new FormData() - FormData对象的作用及用法

					
热门推荐

				
			

			

				

					AlbenXie的博客
				

				

					08-27
					
					9万+
					
				

			

		

		

			
				
一、js FormData方法介绍

1. 概述

FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。

2. 构造函数

创建一个formData对象实例有几种方式：

1、创建一个空对象实例


var formData = new FormData();

此时可以调用append()方法来添加数...

			
		

	





	

		

			

				
					
data.field.属性赋值

				
			

			

				

					剑雪封喉
				

				

					10-14
					
					3万+
					
				

			

		

		

			
				
console.log(data.field);
data.field.testname="1,2,3,4";(testname是field中的某个属性比如：name，age，sex等)
console.log(data.field);
第一次console：{interest: "0", open: "1", more: "1", file: "", testname: "3"}
第二次

			
		

	





	

		

			

				
					
【JS】FormData对象

				
			

			

				

					一个美女的博客
				

				

					12-14
					
					2612
					
				

			

		

		

			
				
HTML表单数据对象——FormData

			
		

	





	

		

			

				
					
fromData使用详解

				
			

			

				

					m0_70547044的博客
				

				

					01-03
					
					808
					
				

			

		

		

			
				
介绍把属性和属性值进行数组结合，高效传输FormData的主要用途有两个：1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。2、异步上传文件（想了解为什么常用formData传输文件的原因，请移步常用Formdata对象来上传图片的原因）

			
		

	





	

		

			

				
					
FormData对象

				
			

			

				

					weixin_47505105的博客
				

				

					03-10
					
					767
					
				

			

		

		

			
				
本文章讲解了关于FormData对象以及使用和实例方法

			
		

	





	

		

			

				
					
【JS基础】var formdata=new FormData() 【FormData用法详解 】

				
			

			

				

					Milk~每天分享一点点，技术进步一点点
				

				

					10-27
					
					6752
					
				

			

		

		

			
				
FormData用法详解
简介

FormData 对象的使用：
1.用一些键值对来模拟一系列表单控件：即将form 中表单元素的 name 与 value 组装成一个 queryString
2.异步上传二进制文件

使用

一、创建formData对象
1、创建一个空对象：
//通过FormData构造函数创建一个空对象
var formdata=new FormData();
//可以通过append()方法来追加数据
formdata.append("name","laotie");
//通过get

			
		

	





	

		

			

				
					
FormData实现跨浏览器文件上传解决方案

				
			

			

				

					
				

			

		

		

			
				
本知识点将详细介绍如何使用FormData对象来实现文件上传功能，特别关注前端的实现和后端的接收处理，同时也将提到如何解决旧版浏览器IE8中的兼容性问题。  ### 前端实现  #### FormData对象  `FormData` 是一个用于...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值