次の方法で共有


HTML5でローカルのファイルの絶対パスを受け取り表示したい

質問

2016年6月8日水曜日 6:22

HTML5初心者です。

ローカルでHTTPサーバーを立てて、

URLアドレスにて以下ののようなアドレスを渡して

http://localhost:8000/cgi-bin/imageviewer.py?file=c:\folder01/test01.jpg

Webアプリで、ローカルのファイルアドレスを 

 c:\folder01/test01.jpg のような絶対パスで指定し、

指定された画像ファイルを読み込んで表示したいのですが、どのようなやり方があるのでしょうか?

ローカルのファイルへのアクセスとして、file APIなるものを知りましたが、ドラッグ&ドロップや、ファイルの場所の指定などによる指定が必要で、ファイルの絶対パスを用いた指定が出来るのかがわかりません。

imageviewr.py は、これから構築予定ですが、こんな感じです。 &を使って、複数ファイルを読み込ませたいのですが、出来ていません。

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import sys
import io
import cgi

html_begin = """
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>image viewer</title>
 
 </head>
 
 <body>
"""

html_body = """
<div style="float:left"><img src="%s"><br>caption 1</div>
"""
html_end = """
<div style="clear:both"></div>
 
 </body>
 
 </html>"""

form=cgi.FieldStorage()
file_str=form.getvalue('file', '')
files=file_str.split('&')
 
print ("Content-type: text/html;charset=utf-8\n")
print (html_begin)
for file in files:
 print (html_body %(file))

print (html_end)

すべての返信 (15)

2016年6月20日月曜日 11:02 ✅回答済み

結局一番最初に私がレスに書いた、

> 質問内容は IE とは直接関係ない Python ベースの Web アプリの話に見えますが。

は当たりだったようですね。

とすると、ここ Microsoft のフォーラムで聞くのが適当かどうかは疑問です。Microsoft 製品以外のことを聞いてはいけないということはなさそうですが、Python に詳しい人が多くはなさそうですので。ちなみに自分は Python は全く知らないです。Pyhton 関係のコミュニティがあれば、そちらで聞いたほうが良いと思うのですが。

・・・というばかりではなんですので、一般的な Web アプリの考え方をベースに一言二言。

(1) 自分の勉強のために Web サーバー&クライアントを全て自分の開発マシンで行っているということでしたら何も言うことはありませんが、もし、将来実際の運用を行うことを考えているとすると、画像ファイルは何処に置かなければいけないかは理解されているでしょうか? 例えば、Web サーバーが米国にあって、クライアントは日本にいる場合、画像ファイルをクライアントの PC に置いては何ともならないのはわかりますか?

(2) ブラウザの一画面に一つの画像を表示するところまでは Web アプリは実装できているのでしょうか? 具体的には、例えば(あくまで例えば)ブラウザのアドレスバーに、

http://localhost:8000/cgi-bin/imageviewer.py?file=c:\folder01/test01.jpg

と直接入力して Web サーバーに要求をかけた場合、test01.jpg がブラウザに表示されるというところまでは作り込めているのでしょうか? そこまでできていないのであれば、まずはそこまで作ってみることをお勧めします。

(3) そこまでできれば、もう一つ複数画像を動的に表示するためのページを作って、ブラウザから送られてきたクエリ文字列に含まれる複数画像の情報から、例えば以下のような html をレンダリングすればよさそうです。

<img src="http://localhost:8000/cgi-bin/imageviewer.py?file=c:\folder01/test01.jpg" alt="" />
<img src="http://localhost:8000/cgi-bin/imageviewer.py?file=c:\folder01/test02.jpg" alt="" />
<img src="http://localhost:8000/cgi-bin/imageviewer.py?file=c:\folder01/test03.jpg" alt="" />
・・・中略・・・
<img src="http://localhost:8000/cgi-bin/imageviewer.py?file=c:\folder01/test0n.jpg" alt="" />

それを具体的にどういうコードを書けば実現できるかは Python を知らない自分は分かりません。


2016年6月8日水曜日 6:53

IE のフォーラムで質問されていますが、IE がどう関係するのでしょうか?

質問内容は IE とは直接関係ない Python ベースの Web アプリの話に見えますが。


2016年6月8日水曜日 9:03

Internet Explorerはバージョン8以降、セキュリティ強化のため、パスを送信しなくなっています。この動作はインターネットオプションのセキュリティから変更することができます。


2016年6月8日水曜日 9:25

佐祐理さんが書かれているのは、IE でファイルをアップロードする際、ファイル名にフルパスが付与されることがある(ローカルイントラネットゾーンの場合、インターネットゾーンでも IE7 以前はデフォルト)ということですか?

