HTMLでファイルのパスを取得する方法

このQ&Aのポイント
  • HTMLを使用してファイルのパスを取得する方法について説明します。
  • ファイルをアップロードし、そのパスをリンクとして表示する方法を確認します。
  • input要素のonchangeイベントを使用して、アップロード後にリンクを作成する方法を説明します。
回答を見る
  • ベストアンサー

アップロードしたファイルのパスを取得したい。

HTML側で以下の記述をし、 <div id="inputdummy"> <input type="file"name="btnUpload" id="btnUpload" /> <p id="confpath"><a href="#" id="filepath">アップロードしたファイルを確認</a></p> </div> CSS側で input#btnUpload の透明度をゼロにし、 div#inputdummyの背景に「アップロード」とデザインしたボタンを配置しています。 アップロード後にp#filepathのhrefの値にアップロードしたファイルにリンクしたいのですが、 単純にinput#btnUploadのonchangeイベントでhrefの値にinput#btnUploadのvalueを入れても アクセスできません。 正しいやり方を教えてください。

  • HTML
  • 回答数1
  • ありがとう数1

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

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

input type="file"タグはこれからアップロードしようとしているファイルのパス(つまりローカルのパス)ですので サーバーにアップロード済のファイルのパス(つまりサーバー上のパス)とは異なります。 アップロード済のファイルに関しては、CGIを使って、hrefのURLを生成する必要があります。

webama_fk
質問者

お礼

単純にonchangeイベントでは取得できないのですね。。。 勉強になりました!ありがとうございました!!

