本帖最后由 yuupuu 于 2020-2-13 14:45 编辑
假如给你一个API接口，这个接口是一个图片上传接口，禁止跨域AJAX上传图片，除了简单的浏览器Form表单上传之外，我们还可以使用CURL模拟表单上传。
相关知识点
1、AJAX提交表单
2、CURL发起POST请求
3、JSON数据解析
4、CSS美化File控件
5、JS一键复制
API接口
| URL | NAME | | http://my.zol.com.cn/index.php?c=Ajax_User&a=uploadImg | myPhoto |
前端代码
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="color-scheme" content="light dark">
<meta name="format-detection" content="telephone=no">
<title>AJAX图片上传-ZOL接口</title>
<style type="text/css">
*{margin:0;padding: 0;}
#btn{
width: 120px;
height: 45px;
background: #39f;
line-height: 45px;
text-align: center;
color: #fff;
}
#file_select{
width: 130px;
height: 50px;
background: #333;
margin:20px auto;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 16px;
}
#file_select .file_upload{
opacity: 0;
position: relative;
top: -65px;
width: 100%;
height: 50px;
cursor: pointer;
}
#filename{
text-align: center;
}
#file_select .upload_btn{
width: 120px;
height: 45px;
font-size: 17px;
}
#imgurl{
width: 50%;
color: #333;
margin:120px auto 0;
}
#imgurl .url_div{
background:#eee;
width:100%;
line-height: 40px;
text-align: center;
font-size: 15px;
}
#copy{
width: 120px;
height: 50px;
margin:20px auto;
}
#copy .copy_btn{
width: 120px;
height: 50px;
background: #333;
color: #fff;
line-height: 50px;
text-align: center;
font-size: 15px;
}
#imgdiv{
width: 300px;
margin:20px auto;
}
</style>
</head>
<body>
<h2 id="Reg-text" style="text-align: center;margin-top: 20px;">ZOL API 图片上传</h2>
<div id="file_select">
选择文件
<form id="form1" action="##" method="post">
<input type="file" name="image" id="file" class="file_upload"><br/>
<div id="filename_div"><input type="hidden" name="imagename"></div>
<input type="submit" value="上传" class="upload_btn">
</form>
</div>
<!-- 文件名显示区域 -->
<div id="filename">未选择图片文件</div>
<!-- 图片地址显示区域 -->
<div id="imgurl"></div>
<!-- 复制按钮 -->
<div id="copy"></div>
<!-- 显示图片 -->
<div id="imgdiv"></div>
</body>
<!-- AJAX提交表单 -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function RegUser() {
//获得文件名
var filename = $("#file").val();
var imgres = filename.split('\\');
var imgname = imgres[imgres.length-1];
//把文件名展示到隐藏的表单
$("#filename_div").html("<input type=\"hidden\" name=\"imagename\" value="+imgname+">");
//AJAX POST 文件名到服务端
$.ajax({
type: "POST",//方法
url: "zol_upload.php" ,//表单接收url
data: $('#form1').serialize(),
success: function (data) {
//提交成功
if (data.result == "101") {
$("#imgurl").html("<div class='url_div'>文件名不能存在中文</div>");
}else if (data.result == "102") {
$("#imgurl").html("<div class='url_div'>未选择文件</div>");
}else if (data.fileStatus == "0") {
$("#imgurl").html("<div class='url_div'>"+data.url+"</div>");
$("#imgdiv").html("<img src='"+data.url+"' width='300'/>");
$("#copy").html("<div class=\"copy_btn\">一键复制</div>");
}else{
alert("上传错误");
}
},
error : function(data) {
//提交失败
alert("上传出现错误，只能从桌面选择图片上传");
}
});
}
</script>
<!-- 轮询文件名 -->
<script>
function daojishi() {
setInterval("getname()",1000);
}
</script>
<!-- 获取文件名 -->
<script>
function getname() {
var dsc_filename = $("#file_select .file_upload").val();
var dsc_res = dsc_filename.split('\\');
var dsc_imgname = dsc_res[dsc_res.length-1];
$("#filename").text(dsc_imgname);
}
</script>
<!-- 复制 -->
<script>
function copyArticle(event){
const range = document.createRange();
range.selectNode(document.getElementById('imgurl'));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
$("#copy").html("<div class=\"copy_btn\">已复制</div>");
}
window.onload = function () {
var obt = document.getElementById("copy");
obt.addEventListener('click', copyArticle, false);
}
</script>
</html>
后端CURL上传
[PHP] 纯文本查看 复制代码 <?php
//设置 header
header("Content-type:application/json");
//获取前端传过来的文件
$path = $_POST["imagename"];
//桌面目录
$desktop_path = 'C:/Users/Administrator/Desktop';
//图片绝对路径
$filepath = $desktop_path."/".$path;
//过滤表单
if (preg_match("/([\x81-\xfe][\x40-\xfe])/", $path, $match)) {
echo "{\"result\":\"101\"}";
}else if (empty($path)) {
echo "{\"result\":\"102\"}";
}else{
//初始化 CURL
$ch = curl_init();
//目标服务器地址
curl_setopt($ch, CURLOPT_URL, 'http://my.zol.com.cn/index.php?c=Ajax_User&a=uploadImg');
//设置上传的文件
curl_setopt($ch, CURLOPT_POST, true);
$data = array('myPhoto' => new CURLFile($filepath));
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_exec($ch);
curl_close($ch);
}
?>
这就很容易实现了CURL服务端上传图片了。
其中new CURLFile('这里只能放本地图片绝对路径');
例如：D:\phpStudy\WWW\imgupload\image\1.jpg
本程序要在php5.5以上版本，包含php5.5版本使用。
图床成品
图片地址
[HTML] 纯文本查看 复制代码 https://common-fd.zol-img.com.cn/g2/M00/07/09/ChMlWV5E7-OIHhz_AABDXKTUfgUAANT2gD6b08AAEN0012.jpg
| 
发表于 2020-2-13 14:40
