CURL模拟Form表单提交POST上传图片到服务器

时间 2020-02-14

标签 curl 模拟 form 表单提交 post 上传图片服务器栏目 Linux 繁體版

原文原文链接

假如给你一个API接口，这个接口是一个图片上传接口，禁止跨域AJAX上传图片，除了简单的浏览器Form表单上传以外，咱们还能够使用CURL模拟表单上传。javascript

API接口

URL	NAME
`http://my.zol.com.cn/index.php?c=Ajax_User&a=uploadImg`	myPhoto

前端代码

<!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" onsubmit="return false" action="##" method="post">
         <input type="file" name="image" id="file" class="file_upload" onclick="daojishi()"><br/>
         <div id="filename_div"><input type="hidden" name="imagename"></div>
        <input type="submit" value="上传" onclick="RegUser()" 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
//设置 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服务端上传图片了。css

其中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/ChMlWV5E7BaINZwKAAAUmH3mWi8AANT1wM19TgAABSw539.jpg