1.接口地址：https://www.wlphp.com/myblog_demo/api/uploadfile/index.php          接口在本站服务器，因本站流量有限请勿上传大文件谢谢！

2.html端： index.html

<meta  charset='utf-8'>

<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>

<form id= "uploadForm"> 

        <p>name:<input type="text" name="name" ></p>

        <p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p>

        <p>photo:<input type="file" name="photo" id="photo"></p>

  <p><input type="button" link="sub"   value="提交"></p>

</form>

    <div id="result"></div>

 

<script>

 $("[link=sub]").click(function (){ 

        var data = new FormData($('#uploadForm')[0]);

        $.ajax({

            url: 'a.php',

            type: 'POST',

            data: data,

            dataType: 'json',

            cache: false,

            processData: false,

            contentType: false

        }).done(function(ret){

            if(ret['isSuccess']){

                var result = '';

                result += 'name=' + ret['name'] + '<br>';

                result += 'gender=' + ret['gender'] + '<br>';

                result += '<img src="' + ret['photo']  + '" width="100">';

                $('#result').html(result);

            }else{

                alert('提交失敗');

            }

        });

        return false;

 });

 //type=file 一旦change就上传图片

 $("[name=photo]").change(function (){

         var data = new FormData($('#uploadForm')[0]);

        $.ajax({

            url: 'a.php',

            type: 'POST',

            data: data,

            dataType: 'json',

            cache: false,

            processData: false,

            contentType: false

        }).done(function(ret){

            if(ret['isSuccess']){

                var result = '';

                result += 'name=' + ret['name'] + '<br>';

                result += 'gender=' + ret['gender'] + '<br>';

                result += '<img src="' + ret['photo']  + '" width="100">';

                $('#result').html(result);

            }else{

                alert('提交失敗');

            }

        });

        return false;

 

 });

</script>

3.html提交给自己的程序a.php （如果用js提给接口会存在跨域问题）

<?php

//文件路径

$file="@".$_FILES['photo']['tmp_name'];

//获取文件扩展名

$file_name_arr=pathinfo($_FILES['photo']['name']);

$file_extension=$file_name_arr['extension'];

$name=$_POST['name'];

$gender=$_POST['gender'];

$ch = curl_init();

$post_data = array(

    'name' => $name,

    'gender' => $gender,

 'file' => $file,

 'file_extension'=>$file_extension,

);

curl_setopt($ch, CURLOPT_HEADER, false);

//启用时会发送一个常规的POST请求，类型为：application/x-www-form-urlencoded，就像表单提交的一样。

curl_setopt($ch, CURLOPT_POST, true); 

curl_setopt($ch,CURLOPT_BINARYTRANSFER,true);

curl_setopt($ch, CURLOPT_POSTFIELDS,$post_data);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);      //得到返回值且不显示在页面上

curl_setopt($ch, CURLOPT_URL, 'https://www.wlphp.com/myblog_demo/api/uploadfile/index.php');   //可以理解为接口地址

$info= curl_exec($ch);    //可以理解为接口返回值

curl_close($ch);

 

//完全输出接口返回值

echo $info;

4.php接口：

<?php

error_reporting(0);

$file_extension=$_POST['file_extension'];

$filename = "./upload/".time().time().".".$file_extension;

if(move_uploaded_file($_FILES['file']['tmp_name'], $filename)){

 $response['isSuccess'] = true;

    $response['name'] = $_POST['name'];

    $response['gender'] = $_POST['gender'];

    $response['photo'] = dirname('http://'.$_SERVER['SERVER_NAME'].':'.$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"]).$filename;

}else{

    $response['isSuccess'] = false;

}

echo json_encode($response);

5.演示地址：https://www.wlphp.com/myblog_demo/ajaxuploadinterface/index.html            //不支持ie低版本   ie低版本不支持 FormData 对象