- ベストアンサー
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） 質問は以上です。 どなたか、暇な時にでもご回答頂ければ幸いです。
- t_wada
- お礼率60% (3/5)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
対象が画像の場合、画像ファイルを解析してcanvasやVMLで表示することも出来ます。 （1x1ピクセルの<div>を大量に作ったり、テーブルのセルを利用してもいいですが、、、） CやJAVAならlibpngやlibjpegなどのライブラリで画像を読むことが出来ますが、 JavaScriptではたぶん自分で作らないと行けないんじゃないかな、と思います。 が、それが出来れば、ブラウザで画像編集ができるようになります。 （現在公開されている画像編集スクリプトは、フィルターやレイヤー（スタイルシート）を使って表示した後、サーバー側で（JavaScriptでどんなレイヤーを表示したか、という情報を元に）編集、保存していると思います サーバーの処理はファイルの保存処理だけになりますから、サーバーの負荷はほとんど無くなるはずです） BMPや、XBMなら比較的簡単につくれると思います。 （XBMはある意味テキストファイルですが、、、） バイナリデータの送受信を行わないのは、それを表示する手段が簡単ではないからだと思います。 画像の表示なら、 <img id="view"> document.getElementById('view').src='mypicture.jpg'; このほうが簡単ですからね。 prototype.jsのサポート状況はわかりませんが、 XMLファイルを受信することが前提になっているライブラリではバイナリデータは取得出来ません。（responseTextを使わないため） こういう特殊な物を作るなら、自分でXMLHttpRequestライブラリを作った方がいいと思います。 すくなくとも画像処理よりははるかに簡単ですから。 http://www.onicos.com/staff/iz/amuse/javascript/expert/ ここのinflate.jsやdeflate.jsを使ってzip圧縮したファイルをJavaScriptで解凍して表示、 ブラウザで編集してzip圧縮して送信、 ということもできるかもしれません。（思っただけ。）
その他の回答 (1)
- maura
- ベストアンサー率46% (48/104)
JavaScriptでバイナリファイルの中身にアクセスできた http://d.hatena.ne.jp/k12u/20061216
お礼
ふむふむ、コレを利用すればバイナリデータに情報を保存して、そこからの読み込みに使えそうですね。 ありがとうございました。
関連するQ&A
- 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
- ajaxでエラー処理
お世話になります。 prototype.jsを使ってajaxのエラー処理を考えております。 そこで質問なのですが、以下のソースで OK.phpでは正常に処理が行われ、 NG.phpでは強制的にonFailure処理を行わせたいと考えております。 PHP側(NG.php)で、操作出来ませんでしょうか？ よろしくお願いいたします。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function ajax(fName) { var filename = fName + "?cache="+(new Date()).getTime(); new Ajax.Request(filename, { method: "get", onSuccess: displayData, onFailure: displayError }); } function displayData(httpObj) { $("result").innerHTML = httpObj.responseText; } function displayError(httpObj) { $("errMsg").innerHTML = httpObj.responseText; } // --> </script> </head> <body> <input type="button" value="正常処理" onClick="ajax('OK.php')"><br> <input type="button" value="エラー処理" onClick="ajax('NG.php')"><br> <div id="result"></div> <div id="errMsg"></div> </body> </html>
- 締切済み
- JavaScript
- Ajax.RequestでXMLデータをパース
お世話になります。 Ajax.Requestをして、返ってくるデータがXMLなのですが このXMLをパースして表示したいのですが 何か方法はありませんでしょうか？ もしかしたら簡単なことなのかもしれませんが ご存知の方がいらっしゃいましたら ご教授よろしくお願いいたします。 ajax.js //////////// function exec(fname,dispArea) { var httpObj = new Ajax.Request(fname, { method:'GET', onSuccess:function(req) { var text = req.responseText; $(dispArea).innerHTML = text; } } ); } ///////////test.html <script language="javascript" type="text/javascript" src="prototype.js"></script> <script language="javascript" type="text/javascript" src="scriptaculous.js"></script> <script language="javascript" type="text/javascript" src="ajax.js"></script> <span id="disp">exec('hoge.xml', 'disp');</script></span> //////////// hoge.xml <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="hoge.xsl" ?> <top> <list> <row>テスト１</row> </list> <list> <row>テスト２</row> </list> <list> <row>テスト３</row> </list> </top> //////////// hoge.xsl <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="top"> <html><title>XMLパース</title> <body> <xsl:for-each select="list"> <xsl:value-of select="row" /> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>
- ベストアンサー
- JavaScript
- Ajax.Request 進捗状況が分からないIE
サーバから定期的に送られてくる文字列を、受信した時点で表示したいのですが、IE6だとうまく行きません。(FireFox2ではうまく行きました) IEだと、readyState値の変化時しか、イベントが発生してないような感じなのですが… よい方法はあるのでしょうか？ ご教授よろしくお願い致します。 以下、ソースコードです。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>進捗バー</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"><!-- function loadFile(fName) { var arg2 = { method: 'get', onInteractive: function (httpObj) { $("result").innerHTML = httpObj.responseText; } } new Ajax.Request(fName+"?time="+(new Date()), arg2); } // --></script> </head> <body> <form> <input type="button" value="ファイル読み込み" onClick="loadFile('ret.php')"><br /> </form> <div id="result"></div> </body> </html>
- ベストアンサー
- JavaScript
- 【Ajax】SHIFT-JISの文字化け
AjaxのSHIFT-JIS文字化けで悩んでいます。 下記コードです。※prototype.js使用※ <html> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> <title>Sample</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"><!-- function loadHTMLFile(fName) { new Ajax.Request(fName, { method: "get", onComplete: displayData }); } function displayData(httpObj){ alert(httpObj); $("result").innerHTML =httpObj.responseText; } // --></script> </head> <body> <h1>サーバー上のHTMLファイルを読み込む</h1> <form> <input type="button" value="●●.htmlファイルを読み込み" onClick="loadHTMLFile('●●.html')"> </form> <div id="result"></div> </body> </html> ●●.htmlおよび、このコードを記述しているファイルのエンコードは "SHIFT-JIS"です。 ●●.htmlのエンコードを"UTF-8"にするとうまく表示できます。 "SHIFT-JIS"同士のやり取りの方法を教えて頂きたく思います。 宜しくお願い致します。 ※サーバはwindow用XAMPを自分のローカルに使用しています。 アパッチの設定はいじっていません。
- 締切済み
- AJAX
- Ajax + Servlet のリクエスト時の文字化けについて
いつもお世話になっております。 prototype.jsを用い、ajaxでservletにリクエストしていますが、 servletのjavaがパラメータを受け取ると、日本語が文字化けしてしまいます。 new Ajax.Request('Test', { method: 'post', onSuccess: displayTest, parameters: "param1=" + "あいうえお" }); 上記param1をサーバー上で受け取ると以下のようになってしまいます。 縺ゅ＞縺?∴縺? jspは <%@ page language="java" contentType="text/html; charset=Windows-31J" pageEncoding="Windows-31J" %> <meta http-equiv="Content-Type" content="text/html; charset=Windows-31J"> 等の設定をしており、文字コードの変換が上手くいっていないと思うのですが、どこの設定を変更すればよいかアドバイスを頂ければと思います。 よろしくお願いします。
- ベストアンサー
- AJAX
- XMLデータをhttpリクエストで送信したい
まずlibxml2ライブラリを使用してxmlDocPtr型のXMLデータを作成しました。 これをHTTPリクエストのボディ部に突っ込んで（POST？）リクエスト送信したいのですが、 どうすれば送信できるのでしょうか。 xmlDocPtr型のXMLデータをchar型に格納すればいけるのかなと思っているんですが。 libxml2ライブラリでxmlDocPtr型データをバイナリに変換するAPIがよく分かりません。 お知恵を拝借させて下さい。
- 締切済み
- C・C++・C#
- POSTだとAjaxをループできない
<html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title>Ajax</title> <script type="text/javascript"> <!-- function createXMLHttpRequest(cbFunc) { XMLhttpObject = new XMLHttpRequest(); if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc; return XMLhttpObject; } function func() { for (i=0; i<5; i++) { httpObj = createXMLHttpRequest(displayData); if (httpObj) { httpObj.open("GET","file_chk.php?chk=（ファイル名）",true); httpObj.send(null); //httpObj.open("POST","file_chk.php",true); //httpObj.send("chk=（ファイル名）"); } } } function displayData() { if ((httpObj.readyState == 4) && (httpObj.status == 200)) { alert(httpObj.responseText); } } // --> </script> </head> <body> <input type="button" value="Ajax" onclick="func();" /> </body> </html> 先の投稿と似たものになってしまいますが、以上のようなソースのプログラムを組みました。ボタンを押すとAjaxが作動してphpプログラムを呼び出し、その結果を返すというものです。phpプログラムは任意のファイル名を変数として受け取り、その存在の有無によって返事を返すというものです。ソースは以下の通りです。 <? $file = $_GET['chk']; //$file = $_POST['chk']; if (file_exists($file)) { print "true"; } else { print "false"; } ?> このAjaxで問い合わせるという処理全体をループさせたいのですが、コメントアウトしているPOSTで実行するとうまくいきません。1回しかアラートが出なかったり、5回と設定してるのにそれ以上出たり。当初これに悩まされてましたが、GETで試すとうまくいきました。なぜPOSTだとうまくいかなかったのでしょうか？自分なりに考えてみたのですが全く分かりません。ソースのもので試すときは一方のコメントアウトを外し、他方をコメントアウトさせていました。もちろんphpの方も同様です。 GETとPOSTで書いたソースは間違ってませんよね？同じ意味になってますよね？どちらの方法でもいいことはいいんですが、GETだと与えるクエリによっては行が横に長くなってしまいますし、sendがあるのならそこに変数を書いたほうが見やすいのではないかと思ってPOSTを使ってました。
- ベストアンサー
- JavaScript
- Ajaxが機能しない
IE6.02を使っています。 次のようにAjaxのテストをしようとしたのですが、 「data.txt」に入っている文字(aaa)が表示されませんでした。 スクリプトのエラーも出てないようなのですが、なにが原因なのでしょうか？ <html> <head> <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <title>XMLHttpRequest()の基本(Win IEの場合)</title> <script type="text/javascript"><!-- function loadTextFile() { httpObj = new ActiveXObject("Microsoft.XMLHTTP"); httpObj.onreadystatechange = statusCheck; httpObj.open("GET","data.txt",true); httpObj.send(null); } function statusCheck() { if ((httpObj.readyState == 4) && (httpObj.status == 200)) { displayData(); } } function displayData() { document.ajaxForm.result.value = httpObj.responseText; } // --></script> </head> <body> <h1>XMLHttpRequest()の基本 (Win IEの場合)</h1> <form name="ajaxForm"> <input type="button" value="読み込み" onClick="loadTextFile()"><br> <textarea name="result" cols="40" rows="5"></textarea> </form> </body> </html>
- ベストアンサー
- JavaScript
- AjaxとPHPの連携について
AjaxからPHPにHTTPリクエストし、PHP側でXMLの処理をさせてAjaxにXMLのデータを返す処理ができません。 PHP側でXMLをAjaxに返す時、どのようなコードで書けばよろしいですか？
- 締切済み
- AJAX
お礼
＞表示する手段 そうなんですよね。。。 バイナリファイルへリクエストを送信した後、表示方法が無い事に気づき、結局考えてみると普通の方法表示できますからね。 画像の表示は仰る通りですし、ファイルをダウンロードさせたければwindow.openで十分ですし。 一応、prototype.jsはresponseText等も使用できます。 mauraさんのリンク先を見るとバイナリデータの取得方法が載ってましたので、色々遊べるような気がします。 ＞inflate.jsやdeflate.js JavaScriptでこんな事まで出来るのかと思いました。。。 まぁ、確かにファイルの読み込みと変数と演算子が揃っていれば何でも作れるのは分かりますが。。。 落としてきて色々と遊んでみようと思います。 どうもありがとうございました。