Record: PHP uploads pictures to the server and returns the display picture address-PHP Tutorial-php.cn

Record: PHP uploads pictures to the server and returns the display picture address

不言

Release： 2023-03-24 07:42:01

Original

9017 people have browsed it

This time I will bring you PHP to upload pictures to the server and return the display image address. What are the precautions for PHP to upload and save to the folder? Here is a practical case, let's take a look.

Main code for uploading images on the front end:

upload_test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Upload Image</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
     <!--注意这里的iframe标签-->
     <iframe  name="post_frame" style="display:none;"> </iframe>

      <form id="photo_upload" action="upload_action.php" method="post" target="post_frame"  enctype="multipart/form-data">              
        <table width="100%" cellspacing="0" cellpadding="0" border="0" >
          <tbody>
            <tr>  
              <th style="border-bottom:1px solid #D1E0EB;text-align: right;">主题封面图：</th>
              <td style="border-bottom:1px solid #D1E0EB">
                <input type="file" id="file" name="opus" value="" width="200" /> <input style=" height: 40px;width: 45px;" type="submit" value="上传" name="submit" />  <span> 图片格式 jpg  jpeg gif  png  </span>
                <input type="hidden" name="callbackUrl" value="http://localhost/url_test/callback.php"  />
              </td>
            </tr>
          </tbody>
        </table>
      </form>

        <table width="100%" cellspacing="0" cellpadding="0" border="0" >

           <tr>
              <th style="border-bottom:1px solid #D1E0EB;text-align: right;">封面图URL：</th>
              <td style="border-bottom:1px solid #D1E0EB">
                <input type="text" id="cover_img_url" name="cover_img_url" size="120" readonly="readonly" /><span>* 
                <span style=" height: 100px;" id="show_img"></span></span>
              </td>
            </tr>
      </table>
 </body>
</html>

Copy after login

It should be noted here that when the callback page returns the image address to the front-end page, the iframe tag is required (here we hide it), otherwise the place to be displayed on the page will not be found< input type="text" id="cover_img_url" name="cover_img_url" size="120" readonly="readonly" />.

Compared with the general

tag, it only has one more target attribute, which is used to specify where to open the tab and submit data.
If it is set to the name value of the iframe, that is, "post_frame", it will be opened in the iframe. Because the CSS is set to hidden, there will be no movement. If you remove display:none, you will also see the return information from the server.

When uploading files, the method and enctype attributes of the form must be the same as the above code, and then set the target value to the name of the iframe, so that files can be uploaded without refreshing.

<iframe  name="post_frame" style="display:none;"> </iframe>

Copy after login

When you choose to submit an image, there is also a hidden field, that is, when you submit an image to the remote server, you also need to submit a callback path so that the image can be returned to the local server. (Here we all use the local server for testing)

 <input type="hidden" name="callbackUrl" value="http://localhost/url_test/callback.php"  />

Copy after login

Remote server image processing

upload_action.php

<?php
/**
 * 图片上传处理
 * User: CorwienWong
 * Date: 16-06-15
 * Time: 00:33
 */
header("Content-type:text/html;charset=utf-8");

// 配置文件需要上传到服务器的路径，需要允许所有用户有可写权限，否则无法上传成功
$uploadPath = &#39;uploads/&#39;;

// 获取提交的图片数据
$file = $_FILES[&#39;opus&#39;];

// 获取图片回调路径
$callbackUrl = $_POST[&#39;callbackUrl&#39;];

if($file[&#39;error&#39;] > 0)
{

    $msg = &#39;传入参数错误&#39; . $file[&#39;error&#39;] . "  ";
    exit($msg);
}
else
{

   // chmod($uploadPath, 0666);

    if(file_exists($uploadPath.$file[&#39;name&#39;])){
       $msg = $file[&#39;name&#39;] . "文件已经存在！";
       exit($msg);
    }
    else
    {
        if(move_uploaded_file($file[&#39;tmp_name&#39;], $uploadPath.$file[&#39;name&#39;]))
        {

          $img_url = "http://localhost/url_test/".$uploadPath.$file[&#39;name&#39;];
          $img_url = urlencode($img_url);

          $url = $callbackUrl."?img_url={$img_url}";

          // 跳转
          header("location:{$url}");
          exit();

        }
        else
        {
          exit("上传失败！");

        }

    }}?>

Copy after login

The callback page returns the image address to the front-end page

After the callback page obtains the image address from the remote server, it passes "window. parent.XXX" is returned to the front-end page.

callback.php

<?php
  ##回调方法

$img_url = $_GET[&#39;img_url&#39;];

// 返回数据给回调页面

echo "
<script>window.parent.document.getElementById(&#39;cover_img_url&#39;).value=&#39;{$img_url}&#39;;</script>
";

?>

Copy after login

Related recommendations:

PHP upload size limit modification

The above is the detailed content of Record: PHP uploads pictures to the server and returns the display picture address. For more information, please follow other related articles on the PHP Chinese website!