記録: PHP は画像をサーバーにアップロードし、表示画像アドレスを返します。
- 不言オリジナル
- 2018-05-15 14:37:309010ブラウズ
今回は、PHP で画像をサーバーにアップロードし、表示画像のアドレスを返す方法について説明します。実際のケースを見てみましょう。
フロントエンドで画像をアップロードするためのメインコード:
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 タグは必須です (ここでは非表示にします))。そうでない場合は、場所 52b2afa009e0abbef92fc5829a5f2747ページに表示されるものが見つかりません。
一般的な ff9c23ada1bcecdd1a0fb5d5a0f18437 タグと比較すると、タブ ページを開く場所とデータを送信する場所を指定するために使用される target 属性が 1 つだけあります。
iframeのname値、つまり「post_frame」に設定すると、CSSがhiddenに設定されているため、iframe内で開かれます。 display:none を削除すると、サーバーから返された情報も表示されます。
ファイルをアップロードするとき、フォームのメソッド属性と enctype 属性は上記のコードと同じである必要があり、その後、ファイルを更新せずにアップロードできるように、ターゲット値を iframe の名前に設定します。
<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 は画像をサーバーにアップロードし、表示画像アドレスを返します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。