IE でアップロードする際のファイル名
http://surferonwww.info/BlogEngine/post/2015/08/06/filename-when-uploading-by-internet-explorer.aspx


2016年6月8日水曜日 14:50

その「ローカルファイル」とは、「サーバ上のローカルファイル」と「HTMLを送りつけた先のブラウザを動かしているコンピュータのローカルファイル」のどちらかが曖昧な感じがします。(まあ、localhostだから、今回は一緒といえば、一緒なんですが、本来的、というか概念的な話として)

「サーバ上のローカルファイル」の話であれば、Pythonのふつうのopenで開いてやればいいのです。
「ブラウザを動かしているコンピュータのローカルファイル」であれば、セキュリティ的な要請があるので、まず無理な話です。

jzkey


2016年6月9日木曜日 1:40

質問者さんが出てこられないのでなんですが・・・

> 「ブラウザを動かしているコンピュータのローカルファイル」であれば、セキュリティ的な要請がある
> ので、まず無理な話です。

Web サーバーがクライアントのローカル PC の中の c:\folder01/test01.jpg を取得して何かするという話であれば jzkey さんが指摘されたとおり無理ですが・・・

クライアントのローカル PC の中の c:\folder01/test01.jpg を html ; javascript を使ってクライアントのローカル PC のブラウザに表示させるということは可能です。(Web サーバー関係なし)

その方法ですが、以下のようにすれば可能なはずです:

(1) HTML の <input type="file" ... /> を利用してクライアントにローカル PC の画像ファイルを選択させる。

(2) <input type="file" ... /> で画像ファイルが選択されたタイミングで、HTML5 File API の FileReader オブジェクトに readAsDataURL メソッド を使って選択された画像ファイルを読み込む。

(3) FileReader の result プロパティ を使って、読み込んだ画像ファイルを Data url 形式("data:image/jpeg;base64, ..." という文字列)で取得し、それを image オブジェクトの src 属性に設定する。

以下の記事にその具体例がありますので興味があれば見てください。

canvas の画像をアップロード
http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx

記事では、クライアントによる画像ファイルの選択は ASP.NET の FileUpload コントロールを使っていますが、普通の HTML の <input type="file" ... /> でも可です。

また、canvas に縮小画像を表示してそれを Web サーバーにアップロードするということをしていますので、少々複雑になっています。(上記 (1) ~ (3) 以外の余計なコードが多々ありますので見づらいかもしれません)


2016年6月19日日曜日 13:37

SurferOnWww様

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

本サイトで返信がついたら、メールで連絡がくるものと思っており、確認が出来ていなかったのと、

PCがクラッシュ寸前で、Web閲覧が滞っており、確認が遅くなっていました。申し訳ございません。

>クライアントのローカル PC の中の c:\folder01/test01.jpg を html ; javascript を使ってクライアントのローカル PC のブラウザ>に表示させるということは可能です。(Web サーバー関係なし)

やりたいのはこちらなのですが、

ファイルの選択ではなく、

URLアドレスで渡したいです。

http://localhost:8000/cgi-bin/imageviewer.py?file=c:\folder01/test01.jpg

http://localhost:8000/cgi-bin/imageviewer.py?file=c:\folder01/test01.jpg&file=c:\folder01/test02.jpg

のように複数のファイルアドレスを渡したいです。

URLアドレスで渡したローカルPCにある複数の画像ファイルを表示するWebアプリを作成したいです。

以上

よろしくお願い致します。


2016年6月19日日曜日 13:41

jzkey様

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

本サイトで返信がついたら、メールで連絡がくるものと思っており、確認が出来ていなかったのと、

PCがクラッシュ寸前で、Web閲覧が滞っており、確認が遅くなっていました。申し訳ございません。

「ブラウザを動かしているコンピュータのローカルファイル」ですが、

まずは、サーバーはローカルで動かす事を前提に考えています。セキュリティ的に難しそうなのですね。

ありがとうございます。


2016年6月19日日曜日 16:09

> URLアドレスで渡したローカルPCにある複数の画像ファイルを表示するWebアプリを作成したいです。

意味が分かりません。全体のシナリオを、ステップバイステップで、どういうことがしたいのかを書いてください。

普通に Web サーバーとクライアント PC の HTTP 通信を考えた場合、Web サーバーから URL を渡すなんてことは有り得ないし、実現不可能な話だと思うのですが。

#質問者さんはどのぐらい Web アプリ開発の経験をお持ちですか?


2016年6月20日月曜日 1:02

SuferOnWwww様

ご返信ありがとうございます。

説明が不十分で申し訳ありません。

Webアプリ開発の経験はなく、現在は、

