HTML5----FormData实例用法

#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来上传文件或者表单了。

posted @ 2019-06-26 11:26 余农场主阅读(291) 评论(0) 收藏举报

刷新页面返回顶部