JavaScriptだけで画像アップロードし、表示

質問

JavaScriptだけで画像アップロードし(実際に受け取り)、画面に表示させたいのですが、可能でしょうか？
※JavaScriptしか使えないレンタルサーバでの利用を想定しています

下記を試してみたのですが、うまくいきませんでした
▽【HTML5】File APIを使って、投稿された画像を即時表示する方法【小ネタ】 : アシアルブログ
　 http://blog.asial.co.jp/1079
※画像は表示されるのですが、画像ファイルはアップロードされていない(もしくは受け取ることが出来ない)

■質問1
・画像ファイルパスが、<img src="data:image/jpeg;base64,/9j/4AAQS になるのですが、これは、tmpみたいな場所にアップロードされている、ということなのでしょうか？(FTPで見ても、どこにアップロードされているか確認できませんでした)

■質問2
・アップロードされたファイルを受け取るための処理は、サーバサイドでしか出来ないということでしょうか？　つまり、JavaScript単独だと、画像をアップロードできても、受け取ることが出来ないので、意味がない？

回答No.4

noname#251971 · ベストアンサー

# 当方への補足ではありませんが、勝手に回答しちゃいます。

なるほどなるほど。
どうやら、「アップロード」という言葉の意味について、
質問者さんと回答者側で認識が異なるようですね。

アップロードという言葉は、「ロード」とついているぐらいですし、
通常は送ったデータがサーバー上で(ファイルであるかはともかく)
リソースとして利用可能な状態まで行って成立するような呼び方ではないかと思います。

確かに、存在するサーバーに対してPOSTリクエストを送信すれば
ネットワーク上にはデータが流れていくと思いますが
それだけでアップロードとは通常は言わないと思います。
(送り先が受け取り可能なプログラムでなければ、読み出されないか、
途中でコネクションが切断されるかと思います。)

# ちなみにajaxで送信されるのは HTTP のリクエストです。

お礼

回答ありがとうございます。

＞アップロードという言葉は … リソースとして利用可能な状態まで行って成立するような呼び方
勘違いしてました。サーバーへ対してデータを送信する行為のことを、受け取り可否に関わらず、アップロードと言うのだと思ってました

＞サーバーに対してPOSTリクエストを送信すればネットワーク上にはデータが流れていくと思いますが それだけでアップロードとは通常は言わない
解説ありがとうございます。説明分かりやすかったです

＞# ちなみにajaxで送信されるのは HTTP のリクエストです
補足説明も参考になりましたー

回答No.5

Gotthold

> 受け取ることが出来ないのは分かるのですが、
> 「アップロード自体できない」のと「アップロードしたけど受け取れない」の違いがよく分かりません。
> もしくは、このサンプルでは、アップロードしようとしたけど出来ていないって、ことなのでしょうか？
画像ファイルをPOSTすれば確かに画像データはクライアントからサーバに向かって転送（アップロード）されます。
しかしサーバ側に送られてきたデータを処理するためのプログラムが動いていなければ
送られてきたデータは使われることなく捨てられます。
確かにアップロード自体はできていますが、そのデータを捨てるのが目的ではないでしょうから、
目的を達成できていない以上はこれをもって「できた」なんていう人はあんまりいないと思いますよ。
（それともデータが捨てられようがネット上をデータが流れさえすれば満足ですか？）

そして、これはAJAXを使っても使わなくても同じなので、AJAXは本質的に関係ありません。
（FormとSubmitボタンを使ってPOSTした場合でもサーバ側にプログラムがないとやっぱりデータは捨てられます。）

お礼

回答ありがとうございます。

＞サーバ側に送られてきたデータを処理するためのプログラムが動いていなければ送られてきたデータは使われることなく捨てられます
＞AJAXを使っても使わなくても同じ
＞FormとSubmitボタンを使ってPOSTした場合でもサーバ側にプログラムがないとやっぱりデータは捨てられます
参考になりましたー

回答No.3

ORUKA1951

質問2の回答だけで良いでしょう。
あくまで画像の処理・保存・提供はサーバーサイドのプログラムでないとできません。
レンタルサーバーですから、最低限FTPプロトコルは利用できると思いますから、あなたのほうで、FTPクライアントを起動させるjavascriptを作成すれば
　⇒ActiveX 経由で FTP する jQuery プラグイン を書いてみた - Cyokodog :: Diary( http://d.hatena.ne.jp/cyokodog/20100330/exactivexftp01 )
　⇒javascriptでFTP - Google 検索( http://www.google.co.jp/#hl=ja&tbo=d&output=search&sclient=psy-ab&q=javascript%E3%81%A7FTP&oq=javascript%E3%81%A7FTP&gs_l=hp.3...1435.10041.1.10455.17.10.1.6.7.0.113.865.9j1.10.0...0.0...1c.1.3.hp.LH74jrH8M4E&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.&bvm=bv.42553238,d.dGI&fp=4b07047910e6040e&biw=1024&bih=618 )

　不特定多数にアップロードさせるなら、サーバー側に、imageMagick/perlMagickなどを利用したCGIを置いて、サイズやフォーマット変換などが必要になるでしょう。

回答No.2

b0a0a

それはあくまでローカルの画像を表示するデモだから
アップロードはCGIを使わないと当然無理
WebアプリならFTPを使うとかでできないことはないけど

補足

回答ありがとうございます。

＞アップロードはCGIを使わないと当然無理
$.ajaxで、サーバにデータを送信してると思うのですが、
「サーバにデータを送信」＝「アップロード」ではないのでしょうか？
受け取ることが出来ないのは分かるのですが、
「アップロード自体できない」のと「アップロードしたけど受け取れない」の違いがよく分かりません。もしくは、このサンプルでは、アップロードしようとしたけど出来ていないって、ことなのでしょうか？

回答No.1

noname#251971

■質問1への回答

こちらはすみません、
HTML5 の File APIの仕様をちょっと見てみましたが
FileReaderの読み取ったデータを参照する際にどう扱われるかわかりませんでした。

ただ、JavaScriptはローカルマシン上で実行されるものですので、
ローカルマシン上の何処かであることは確かです。
(ブラウザによってオンメモリデータの参照であったり、テンポラリファイルであったりするかもしれません)

■質問2への回答

認識されている通りです。
サーバーにファイルを保存するためには、
サーバー上でデータを受け取り保存するためのCGIなどが必要になります。

少々誤解されていると思われますが、
File APIで読み出した画像(ファイル)は
そもそもアップロードはされていません。
ローカルマシンのブラウザー上に読み込まれているのみとなります。

質問文に記載されている参考サイトさんの、
2つめのサンプルに出てきている
「$.ajax」の部分が、サーバー側のプログラムへデータを受け渡す部分となります。

お礼

回答ありがとうございますー