HTML5----FormData实例用法

来源：互联网发布：回收珠宝的软件编辑：程序博客网时间：2024/05/16 11:12

ajax 异步上传文件

1.前言

在网页与后台的交互中，用的最多的网络交互方式之一就是ajax，ajax 是免刷新页面就能从进行post与get方式的提交表单和获取服务端数据，但是在原先的ajax中，是不能携带文件上传的，但是由于h5里面的FormData的出现，让ajax可以直接在网页里面异步上传文件

2.前期准备

    下面代码是在jquery演示

一、ajax的原理图

ajax原理图

  1、用户客户端发出HttpRequest     Ajax请求到服务端  2、服务端做出响应，发出xml的数据交给ajax返回给用户  3、用户客户端（浏览器）接受到数据后，通过一些处理展现在客户端看

下面我们来实现用AJAX传文件

二、FormData详解

　 XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。
FormData的出现，可以减少我们一些工作量，向在服务端传输值的时候类似于 jquery里面的serialize

三、FormData代码演示

在我们实际运用中，可以用以下几种方式来使用FormData
网页代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="application/javascript"></script>    //百度jquery cdn</head><body><form id="myform" enctype="multipart/form-data">    <input type="text" name="text1" id= "text1">    <input type="text" name="text2" id= "text2">    <input type="file" name="file">    <input id="submit" type="button" name="提交"></form></body></html>

1、实例化FormData方式

   var formdata = New FormData($('#myform')[0])      //这样所有表单里面的值均在formdata属性里面

2、append拼接方式

  var formdata = new FormData();  formdata.append('text1',$('#text1').val());  formdata.append('text2',$('#text2').val());  formdata.append('file',$('file').files[0]);  //这样才能得到一个formdata属性 这样很麻烦 所以我大部分都是用第一种 直接实例化出来一个formdata

还有第三种方法与第一种类似，我就不过多去讲解了。下面我用们用代码的方式来讲解formdata

3、演示FormData 异步上传文件

html页面

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="application/javascript"></script></head><body><form id="myform" enctype="multipart/form-data">    <input type="text" name="text1">    <input type="text" name="text2">    <input type="file" name="file">    <br>    <input id="submit" type="button" name="提交" value="提交"></form><script>    $('#submit').on('click',function () {        var formdata =new FormData($('#myform')[0]);//构造FormData       $.ajax({           url:'server.php',           data:formdata,           type:'post',           contentType:false, //使用正确的contentType类型 （必须） 2017.3.15号 我就是因为丢了这两个，调试了一天。。。。。。。。           processData:false,//data选项既可以包含一个查询字符串，（必须）比如 key1=value1&amp;key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置processData选项为false来回避           success:function (msg) {           }       });    });</script></body></html>

php代码

//server.php var_dump($_FILES); var_dump($_POST);//我们直接把这些值打印出来证明formdata已经上传图片到服务端

效果图 FormData效果图

拿到了这个tep_name 临时文件地址，我们就可以做相应的文件上传处理比如move_uploaded_file 移动到一个文件夹里面去，就是响应的文件上传了。。

结尾

     在没有FormData的时候，一般都是用其他其他方式来异步上传图片，但是FormData给我们开发带来了很大的便捷性，小伙伴应该已经学会了，下次你就可以用FormData异步构造data来上传文件或者表单了。

0 0