使用formdata上传文件,formdata上传图片

　　XMLHttpRequest是一个浏览器接口，通过它我们可以让Javascript与HTTP (S)进行通信。XMLHttpRequest是当前浏览器中前台和后台之间交换数据的常用方法。2008年2月，XMLHttpRequest Level 2的草案被提出。与上一代相比，它有一些新的特性，其中FormData是XMLHttpRequest Level 2新增加的对象。用它来提交表单，模拟表单提交，当然最大的好处是可以上传二进制文件。下面介绍如何使用FormData上传文件。

　　FormData 上传文件实例

　　首先看一下FormData的基本用法：formData对象，它可以将所有表单元素的名称和值组合成一个queryString，提交给后台。只需将表单作为参数传递给FormData构造函数：

　　var form=document . getelementbyid( form 1 )；var FD=new FormData(form)；这样就可以通过ajax的send()方法直接将fd发送到后台。

　　下面的代码创建了一个表单，除了普通的数据之外，还上传了一些文件。我们直接将表单对象作为参数传递给FormData对象：

　　form name= form 1 id= form 1 pname:input type= text name= name //p p gender:input type= radio name= gender value= 1 /男性input type= radio name= gender value= 2 /女性/p pstu-number:input type= text name= number /Photo:input type= file name= Photo id= Photo /p pinput type= button name= B1 value= submit onclick

　　为了简单起见，我们仍然使用jquery封装的ajax将数据传输到后台：

　　函数fsubmit(){ var form=document . getelementbyid( form 1 )；var FD=new FormData(form)；$.Ajax ({URL: server.php ，type: post ，data: fd，processdata: false，//告诉jQuery不要处理发送的数据contentType: false，//告诉jQuery不要设置Content-Type请求头success: function (response，status，xhr){ console . log(xhr)；var json=$。parseJSON(响应)；var结果=“”；Result=个人信息：br/name: JSON[ name ] br/gender: JSON[ gender ] br/number: JSON[ number ]；result= br/avatar:img src= JSON[ photo ] height= 100 style= border-radius:50%； /;$(#result )。html(结果)；} });返回false}上面代码中的server-side是一个接收ajax请求并返回接收结果的服务器端文件。具体代码如下：

　　？php$name=isset($_POST[name])？$ _ POST[ name ]: ；$gender=isset($_POST[gender])？$ _ POST[ gender ]: ；$number=isset($_POST[number])？$ _ POST[ number ]: ；$filename=time()。substr($ _ FILES[ photo ][ name ]，str rpos($ _ FILES[ photo ][ name ]，.));$ response=array()；if(move _ uploaded _ file($ _ FILES[ photo ][ tmp _ name ]，$ filename)){ $ response[ is success ]=true；$ response[ name ]=$ name；$ response[ gender ]=$ gender；$ response[ number ]=$ number；$ response[ photo ]=$ filename；} else { $ response[ is success ]=false；} echo JSON _ encode($ response)；填写完信息后，点击提交，在页面中可以得到如下结果。也可以在服务器对应的文件夹中找到上传的图片。

　　如果你是一个原生的JavaScript爱好者，当然也可以实现上述功能。下面是一个简单的JavaScript实现代码：

　　函数fsubmit(){ var form=document . getelementbyid( form 1 )；var formData=new formData(form)；alert(formdata . name)；var oReq=new XMLHttpRequest()；oreq . onreadystatechange=function(){ if(oreq . ready state==4){ if(oreq . status==200){ console . log(type of oreq . responsetext)；var JSON=JSON . parse(oreq . responsetext)；var结果=“”；Result=个人信息：br/name: JSON[ name ] br/gender: JSON[ gender ] br/number: JSON[ number ]；result= br/avatar:img src= JSON[ photo ] height= 50 style= border-radius:50%； /;$(#result )。html(结果)；} } };oReq.open(POST ， server . PHP )；oreq . send(formData)；返回false}FormData 对象方法介绍

　　除了在创建新对象时直接将表单作为参数传入之外，FormData还有其他功能。网上关于介绍FormData的文章大多只提到append()方法，那么对于FormData对象有哪些方法呢？我们从控制台得知：

　　之后我们在console有了一个很大的发现。FormData对象其实也有这样的方法，所以我们要自己测试一下，找出真相。以下是这些方法的一些解释：

　　1、append()

　　append()方法用于向FormData对象添加一个键值对：

　　fd.append(key1 ， value 1 )；fd.append(key2 ， value 2 )；是一个FormData对象，它可以是新创建的空对象，也可以已经包含一个窗体表单或其他键值对。

　　2、set()

　　设置与相应键key对应的值

　　fd.set(key1 ， value 1 )；fd.set(key2 ， value 2 )；它看起来有点类似于append()方法。两者的区别在于，当指定的键值存在时，append()方法会最后添加所有新添加的键值对，而set()方法会覆盖之前设置的键值对。或者举个例子，我们在前面形式的基础上追加()或设置()一个新的键值对：

　　fd.append(name ， will )；有两个带有键名的键值对：

　　fd.set(name ， will )；只有一个键名为的键值对：

　　这就是append()和set()的区别。如果设置的键值不存在，那么两种方法的效果是一样的。

　　3、delete()

　　接收一个指示要删除的键值名称的参数。如果有多个相同的键值，它们将被一起删除：

　　fd.append(name ， will )；FD . delete( name )；表单中的姓名信息和append()添加的姓名信息已被删除。

　　4、get() 和 getAll()

　　接收指示要查找的键的名称的参数，并返回与该键对应的第一个值。如果有多个相同的键，并且希望返回这个键的所有对应的value值。

　　同样基于上面的表单表单：

　　fd.append(name ， will )；console . log(FD . get( name ))；//seanfd.append(name ， will )；console . log(FD . get all( name ))；//[肖恩，威尔]5、has()

　　该方法还接收一个参数，该参数也是键的名称，并返回一个布尔值来确定FormData对象是否包含该键。以上面的表格为例：

　　console . log(FD . has( name ))；//true console . log(FD . has( Name ))；//false6、keys()

　　这个方法不需要接收参数，返回一个迭代器，通过迭代器我们可以遍历FormData对象中的所有键。以上面的表格为例：

　　for(FD . keys())的var key){ console . log(key)；}结果是：

　　名字

　　性别

　　数字

　　照片

　　7、values()

　　有遍历键的迭代，当然也有遍历值的迭代器。Values()是一个遍历值的迭代器，其用法类似于keys():

　　for(FD . values()的var值){ console . log(value)；}结果：

　　8、entries()

　　有遍历键的迭代器，也有遍历值的迭代器，为什么不做一个呢！Entries()只返回一个包含键值对的迭代器：

　　for(FD . entries())的var对{ console.log(pair[0]， pair[1])；}结果：

　　FormData兼容性问题

　　由于FormData是XMLHttpRequest Level 2的新接口，IE10以下的IE浏览器不支持FormData。至于上面介绍的FormData对象的方法，经过测试在IE浏览器中不支持。各大浏览器的具体支持请参考下图：

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。