ajax实现异步文件或图片上传功能

    用户名：

     密码：

     性别：男

        女

     头像：

     提交

varimgs=[];//存储图片链接

   //为文件上传添加change事件

    varfileM=document.querySelector("#file");

    $("#file").on("change",function(){

      console.log(fileM.files);

      //获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组

      varfileObj=fileM.files[0];

      //创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。

      varformData=newFormData();

      formData.append('file',fileObj);

 //创建ajax对象

  varajax=newXMLHttpRequest();

  //发送POST请求

  ajax.open("POST","http://localhost/phpClass/file-upload/move_file.php",true);

  ajax.send(formData);

  ajax.onreadystatechange=function(){

    if(ajax.readyState == 4) {

      if(ajax.status>=200 &&ajax.status<300||ajax.status==304) {

        console.log(ajax.responseText);

        varobj=JSON.parse(ajax.responseText);

        alert(obj.msg);

        if(obj.err == 0){、

          //上传成功后自动动创建img标签放在指定位置

          varimg =$("");

          $(".con").append(img);

          imgs.push(obj.msg);

        }else{

          alert(obj.msg);

        }

      }

    }

  }

});

//解决跨域问题

header("Access-Control-Allow-Origin:*");

//说明向前台返回的数据类型为JSON

header("Content-type:text/json");

//$_FILES超全局变量存储是文件数据，是一个关联数组

  $fileObj=$_FILES['file'];

  var_dump($fileObj);

  if($fileObj["error"]==0){

    //判断文件是否合法

    $types=["jpg","jpeg","png","gif"];

    $type=explode("/",$fileObj["type"])[1];

    if(in_array($type,$types)){

      $time= time();//获取时间戳 返回一个整形

      //获取文件详细路径

      $filePath="http://localhost/phpClass/image1".$time.".".$type;

      echo$filePath;

      //移动文件

      $res=move_uploaded_file($fileObj["tmp_name"],"../image1/".$time.".".$type);

      if($res){

        $infor=array("err"=>0,"msg"=>"文件移动成功");

      }else{

        $infor=array("err"=>1,"msg"=>"文件移动失败");

      }

    }else{

        $infor=array("err"=>1,"msg"=>"文件格式不合法");

    }

    echojson_encode($infor);

  }

?>

//完成form表单数据的提交

    $('#btn').on('click',function(){

//     serializeArray()将form表单控件中的数据序列化成数组,数组中含有若干对象,对象包含对应控件的name和value

      varinfor = $('#form').serializeArray();

//     console.log(infor);

      varstu = {};

      for(vari=0;i

        varobj=infor[i];

        stu[obj.name] = obj.value;

      }

      stu["imgs"] = imgs;

      stu["imgs"] = imgs[0];

      //发送ajax请求

      $.ajax({

        url:"http://localhost/phpClass/file-upload/data.php",

        data:{

          parameter :JSON.stringify(stu)

        },

        success:function(res){

          console.log(res.msg);

        }

      });

    });