php上传图片到远程服务器并返回图片地址到本地显示

本示例将演示一个简单的上传图片到远程服务器,然后生成图片路径后通过提交的回调路径返回给本地服务器,最后将图片地址显示在前端页面。

本项目应用三个文件,即前端选取图片的页面,然后提交图片到远程服务器处理文件,返回前端页面的回调文件。

一、前端上传图片页面

upload_test.html





    Upload Image
    


     
     

      
主题封面图:    图片格式 jpg jpeg gif png
封面图URL: *

这里需要注意当回调页面返回图片地址到前端页面时,需要iframe标签(这里我们将其隐藏),否则将会找不到要在页面显示的地方

和一般的

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

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

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

 

二、远程服务器图片处理

upload_action.php

 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

window.parent.document.getElementById('cover_img_url').value='{$img_url}';
";

如果我们的前端页面upload_test.html没有iframe标签,则不会返回找到ID为“cover_img_url”的输入框的值,会跳转到空白页。

四、上传到服务器的文件写入日志记录

写入日志:
 $file = $this->file = $_FILES[$this->fileField];

        // 要写入文件的文件名(可以是任意文件名),如果文件不存在,将会创建一个
        $log_file  = '../log/log.txt';
        $time = date("Y-m-d H:i:s", time());
        $log_content = var_export($_FILES, true) ."Time:{$time} \r\n";
        file_put_contents($log_file, $log_content, FILE_APPEND);
        
        
        
// 结果记录
array (
  'name' => 'myImage.jpg',
  'type' => 'image/jpeg',
  'tmp_name' => '/Applications/XAMPP/xamppfiles/temp/phpod5VA4',
  'error' => 0,
  'size' => 249318,
)
array (
  'file' => 
  array (
    'name' => 'myImage.jpg',
    'type' => 'image/jpeg',
    'tmp_name' => '/Applications/XAMPP/xamppfiles/temp/phppRvcVe',
    'error' => 0,
    'size' => 249318,
  ),
)Time:2016-09-10 17:32:30 

其他上传相关示例:
php+ajax实现图片文件上传功能实例

你可能感兴趣的:(php)