记录:php上传图片至服务器 并返回显示图片地址

转载 2018年04月16日 20:46:39


前端上传图片主要代码:

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>

这里需要注意当回调页面返回图片地址到前端页面时,需要iframe标签(这里我们将其隐藏),否则将会找不到要在页面显示的地方 <input type="text" id="cover_img_url" name="cover_img_url" size="120" readonly="readonly" />。

和一般的<form>标签相比多了一个target属性罢了,用于指定标签页在哪里打开以及提交数据
而如果设置为iframe的name值,即"post_frame"的话,就会在该iframe内打开,因为CSS设置为隐藏,因而不会有任何动静。若将display:none去掉,还会看到服务器的返回信息。

上传文件时,form表单的method、 enctype属性必须和上面的代码一样,然后将target的值设为iframe的name,这样就可以实现无刷新上传文件。

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

当选择图片提交时,还有一个隐藏域,即给远程服务器提交图片时,还需要提交回调路径,好让图片返回给本地服务器。(这里我们都是用本地服务器来进行测试)

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

远程服务器图片处理

upload_action.php

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

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

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

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

if($file['error'] > 0)
{

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

   // chmod($uploadPath, 0666);

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

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

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

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

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

        }

    }}?>

回调页面返回图片地址到前端页面

回调页面获取到远程服务器传来的图片地址后,经过"window.parent.XXX"返回给前端页面。
callback.php

<?php
  ##回调方法

$img_url = $_GET['img_url'];

// 返回数据给回调页面

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

?>




PHP上传图片并且显示

date_default_timezone_set("PRC");         //设置时区 if(count($_FILES)>0){  $sort = array("image/jpeg...
  • qq_33808550
  • qq_33808550
  • 2016-06-13 15:03:34
  • 4225

ASP.NET上传图片至数据库并显示图片

  • 2010年09月09日 15:13
  • 315KB
  • 下载

在php中处理上传的图片,并将地址保存到mysql中

if(isset($_FILES["pro_image"])){ $ret = array(); $uploadDir = 'pro_images' . '/' . $pro_id . '/'; ...
  • qq_36688146
  • qq_36688146
  • 2016-12-26 15:40:30
  • 112

【php】文件上传函数,返回值为文件在服务器端的相对地址

function upload_files($_FILES) //只针对于uploa_pic_windows 框的图片上传 { // 控制上传的 文件类型 $allowtype=array('...
  • x314542916
  • x314542916
  • 2012-09-26 01:08:55
  • 2115

php获取html上传图片并保存至本地服务器

功能描述:我以获取图片为例,使用这个标签获取本地图片(文件)并且能够显示在当前页面,然后上传至本地服务器,并存进数据库(存储的是图片的地址,并不是文件本身)。 其中,显示图片的js代码是参考网上一位...
  • zxh543362234
  • zxh543362234
  • 2015-07-23 11:34:46
  • 12140

PHP之图片上传到服务器、上传的错误类型

文件上传:数据从浏览器传到服务器; 文件就是表单中数据的一部分,提交表单时,浏览器自动提交数据到服务器,包括文件在内; 表单上传图片 临时目录中的临时文件有有效期,默认是脚本周期(即...
  • u011146511
  • u011146511
  • 2017-07-30 21:38:59
  • 432

通过表单上传图片,并存储到服务器指定目录下

文件上传处理
  • living_ren
  • living_ren
  • 2017-08-02 23:03:45
  • 261

实现:上传图片后再把图片显示到页面上去

kindeditor还是没学好,很多功能都只是
  • sunhuwh
  • sunhuwh
  • 2014-05-21 04:09:15
  • 19672

SpringMVC 上传图片保存到服务器 同时更改图片名称保存至数据库

原文链接 http://my.oschina.net/pingdy/blog/199592 摘要 在项目中涉及图片上传的时候 我们往往不会把图片直接以二进制的方式存进数据库,往往...
  • shaoswc
  • shaoswc
  • 2016-07-02 18:04:34
  • 1506

php上传本地图片到本地或者服务器上

核心两块 1)html表单 2)php处理 var_dump($_FILES); /*array(1) { ["myfile"]=> array(5) { ["name"]=> string(...
  • wuhuagu_wuhuaguo
  • wuhuagu_wuhuaguo
  • 2017-09-07 16:53:41
  • 841
收藏助手
不良信息举报
您举报文章:记录:php上传图片至服务器 并返回显示图片地址
举报原因:
原因补充:

(最多只允许输入30个字)