Home >Backend Development >PHP Tutorial >Record: PHP uploads pictures to the server and returns the display picture address

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

不言Original: 2018-05-15 14:37:309050browse

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>

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 found1dcd7668715d52fa70e9dc15513c5be0.

Compared with the general ff9c23ada1bcecdd1a0fb5d5a0f18437 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>

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"  />

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("上传失败！");

        }

    }}?>

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>
";

?>

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!

php css html display input

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：PHP method to upload large files (modify Apache configuration file)Next article：PHP method to upload large files (modify Apache configuration file)

See more

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

Related articles