Ajaxでファイル名を指定し、PHPでサーバー内の画像やPDFをBase64エンコード（変換）後、JSONでJavascriptに送信後、HTMLに埋め込んで表示させる。

パソコン
2022.01.22

WEBサイト（HTMLに JPEGやPNGやPDF を埋め込む）

JPEGやPNGやPDFは、Base64にエンコードした文字列に変換することができます。

この文字列をHTMLに埋め込むことでJPEGの画像やPDFを表示することが出来ます。

HTMLに埋め込むには「data URI scheme」という書式で書きます。

data:[MIME（コンテンツタイプ）];[エンコード方式],[データ]

＜例＞data:image/png;base64,R0lGODlhIAAgALMAAAAAAMHi9zYA2WZmZ・・・・

https://hakuhin.jp/js/data_uri_scheme.html#DATA_URI_SCHEME_00

実際にHTMLに記載する場合は下記のようなフォーマットになります。

＜ 画像の場合＞ 

<embed type="image/png" src="data:image/png;base64,iJKfHUS...">

<img src="data:image/png;base64,iJKfHUS...">

＜PDFの場合＞ 

// embed要素は、外部のアプリケーションやインタラクティブ・コンテンツをドキュメントへ埋め込みます。
<embed type="application/pdf" src="data:application/pdf;base64,jz9MNCjI1IDAgb2JqDTw8L...">

// Object要素は、外部リソースをドキュメントへ埋め込みます。
<object type="application/pdf" data="data:application/pdf;base64,jz9MNCjI1IDAgb2JqDTw8L..."></object>

// a（アンカー）要素 は、URLを指定し、ハイパーリンクを作成する
<a href="data:application/pdf;base64,jz9MNCjI1IDAgb2JqDTw8L..."></a>

embed要素とObject要素の違いは、 embed要素 はプラグインを必要とするデータの埋め込みに利用し、 Object要素 は外部リソース全般に利用するみたいです。

MIME（マイム）とは？

WEBサーバとWEBブラウザの間でやり取りするデータのファイル形式を表します。
MIMEによってやり取りするデータと拡張子が関連付けされます。
つまりファイルの拡張子がsample.pdfの場合、下記のように記載します。

<a href="sample.pdf" type="application/pdf">サンプル</a></p>

example.jpg の場合はこちらです。

<object data="example.jpg" type="image/jpeg" width="300" height="150"></object>

拡張子PDFは、「application/pdf」が既定値となっており、 type=”application/pdf” をあえて記載する必要はありません。
object要素の場合は、data属性かtype属性のどちらか1つは必ず指定しなければならないというルールがあります。今回は、 data属性 がありますので、 type=”image/jpeg” は記載する必要はありません。

その他のMIMEは下記になります。
MIMEの形式は「ファイル分類/ファイル種類」となっています。
MIMEタイプは大文字小文字は区別しませんが、一般的にはすべて小文字で記述されます。

ファイルの種類 MIMEタイプ
テキストファイル text/plain
HTMLファイル text/html
JavaScriptファイル text/javascript
CSSファイル text/css
JPEGファイル image/jpeg
PNGファイル image/png
GIFファイル image/gif
MP4ファイル video/mp4
WAVEファイル audio/wav
PDFファイル application/pdf

ツールを利用しBase64にエンコード（変換）する

＜対象ファイル：画像やPDFの場合＞

Base64エンコード(ファイル)(Base64 Encode Binary)というサイトがありますので

こちらが利用できるかと思います。

Base64エンコード(ファイル)(Base64 Encode Binary)｜Web便利ツール@ツールタロウ
ファイルをBase64エンコードするWebツール。PC・スマートフォン・タブレットのブラウザで使えます。常時SSL対応。URLセーフにも対応。
tool-taro.com

Google Chromeのデベロッパー（検証）ツールで Base64にエンコード（変換）する

＜対象ファイル：画像の場合＞

PHPでファイルをBASE64に変換する

下記の base64エンコード の変数 $data が変換したデータになります。


// 画像指定
$file_name = 'example.jpg';

// base64エンコード
$data = base64_encode(file_get_contents($file_name));

// MIME情報 jpgの場合
$file_ext ="image/jpeg";

// HTMLでは<img src="' . $src . '">とすれば画像を表示する
$src = 'data: ' . $file_ext . ';base64,' . $data;

実装方法

HTML側 — index.html

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="ajax.js"></script>
  <title>IDをチェックし、合致すればファイルを表示するフォーム</title>
</head>
<body>
  <div>
    <form method="post">
      <h1>入力フォーム</h1>

      <div class="">
        <label>ID</label>
        <input type="text" class="" id="" />
      </div>

      <button type="button" class="" id="sub">送信</button>
    </form>

    <div id="info"></div>
  </div>
</body>
</html>

Javascript(jQuery) — ajax.js

$(function() {
    $('#sub').click (function () {

        $.ajax({
            url: "json.php",
            type: "post",
            dataType: "text",
            data:{'name':$('#name').val(),'email':$('#email').val()}

        }).done(function (response) {
            var array = JSON.parse(response);
            $("div#info").html('<div class="" id="">' + array + '</div>');

        }).fail(function (xhr,textStatus,errorThrown) {
            alert('error');
        });
    });
});

サーバーサイド:PHP — json.php

<?
// $id = $_POST['id']; ・・・古い記述方法
$id = filter_input(INPUT_POST, 'id');	

if ($id == "11111") {
   $file_name = 'example.jpg';
   $data = base64_encode(file_get_contents($file_name));
   $base64_src = 'data: ' . $file_ext . ';base64,' . $data;
}else{
   $base64_src = '';
}
$array = [ $id , $base64_src];

header("Content-type: application/json; charset=UTF-8");
echo json_encode($array);
exit;
?>

PHPの header 送信について

どの型で返すかは Content-Type を使って指定する 


// json 型で送信する場合
header("Content-type: application/json; charset=UTF-8");

// text (プレーンテキスト)型で送信する場合 ・・・　デフォルト
header('Content-type: text/plain; charset=utf-8');

// HTML 型で送信する場合
header('Content-Type: text/html; charset=utf-8');

JSON のデータサイズが大きい場合

phpファイルから送信されるJSON のデータサイズが大きい場合、受信側のjavascript(Ajax)の処理が先に走しる場合があります。
その場合、下記で対応できそうです。

$.ajax({
	url: 'json.php',
	dataType: 'json',
	success : function(data){
		for (i in data) {
　　　　　　　　//通常のJSON データの処理
		}
	},
	complete : function(){
		//データをすべて受信した後の処理
	}
})

コメント

タイトルとURLをコピーしました