文档章节

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

Corwien
 Corwien
发布于 2016/06/16 01:12
字数 901
阅读 2029
收藏 2

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

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

上传图片页面

###一、前端上传图片页面 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" />&nbsp;&nbsp;<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>
";

输入图片说明

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

输入图片说明

© 著作权归作者所有

Corwien
粉丝 27
博文 149
码字总数 115164
作品 0
广州
程序员
私信 提问
又一编辑神器-百度编辑器-Ueditor

又一编辑神器-百度编辑器-Ueditor (Liondenhsdlionden@gmail.com 转载说明)     前段时间发表过一篇关于“KindEditor在JSP中使用”的博文。这几天在沈阳东软进行JavaWeb方面的实习工作...

KavenSu
2014/06/26
174
0
javascript实现图片伪异步上传

实现逻辑 首先要知道, ajax无法发送带有文件的post请求所以,所以还是要用同步的方式,但是刷新的时候,我们不要在原来的页面刷新,去一个隐藏的iframe里面刷新,form表单中action正常填写处...

rand
2018/08/27
0
0
百度编辑器-Ueditor

 前段时间发表过一篇关于“KindEditor在JSP中使用”的博文。这几天在沈阳东软进行JavaWeb方面的实习工作,在一个CMS系统的后台和博客板块中又要用到文本编辑器,突然发现了这个——百度编辑...

zyt_1978
2016/05/28
308
1
Windows Server2012上使用Nginx做文件服务器

由于项目中用到了大量的文件上传和删除,考虑到安全的因素,所以整体的思路是使用FTP从主服务器把文件资源上传到文件服务器上。 FTP上传到服务器的代码如下(简单附加一下,具体的网上很多)...

问题达人
2016/03/24
159
0
VUE动态绑定audio/video/img的src不能播放或显示

写个项目,要求要本地上传音视频至服务器,再回显可播放。 当前项目使用了elementUI+Vue 上传图片,请求接口,将图片或者音频文件提交给后台,后台返回存储图片或者音频的ID,因为后台存到m...

李晓艳
2018/09/04
5.1K
2

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
今天
4
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
5
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部