• ベストアンサー

Ajaxで画像表示

こんにちわ。 現在PHPとAjaxを使用し、サーバーのサイトパス上にある画像を表示するプログラムを作成しておりますが、どうも上手くいきません。 画像パスがサイトパス上と言う事もあり、画像をバイナリ読込み&出力する方法を試しているのですが、思い通りの結果が得られません。 そもそもAjaxでサイトパス上にある画像を表示する事ができるのかも不明なのですが。。。 どなたかご存知の方がおりましたら、教えて下さい。よろしくお願い致します。

  • PHP
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

質問者さんの言う『サイトパス』の意味が良く分かりません。 http://hogehoge.com/hogehoge/hogehoge/hogehoge.jpg のように、URL指定出来るなら『画像をバイナリ読込み&出力する』必要はありませんね。相対リンクで/hogehoge/hogehoge.jpgと言うのも同じです。 外部からアクセス出来ないディレクトリ上に画像が存在し、それを表示させたいなら、PHP側で『画像をバイナリ読込み&出力する』必要があります。例えばimg.phpを表示用スクリプトとすれば、 <?php //img.php $fname = "/usr/local/hogehoge/hogehoge.jpg";//サーバ上のパス header("Content-type: image/jpeg"); //JPEG画像だよ、というヘッダー readfile($fname); ?> とし、<img src="img.php" />で呼び出せば表示可能です。 当然、$fname を $fname = $_GET["path"];としておけば、<img src="img.php?path=hogehoge/..." />として表示する事も可能です。 さて、もう一つの分からない事。Ajaxです。Ajaxは非同期でJavaScriptを通じてXMLをサーバから取得してごにょごにょやるクライアントサイドの技術です。『Ajaxでサイトパス上にある画像を表示する事ができるのか』と書いてあっても、誰も回答を出す事は出来ないのではないでしょうか。 基本的に、Ajaxはクライアント側のスクリプト、PHPはサーバ側のスクリプトです。勘違いの無いよう。 参考まで。

crazy_c
質問者

お礼

親切なご回答ありがとうございました。 上記を参考にしてやってみたところ、希望する動作をいたしましまた。 本当にありがとうございました。 また私の会社では、サーバー上のパスをサイトパスと呼んでいるのでこれがまた一般的でないことも知りました。。。もう一度初歩から勉強しなおします。。。 本当にありがとうございました。

その他の回答 (1)

  • asuncion
  • ベストアンサー率33% (2126/6288)
回答No.1

どんなプログラムを書いていて、どううまくいかないかを 開示すれば、どなたか詳しいかたから回答が届くかもしれません。 「どうもうまくいかない」だけでは解決しづらいことは確かです。

crazy_c
質問者

お礼

なんともぶしつけな質問に対し、回答して頂きありがとうございました。そもそも私には「質問の仕方」という所から学ばなければいけないようです。。。 以後、気をつけます。 本当にありがとうございました。