関連するQ&A

  • ファイルアップロードについて

    ファイルアップロードについて質問させて下さい。 ID、ファイルアップロードの機能の2つがあります。 ファイルを指定し、submitボタンを押下すると「b.php」に遷移します。 ファイルをアップロードした場合には遷移をせず ID、画像パスが入力されている場合のみ「b.php」に遷移したいのです。 入力チェックはjavascriptで行っていますが、その場合には「action=""」として javascript側で遷移するしか方法は無いのでしょうか? ---a.php---- <form enctype="multipart/form-data" action="b.php" method="post" name="a"> <input type="hidden" name="MAX_FILE_SIZE" value="50000000" /> <table> <tr> <th>ID</th> <td><input type="text" name="ID" value=""></td> </tr> <tr> <th>画像</th> <td><input type="file" name="img" value=""> <input type="submit" name="upload" value="upload"> </td> </tr> </table> <a href="#" onClick="javascript:check('a');"><img src="button.jpg"></a> </form> お手数ですが、ご教授よろしくお願い致します。

    • ベストアンサー
    • PHP
  • ファイルのアップロードについて

    phpのmove_uploaded_fileを使用してアップロードをしようと思うのですがアップロードが出来ません。 状況は ローカル環境のwindowsでのアップロードは行えるがlinuxでは失敗してしまいます。 move_uploaded_fileからはエラーは出力されていません そもそもmove_uploaded_fileが成功しているのになんでアップロードされていないのか分かりません。 //■HTML <form name="form1" method="post" action="upload.php" ENCTYPE="multipart/form-data"> <input type="hidden" name="MAX_FILE_SIZE" value="10485760" /> <table class="frm" id="tbl"> <tr><th>ファイル1<div id="image"></div></th> <td> 画像<input id="img_1" type="file" name="image[]" class="fname" onChange=imageChange(this); /><br /> </td></tr> <tr> <th>ファイル2<div id="image"></div></th> <td> 画像<input id="img_2" type="file" name="image[]" class="fname" onChange=imageChange(this); /><br /> </td> </tr> </table> </form> //■phpで以下のコードを実行すると oreach ($_FILES["image"]["error"] as $key => $error) { //複数のファイルをアプロード if ($error == UPLOAD_ERR_OK) { $tmp_name = $_FILES["image"]["tmp_name"][$key]; //テンポラリファイルパス $name = $_FILES["image"]["name"][$key]; //アップロードファイル名 $size = $_FILES["image"]["size"][$key]; //アップロードファイルサイズ $ermsg = $_FILES['image']['error'][$key]; //エラーメッセージ echo "アップロードファイル名".$name."\n" ; echo "アップロードファイルsize" .$size ."\n" ; echo "errmsg= .$ermsg."\n" ; // ファイルアップロード $cnt++; if ( move_uploaded_file($tmp_name, "../1/33/.$cnt."2upload.jpg ")){ //ファイルアップロード echo "アップロード成功 .$ermsg."\n" ; echo "  テンポラリファイル="$tmp_name."\n"; echo "  アップロードファイル="$dir_img."/".$cnt.UPLOAD_FILE_NAME."\n"; } else { echo 1; error_log("upload error! \n", 3, MATCHING_ERROR_LOG); exit; } } } exit; ■結果 アップロードファイル名thum6.jpg アップロードファイルsize=10104 errmsg= 0 アップロード成功   テンポラリファイル=/tmp/phpMvCzgo   アップロードファイル=../1/33/1upload.jpg アップロードファイル名 thum3.jpg アップロードファイルsize=11528 errmsg= 0 アップロード成功   テンポラリファイル=/tmp/php5Q4kIL   アップロードファイル=../1/33/2upload.jpg テンポラリの/tmpは777のため権限に問題ないです php.iniの設定 upload_max_filesize=2m post_max_size=8m memory_limit=128m 今回のアップロードファイルのサイズから問題なし file_uploads=onなので問題ありませんでした これでなにかわかる方いらっしゃいましたら教えてください。

    • ベストアンサー
    • PHP
  • 同じファイル内で、アップロードとアップロードされたファイルの処理をすることについて

    OS:Window XP Pro 開発環境:Xampp(Apache + PHP + Mysql) 現在ファイルをアップロードする処理を書いているのですが、 この処理を 1)a.phpでファイルをアップロードする処理 2)b.phpでアップロードされたファイルの処理 と分けて、コーディングするのではなく 1)a.php内にファイルをアップロードする処理とアップロードされたファイルの処理を一緒に記述する という風にできないかと思いましたので、 以下のようなコードを書いたのですが $_FILES['upload_file']['tmp_name']) の値を調べてみたところ、なんの値も 入っていなかったことから このコードでは、二つの処理を一つのファイル内に書くことが でいないようでした。 どうにかしてひとつのファイル内に この二つの処理を同居させることはできないのでしょうか? a.php --------------------------------------- switch($action) { case "update": if(is_uploaded_file($_FILES['upload_file']['tmp_name'])) { $upload_file = $_FILES['upload_file']['tmp_name']); if(file_exists(dirname(__FILE__)."/profile_phote/") == TRUE) { $phote_name = dirname(__FILE__)."/profile_phote/".$upload_file; } else { mkdir(dirname(__FILE__)."/profile_phote/"); $phote_name = dirname(__FILE__)."/profile_phote/".$upload_file; } move_uploaded_file($_FILES['upload_file']['tmp_name'],$phote_name); "リダイレクト処理・・・" case ... case ... default: <form name="profile" action="" method="post"> <input type="file" name="upfile"> <input type="hidden" name="action" value="update"> </form> }

    • ベストアンサー
    • PHP
  • ファイル選択と同時にアップロード HTML+JS

    HTMLとJava Scriptのことを質問させてください <form>タグからファイルを選択すると同時をアップロードしたいと思っています。 複数の「ファイルを選択ボタン」を設置し、それぞれ"001.jpg"、"002.jpg"など指定の名前でアップロードしたいです。 下記のようにいくつかの<form>タグを設置し、javascriptでコントロールできるかと思いケース1のように書いた場合はうまくいったのですが、ケース2のように複数並べて記述した場合、動かなくなり困っております。 どなたか教えていただけないでしょうか? よろしくお願いいたします ケース1) <form id="upload_file1" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame">    <input type="hidden" name="picture_id" value="001.jpg" />    <input type="file" id="file_id_1" name="file_name" accept="image/jpeg"> </form> <form id="upload_file2" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame">    <input type="hidden" name="picture_id" value="002.jpg" />    <input type="file" id="file_id_2" name="file_name" accept="image/jpeg"> </form> <script> var form = document.getElementById("upload_file1"); var input = form.file_name; input.onchange = function (){ if(this.value){ form.submit(); } }; </script> ケース2) <form id="upload_file1" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame">    <input type="hidden" name="picture_id" value="001.jpg" />    <input type="file" id="file_id_1" name="file_name" accept="image/jpeg"> </form> <form id="upload_file2" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame">    <input type="hidden" name="picture_id" value="002.jpg" />    <input type="file" id="file_id_2" name="file_name" accept="image/jpeg"> </form> <script> var form = document.getElementById("upload_file1"); var input = form.file_name; input.onchange = function (){ if(this.value){ form.submit(); } }; var form = document.getElementById("upload_file2"); var input = form.file_name; input.onchange = function (){ if(this.value){ form.submit(); } }; </script>

  • アップロードするとレイアウトが崩れる

    前にも質問させていただいたのですが、まだ解決していません。 FC2でアップロードはできたのですが、HTMLがデスクトップ上ではちゃんとみれたのに、 サーバーにアップしたら表示されません。 FFFTPでアップロードする際になにか作業をしないといけないことがあるのかわからないのですが・・・。HTMLのどこを変えたら他の方からもホームページが見れるのかわからないので、 HTMLの中身を一部追記するので、どの部分を変えたらいいのか教えて下さい。 <!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" /> <link href="root/css/top.css" rel="stylesheet type="text/css"> <title>パーティ専門アイス本舗</title> </head> <body link="#61503e" vlink="#61503e" alink="#aaaa"> <div id="wrapper"> <div id="header"> <p>パーティ専門アイス本舗は、パーティや記念日などに便利な2リットルサイズの業務用アイスを販売しています。数あるフレーバーからお好きなセットをお選びください。</p> <h1><img src="root/images/logo_ice.gif" width="450" height="60" /></h1> <p id="kaimono"><a href="#"><img src="root/images/idx_btn_cart.gif" width="180" height="30" alt="kaimono" /></a></p> <ul id="menu_navi"> <li><img src="root/images/gnavi_btn01.jpg" width="158" height="25" alt="home" /></li> <li><img src="root/images/gnavi_btn02.jpg" width="158" height="25" alt="syouhin" /></li> <li><img src="root/images/gnavi_btn03.jpg" width="159" height="25" alt="kaimono" /></li> <li><img src="root/images/gnavi_btn04.jpg" width="159" height="25" alt="shiharai" /></li> <li><img src="root/images/gnavi_btn05.jpg" width="158" height="25" alt="faq" /></li> <li><img src="root/images/gnavi_btn06.jpg" width="158" height="25" alt="mailmagazine" /></li> </ul> </div><!-- //header --> <div id="page_body"> <div id="side"> <div id="kensaku"> <form method="post" action="http://test.com/text.cgi"> <p>商品名や種類で検索</p> <p><input type="text" name="kensaku" size=20"></p> <p id="kensaku_form"><input type="submit" value="検索"></p> </form> </div> <p id="tokushu"><a href="#"><img src="root/images/Untitled-5_03_03.jpg" width="180" height="120" alt="tokushu" /></a></p> <div id="prodact_side"> <div class="section1"> <p><img src="root/images/idx_menu_ph01.jpg" width="63" height="35" alt="apple" /></p> <p class="right"><a href="#"> ストロベリー</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph02.jpg" width="63" height="35" alt="ugi" /></p> <p class="right"><a href="#"> 宇治抹茶</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph03jpg.jpg" width="63" height="35" alt="chocoship" /></p> <p class="right"><a href="#"> チョコチップ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph04.jpg" width="63" height="35" alt="berugi" /></p> <p class="right"><a href="#"> ベルギーチョコ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph05.jpg" width="63" height="35" alt="cookie" /></p> <p class="right"><a href="#"> キャラメルクッキー</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph06.jpg" width="63" height="35" alt="banira" /></p> <p class="right"><a href="#"> バニラ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph07.jpg" width="63" height="35" alt="pain" /></p> <p class="right"><a href="#"> パイナップル</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph08.jpg" width="63" height="35" alt="apple" /></p> <p class="right"><a href="#"> アップル</a></p> </div> <div class="section1"> <

  • ファイルをアップロードするには

    <input type="file"> で、ただ単に自分のPC内のファイルを サーバー上のあるフォルダにアップロードするには どうすればいいのでしょうか? よろしくお願いします。

    • ベストアンサー
    • Perl
  • ファイルアップロードの受信の仕方

    最近、PHPを勉強し始めた初心者です。 よくわかるPHPの教科書(毎日コミュニケーションズ刊)の109ページに載っているファイルアップロードの仕方が上手くいきません。 本書通りプログラムしてJPEG画像をアップしているはずなのですが 「※拡張子が.gif, .jpg, .pngのいずれかのファイルをアップロードしてください」 が表示されてしまいます。 XAMPP 1.7.3を使用しています。特に設定を変更したところはありません。 sample23.phpと同じフォルダ内にuser_imgフォルダも作りました。 何がいけないのでしょうか? ●sample23_input.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <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 action="sample23.php" method="post" enctype="multipart/ form-data"> <dl> <dt>写真</dt> <dd> <input name="my_img" type="file" id="my_img" size="50" /></dd> </dl> <input type="submit" value="送信する" /> </form> </body> </html> ●sample23.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>ファイルアップロードを受信する</title> </head> <body> <?php $file = $_FILES['my_img']; print('ファイル名(name): ' . $file['name'] . '<br />'); print('ファイルタイプ(type): ' . $file['type'] . '<br />'); print('アップロードしたファイル(tmp_name): ' . $file['tmp_name'] . '<br />'); print('エラー内容(error): ' . $file['error'] . '<br />'); print('サイズ(size): ' . $file['size'] . '<br />'); // ファイルアップロードの処理をする $ext = substr($file['name'], -3); if ($ext == 'gif' || $ext == 'jpg' || $ext == 'png') { $filePath = './user_img/' . $file['name']; move_uploaded_file($file['tmp_name'], $filePath); print('<img src="' . $filePath . '" />'); } else { print('※拡張子が.gif, .jpg, .pngのいずれかのファイルをアップロードしてください'); } ?> </body> </html> 一時ファイルが保存される場所を検索すると C:\xampp\tmp と表示されます。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • phpで複数のファイルをアップロードする場合

    お世話になります。 PHPを使って、ファイルを複数アップロードしようと思います。 htmlで <input name="p_s_img1" type="file"> <input name="p_s_img2" type="file"> ・・・ <input name="p_s_img10" type="file"> と記述してあります。 受け取り側のPHPでファイル名を取得するのに $uploadimgName1=""; $uploadimgName1=$_FILES['p_s_img1']['name']; $uploadimgName2=""; $uploadimgName2=$_FILES['p_s_img2']['name']; ・・・ $uploadimgName10=""; $uploadimgName10=$_FILES['p_s_img10']['name']; と書けば、$uploadimgName*の変数に ファイル名が入ると思うのですが、 これをfor文の繰り返し処理などを使って簡単にかけないでしょうか? しかも、$uploadimgName*の変数は、for文から抜けた後も利用したいのですが。 よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • ファイルのアップロードが、どうしても どうしても 出来ません・・

    ■アップロードフォーム用のHTMLファイルです↓ ファイル名=gazou_upload.html <html> <head> <title>ファイルのアップロード</title> </head> <body> <form method="POST" action="gazou_upload.php" enctype="multipart/form-data"> <input type="hidden" name="max_file_size" value="1000000" > <input type="file" name="userfile"><br><br> <input type="submit" value="アップロード"> </body> </html> ■受け取ったファイルをサーバ上のディレクトリに移動するPHPファイルです↓ ファイル名=gazou_upload.php <?php // アップロード先ディレクトリ+ファイル名の指定 $uploaddir = '/image/'; $uploadfile = $uploaddir. $_FILES['userfile']['name']; if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { print "ファイルアップロード成功"; print_r($_FILES); } else { print "ファイルアップロード失敗"."<br>"; print_r($_FILES); } ?> ■結果 Warning: move_uploaded_file(/image/P1010851.jpg): failed to open stream: No such file or directory in /home/sites/lolipop.jp/users/**********/web/gazou_upload.php on line 8 Warning: move_uploaded_file(): Unable to move '/tmp/phpuqa8g2' to '/image/P1010851.jpg' in /home/sites/lolipop.jp/users/***********/web/gazou_upload.php on line 8 ファイルアップロード失敗 Array ( [userfile] => Array ( [name] => P1010851.jpg [type] => image/pjpeg [tmp_name] => /tmp/phpuqa8g2 [error] => 0 [size] => 84509 ) ) 簡単なプログラムなのにちゃんと動作してくれません。色々試行錯誤試したりしているのですが・・初心者で本当に困ってます。どなたかアドバイスよろしくお願いします。

    • ベストアンサー
    • PHP
  • php ファイルアップロード サイズ設定どうしたらいい??

    以下のphpファイルアップロードプログラムを書いたが、 ファイルサイズ5MBを超えるとアップロードできなくなることに困っています!! Upload_max_filesizeとかあるようですが、設定はわかりません。 まったくの新米ですので、教えてください。 Html部: <form action="upload.php" form method="post" enctype="multipart/form-data"> <p> <input type="file" name="uploadfile[]" size="75"> </p> <p> <input type="file" name="uploadfile[]" size="75"> </p> <p> <input type="file" name="uploadfile[]" size="75"> </p> <p> <input type="file" name="uploadfile[]" size="75"> </p> <p> <input type="file" name="uploadfile[]" size="75"> </p> <p> <input type="file" name="uploadfile[]" size="75"> </p> <p> <input type="file" name="uploadfile[]" size="75"> </p> <p> <input type="file" name="uploadfile[]" size="75"> </p> <p> <input type="file" name="uploadfile[]" size="75"> </p> <p> <input type="file" name="uploadfile[]" size="75"> </p> <p> <input type="submit" name="submit" value="- Upload -"> </p> </form> php部: <?php // 実行ボタンが押された時 if (isset($_POST["submit"])) { for ($i = 0; $i < 10; $i++) { $movetofile = "files/" . $_FILES["uploadfile"]["name"][$i]; move_uploaded_file( $_FILES["uploadfile"]["tmp_name"][$i], $movetofile ); } echo "Thank you very much for your uploading."; } ?>

    • ベストアンサー
    • PHP