2018-03-21 HTML5 FormData 文件上传 学习笔记

点击跳转HTML5 FormData 方法介绍以及实现文件上传 作者：诗渊

把 form 表单作为参数传入 FormData 构造函数

var form = document.getElementById("form1");
var fd = new FormData(form);

就可以直接通过ajax 的 send() 方法将 fd 发送到后台。

HTML部分：

  
        
name:
  
        
gender:male female
        
stu-number：
  
        
photo:
  
        
  
  

jQuery部分：

function fsubmit() {
        var form=document.getElementById("form1");
        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(response);
                var result = '';
                result +="个人信息：
name:"+json['name']+"
gender:"+json['gender']+"
number:"+json['number'];
                 result += '
头像：';
                 $('#result').html(result);
             }
        });
        return false;
    }

PHP部分