http://coreblog.org/ats/stuff/minpy_web/04/index.html

で勉強しているレベルです。

このページの中で、

cgi-bin/find13f.py?year=3000

yearに西暦を渡して、その年の13日の金曜日を計算するWebアプリが紹介されていたので、複数の画像ファイルの絶対パスを渡して、画像を表示するWebアプリを作りたいとおもった次第です。

目的は

私が使用している市販のアプリが、ビューアーとしてブラウザのみが使用できるのですが、URLアドレスを用いてブラウザを呼び出す形式になっています。

・複数の画像ファイルを含んだURLアドレスでブラウザを呼び出す

・URLアドレスに含まれた複数の画像ファイルを表示するWebアプリを開発

により

⇒このアプリが抽出した複数の画像ファイルをブラウザで表示する ことです。

初心者のため、わかりにくい説明で申し訳ございません。


2016年6月20日月曜日 1:34

yearに西暦を渡して、その年の13日の金曜日を計算するWebアプリが紹介されていたので、複数の画像ファイルの絶対パスを渡して、画像を表示するWebアプリを作りたいとおもった次第です。

一般的にWebサーバーとWebブラウザーは異なるPCで実行されるものであり、そのためWebサーバーがWebブラウザー側のファイルを読み込むことはあり得ません。<input type="file">などにてユーザーが選択したファイルをWebブラウザーがWebサーバーに送信した場合にのみ扱うことができますが、それとてWebブラウザーから受け取ったデータを扱うのみでファイルを読み込むものではありません。

なぜそうなっているかというと、Webサーバーからの指示でファイルを読み出せてしまうと情報流出、セキュリティ問題となるからです。市販のアプリがどのような構成となっているかはわかりませんが、Webサーバーの責務とWebブラウザーの責務はきちんと分離されて設計されているものと思われます。

質問者さんはWebの有り方を根本的に見直すべきです。


2016年6月20日月曜日 2:55

依然として質問者さんが何をしたいのか分かりません。今までの話から想像すると、以下のようなことですか? 違ったら具体的に何処がどのように違うのか訂正してください。そうしてもらえない限り当方は答えようがないです。

(1) 自分の開発マシン (Windows OS) に Web サーバーをインストールし、それに Python ベースの Web アプリを構築中。

(2) 開発マシンには c:\folder01 というフォルダに jpeg などの画像ファイルが複数保存されている。

(3) 開発マシンの IE から、上記 (1) の Web アプリを、

http://localhost:8000/cgi-bin/imageviewer.py?file=c:\folder01/test01.jpg

というように呼び出し、当該画像 test01.jpg をブラウザに表示したい。

(4) ブラウザ上には一画面に複数の画像を表示できるようにしたい。

(5) 上の質問者さんのレスにあった「私が使用している市販のアプリ」は上の話とは直接関係ない。


2016年6月20日月曜日 9:43

SurferOnWww 様

わかりやすく整理頂きありがとうございます。

SurferOnWww様の認識頂いている内容で間違いありません。

(5)は、直接関係ありません。状況を理解頂く為の補足です。

(4)の複数の画像の指定についてのみ補足させて頂きますと

一回の呼び出しで、複数のファイルを指定したい

 http://localhost:8000/cgi-bin/imageviewer.py?file=c:\folder01/test01.jpg&c:\folder01/test02.jpg

の様な形式です。

よろしくお願い致します。


2016年6月20日月曜日 11:54

SurferOnWww様

ご返信ありがとうございます。

最初のご回答への返信が出来ておらず申し訳ございません。

以前、Microsoftフォーラムで、;た質問を投げた際に、MSDNで聞くようにとのご意見を頂いた為、当フォーラムで質問させて頂きましたが、今回は、かなりPythonよりであったのかもしれません。

>(2) ブラウザの一画面に一つの画像を表示するところまでは Web アプリは実装できているのでしょうか? 具体的には、例えば(あくまで例えば)ブラウザのアドレスバーに、

http://localhost:8000/cgi-bin/imageviewer.py?file=c:\folder01/test01.jpg

サーバー用のファイルのある場所に、画像ファイルを置いた場合は、相対パスで表示できているのですが、絶対パスでは出来ていません。

セキュリティ面からは、難しそうであることは理解いたしました。

もう少し、実現手段を違う視点で検討してみます。

今回はいろいろありがとうございました。


2016年6月20日月曜日 12:18

> セキュリティ面からは、難しそうであることは理解いたしました。

その問題で結局断念したということでしょうか? それはやむを得ないとして、終了するならこのまま放置しないで、役に立った回答にチェックマークをつけて(複数可)このスレッドはクローズしてください。