関連するQ&A

  • Ajaxの動き

    googleと本で調べたのですが、今いちわからないため質問させてください。 (1)教科書から、Ajaxは、XMLをJavascriptでやり取りしている非同期通信という定義なのはわかりましたが、結局、AJAXを使うということは、HTMLに、<Script>のタグで、JQueryなどのパスを書くということなのでしょうか? AJAXは概念的なものであって、プログラムやモジュールそのものではないと捉えています。 (2)Ajaxによる非同期通信は、何をきっかけとして通信が始まるのでしょうか? 通常は、FORMがSUBMITされたときに、サーバにリクエストがいくという認識ですが そもそも、Ajaxは、何をイベントとしてハンドルしているのでしょうか?(何をきっかけに処理が始まっているのでしょうか?) HTMLに、<Script>のタグで、JQueryのパスを書くと、ハンドルする機能が使用されるのでしょうか? Ajaxでも「リクエスト」は行われているけれども、処理結果として戻されるものがXML形式であるだけだという理解で良いのでしょうか?

    • ベストアンサー
    • AJAX
  • どこまでがAjaxなの?

    現在、Ajaxを勉強中の初心者です。 質問のタイトル通りなのですが、どこまでがAjaxなのかイマイチわかりません。 AjaxはJavaScript + XMLで非同期通信をする技術ですが 1.画像やプログラムファイルをサーバPC側に入れておいてクライアントPC側でラジオボタンの選択によって画像表示を変えるのはAjaxですか、それともただのJavaScriptですか? 2.サーバを使って以下のような入力可能文字カウンタを表示させるのはAjaxですか、それともただのJavaScriptですか? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文字のカウント</title> </head> <body> <form>   <textarea cols="46" rows="5" id="title1" name="title1" size="50"></textarea><br />   あと<span id="inputlength1">20</span>文字入力できます<br /> </form>   <script type="text/javascript"><!--     function lengthCounter (node, max, cut) {       max = max || Number (node.maxLength) || 20;       return function () {         var rest = max - node.value.length;           if (rest < 0) {             if (cut) {               alert ('20文字以内にしてください');               rest = max;               node.value = node.value.substring (0, max);             }           }           return rest;       };     }     function dispValue (node, cbFunc) {       return function () {         node.firstChild.nodeValue = cbFunc ();   };     }     setInterval (dispValue ( document.getElementById ('inputlength1'),     lengthCounter (document.getElementById ('title1'), 20, true)), 100);   // --></script> </body> </html> 3.「googleサジェストのインクリメンタル検索にはAjaxの技術が利用されている」←ここでのAjaxにはPHPも含まれますか? 私はPHPをAjaxの枠には入れないような気がします。正確にはPHPとAjaxでインクリメンタル検索機能がつくられていると思うのですが。 4.PHPのみでAjaxと同じ非同期通信ができればそれはAjaxと呼ぶのか? よろしくお願いします。

    • ベストアンサー
    • AJAX
  • Ajaxから画像ファイルへのリクエスト

    こんにちは。 現在、prototype.jsを使用してAjaxについて勉強をしています。 【質問】 画像ファイルへAjax.Requestを使用してリクエストを送信した場合、JavaScriptでは受信したバイナリデータを扱う事は出来ないのでしょうか。 【サンプルコード】 new Ajax.Request("hoge.gif", { method: "get", onSuccess:function(httpObj){ var body = httpObj.responseBody; } }); ※ 変数bodyにバイナリデータが入っていると思ってます。 色々調べて周ってみたのですが、画像等のバイナリファイルへリクエストを送信している様な例が無かったので、Ajaxでの通信はテキストデータのやりとりを前提としているのかなと、勝手に予測してみたのですが、どうなんでしょうか。 下記サイトでHttpRequestオブジェクトについて調べてみても、MIMEを取って来れなさそうだったので、やはり扱え無いのかなと思いました。 http://www.devguru.com/Technologies/xmldom/quickref/obj_httpRequest.html あと、余談ですが上記サンプルコードの変数bodyをtypeof()に渡すとunknownになるのですね。。。(IE6) 質問は以上です。 どなたか、暇な時にでもご回答頂ければ幸いです。

  • 画像バイナリデータの処理について

    お世話になります。 ブラウザから、画像データをアップロードし、サーバのデータベース(MySQL)にバイナリデータとして記録した画像データを、AJAXで取得し、ブラウザでJavascriptを使用して表示させたいと考えています。 現在、バイナリデータをAJAXで取得するところまで作成したのですが、” $.' ",#...”といったデータとなっており、文字列として表示されてしまっています。 これをJavascriptで画像データとして認識させる方法はございますでしょうか? よろしくお願いいたします。

  • Ajaxを用いた画像検索インタフェースの利点って???

    現在Ajaxを用いた画像検索インタフェースの作成をしています。 最初は「ページ遷移なしでデータが表示できる」ぐらいの感覚で作成していましたが、 最近、本当にそれだけなのかと思い始めてしまいました。 そこで質問です。 画像検索インタフェースとして、Ajaxを用いて開発する利点はいったいどこにあるのでしょう? Ajaxの最大の利点として「サーバとの非同期通信が実現できる」ことはわかります。 すなわち、「ユーザがどのタイミングでサーバとの通信をできるか設定できる」ってことなんでしょうか? よくわかりません。 お力添えをお願いいたします。

    • ベストアンサー
    • AJAX
  • innerHTMLで表示完了後に、Ajaxにて通信を実施

    innerHTMLで表示完了後に、Ajaxにて通信を実施 お世話になります。 現在、PHP + Ajax + MySQLでWebアプリケーションを作成中です。 読み込みが既に完了した画面から、 あるイベントにてAjax + PHPにてMySQLからデータを取得し、 その結果を受け取り、innerHTMLにて動的に結果を表示させています。 問題となっているのは、 MySQLからデータを取得するのに時間がかかり、 2、3秒ほど画面が固まった状態となるため、その対策を実施したいのですが 思うように実現できておりません。 実現したいことは、MySQLからデータを取得する前に、innerHTMLで あらかじめ『しばらくお待ち下さい』のようなメッセージを表示したいのですが 表示される前にMySQLからデータを取得する処理が開始され、 『しばらくお待ち下さい』が表示されません。 以下の方法では、表示されるようです。 (1)メッセージとデータ取得処理の間に確認ダイアログを表示させる。 (2)ウェイト処理を実施 できれば、innerHTMLにて表示が完了されてから、すぐに Ajaxにて通信が開始されるような方法を探しているのですが、 何か方法はありませんでしょうか。 (そもそも、DBからデータを取得する時間にかかりすぎている点は、 今後もSQL文を見直すなど、対策はしたいと考えております。) 少しでもご存知の方がいらっしゃいましたら、 ご教授よろしくお願い致します。 以下に、動作させているイベントを記載致します。 //呼び出されるイベント function test() { var result = document.getElementById("result"); result.innerHTML = "<p>しばらくお待ち下さい...</p>"; //↑↑これが表示されてから、以下の通信を実行させたいのですが、表示されません。 //ここにウェイトするような処理がある場合は、表示されます。 //XMLHttpRequestオブジェクト生成 var xmlhttp = createHttpRequest(); if (xmlhttp == null) { return null; } //サーバに要求 sendRequest(xmlhttp, "POST", "test.php", false, null, getResult); return; } //サーバからの応答をxmlhttpにて受信 function getResult(xmlhttp) { //サーバから出力された文字列をinnerHTMLにて出力 var result = document.getElementById("result"); result.innerHTML = xmlhttp.responseText; return; } 【環境】 ブラウザ:IE8 PHP:5.2 以上、よろしくお願い致します。

    • ベストアンサー
    • AJAX
  • CSVで画像をDBにつっこみたい

    お疲れ様です。 いつもお世話になっております。 現在PHP+MySQLで、名刺の管理ソフトを社内向けに作っています。 名刺の画像もレコードとしてくっつけるため、BLOBでデータを持っています。 一件一件のデータのインサートはできるのですが、CSVでのインサートの仕様を今検討していまして、皆様のお力を借りたく思います。 よろしくお願いします。 仕様 ・名刺画像はBLOBでDBにインサートする ・データはCSVであげる 対応検討 ・CSVでバイナリを扱える方法を探す  →一枚一枚バイナリに変換→CSVなので、手間な上に扱いにくい ・パスだけCSVに指定、その後パスをさらって画像だけPHPでバイナリ化、インサート  →パスからPHPでアップ処理ができるのか今のところ不明 ・CSVにファイル名だけ記載してもらい、CSV+画像をzipしてもらってアップ。execで解凍し、バイナリ化し、インサート  →外部コマンドの許可が必要。 本当は・・・ ・ファイルDIRを作ってファイルを置き、CSVにはパスだけ記載。  →一番楽だが今回は対象外。 てなところなんです 何かいい案はないでしょうか。

    • ベストアンサー
    • PHP
  • DBからPHP出力された画像の情報取得について

    Linux、PHP4.3.11、MySQLの環境でPHPスクリプトの作成を試行しています。 MySQLの BLOB型 に格納された画像バイナリを呼び出してそのまま出力するスクリプトを作成し、同スクリプトから出力された画像ファイルのサイズや種別情報を「getimagesize()」で取得しようとしているのですがうまく行きません。 画像出力の処理は、MySQLからバイナリのデータを読み出して HTTP HEADER をつけてそのまま出力する処理を行っています。 // 画像出力処理 <?php $image = /* DBからバイナリを取得する処理 */ header("Content-type: image/jpeg\n\n"); echo $image; exit(); ?> 上のスクリプトをWEBブラウザで呼び出すと画像を表示する事ができます。 また、<img src="画像出力スクリプトのURL">としてHTML中に記述しても画像を表示できます。 しかし、getimagesize() で画像情報を取得しようとしても False となり、画像の構成情報を取得できません。 // 画像情報取得処理 <?php $src = "http://画像出力スクリプトのURL"; var_dump(getimagesize($src)); exit(); ?> $src にローカルにある実ファイル画像を指定した場合( "./hoge.jpeg" )や 他のWEBサーバ上にある画像ファイルを指定した場合( "http://よそのサーバURL/hoge.jpeg" )等は画像情報をちゃんと取得できます。 画像出力用のスクリプトで行わなければならない処理が何か不足しているのでしょうか。 原因となりそうな物が分かる方がいらっしゃいましたらご教示お願いいたします。

    • ベストアンサー
    • PHP
  • Ajaxでウインドウ出力について

    CGI上で、HTMLのコードを書いて、WEBページを出力(表示)することが出来ますが、それと同じようなことが、Ajax(Jqueryを使っています)で出来ませんでしょうか。 CGIを使ってやろうとしていたのですが、同じページでFormタグを多用しており、CGI以外の方法でページ出力をしようと思います。 HTMLからOnClickで値をAjaxに渡して、データベースとやりとりをし、Ajaxに値を戻してそれを元にページを作成して出力をさせたいのです。(別ウインドウを立ち上げで) このようなことは出来ますでしょうか。 また、出来るようでしたらどうやってプログラムを作成すればいいでしょうか。 教えてください。よろしくお願いいたします。

    • ベストアンサー
    • AJAX
  • prototype.jsのAjax.Request

    javascript部分 function loadDataFile(intvalue){  new Ajax.Request("uploader.php",{   method:'post',   onComplete:function(httpObj){    test(intvalue);   }  }); } function test(intvalue){  // 画像表示のための処理 } htmlのform部分 <form action="sample.php" method="post" name="syouhintouroku" enctype="multipart/form-data">  <input type="file" id="img_path1" name="img1" value="" />  <input type="button" value="画像を確認" onclick="loadDataFile(引数);" /> </form> 今は、ざっとこのような感じで書いています。 「画像を確認」ボタンが押されると画像がアップロードされるようにしたいのですが画像が送られていません。 ちなみに、uploader.phpというのはPOST送信されてきたファイルをサーバー側のファイルに保存する処理をしています。通常のformのsubmitでは画像はちゃんとアップロードされるのでPHPファイルのほうに問題はないと思われます。 もしかして、Ajax.Requestでは画像が送れないとか書き方が違うとかいうことなんでしょうか? よろしくお願いします。

    • ベストアンサー
    • AJAX