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 对象
