zoukankan      html  css  js  c++  java
  • new FormData()

    一、概述

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

    二、使用

    1.FormData对象的操作方法,全部在原型中,自己本身没任何的属性及方法。

    FormData对象的操作方法

    1 let formData = new FormData()
    2 formData.append('user', 'zhang')
    3 获取 formData.get('user')  //zhang
    4 删除 formData.delete('user')
    5 .....

    2.使用FormData对象发送文件

     1 HTML部分
     2 <form action="">
     3         <label for="">
     4             姓名: <input type="text" name="name">
     5         </label>
     6         <label for="">
     7             文件:<input id="file" type="file" name="file">
     8         </label>
     9         <label for="">
    10             <input type="button" value="保存">
    11         </label>
    12 </form>
    13 JS部分
    14 var btn = document.querySelector('[type=button]');
    15 btn.onclick = function () {
    16     // 文件元素
    17     var file = document.querySelector('[type=file]');
    18     // 通过FormData将文件转成二进制数据
    19     var formData = new FormData();
    20     // 将文件转二进制
    21     *****注意2******
    22     formData.append('upload', file.files[0]);
    23     *****注意1******
    24     var xhr = new XMLHttpRequest;
    25     xhr.open('post', 'file.php');
    26     // 监听上传进度
    27     xhr.upload.onprogress = function (ev) {
    28     // 事件对象
    29     // console.log(ev);
    30 
    31         var percent = (ev.loaded / ev.total) * 100 + '%';
    32 
    33         console.log(percent);
    34 
    35         progress.style.width = percent;
    36     }
    37 
    38     xhr.send(formData);
    39 
    40     xhr.onreadystatechange = function () {
    41             if(xhr.readyState == 4 && xhr.status == 200) {
    42                     //
    43             }
    44     }
    45 }

    注意1:使用jQuery

     1  $.ajax({
     2     url: 'file.php',
     3     type: 'POST',
     4     data: formdata,                    // 上传formdata封装的数据
     5     dataType: 'JSON',
     6     cache: false,                      // 不缓存
     7     processData: false,                // jQuery不要去处理发送的数据
     8     contentType: false,                // jQuery不要去设置Content-Type请求头
     9     success:function (data) {           //成功回调
    10         console.log(data);
    11     }
    12 });
     

    注意2:参数
    new FormData的参数是一个DOM对象,而非jQuery对象

    1 var formData = new FormData($("#file")[0]);

    三、jQuery的参数序列化方法serialize()

    序列表表格内容为字符串,用于 Ajax 请求。

    1 $("form").serialize()

    原文:https://segmentfault.com/a/1190000012327982

  • 相关阅读:
    Cocos2dx 3.0 交流篇
    android获取ip和本机的物理地址
    半平面交总结and模板
    页面跳转的三种方式
    83. 从视图索引说Notes数据库(上)
    IE7IE8兼容性设置_服务器端设定
    [置顶] 王志成30岁前自传-我曾创造过的“第一”
    Android CTS 结果 testResult.xml 修改 fail 项 为 notExecuted 项 分析
    java android面试题分析总结
    android之写文件到sd卡
  • 原文地址:https://www.cnblogs.com/fangsmile/p/13141831.html
Copyright © 2011-2022 走看看