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

Author:TANKING
Date:2020-2-13
WeChat:face6009
Web:LIKEYUNBA.COM前端

相關標籤/搜索

每日一句