アップロードした画像の表示方法とエラー対策について
- アップロードした画像を表示する方法として、非同期でアップロードを行いながら画像の表示も行う処理が考えられます。
- 画像の表示方法によっては失敗する場合があり、src属性の設定方法やエラーメッセージの内容を確認する必要があります。
- エラーメッセージによると、画像のsrc属性を設定する際にnullの値に対して参照エラーが発生しているようです。対策としては、src属性の設定前に要素の存在確認を行うことが考えられます。
- ベストアンサー
アップロードした画像を表示するには
アップロードした画像を表示したいと考えてます。アップロードは非同期 なので、アップロードを実行するchild.phpで画像表示の処理もして、アッ プロードの命令を出すparent.phpに画像の表示を行います。 ---- child.php(一部) ---- move_uploaded_file($_FILES["upload_file"]["tmp_name"], $image_name); echo '<img src="' . $image_name . '" width="100" height="100">'; これで成功します。ただ画像を常に同じ場所に表示したくechoの部分を以下 のように書き換えると失敗します。 echo '<script>'; echo 'document.getElementById("pict").src="' . $image_name . '.jpg";'; echo '</script>'; ---- parent.php(一部) ---- <img src="" id="pict"> クロームのDevToolsで調べるとElementsでは以下のようにsrcに何もなく失敗してます。 <img src id="pict"> ところがSourcesでは「Cannot set property 'src' of null」とエラーが出ているのに 以下のようにsrcには画像名は入ってます。 <script>document.getElementById("pict").src="./image1/bfbiD.jpg";</script> なお同名の画像はきちんとアップロードしてます。対策があれば教えてもら えないでしょうか。
- palux124
- お礼率91% (22/24)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 スクリプトをimg要素の後に持って行くか、ページのonloadで呼び出せば動くと思います。 エラーは document.getElementById("pict")が取得できないためです。 （imgタグ生成前に呼んでいませんか？）
関連するQ&A
- 画像をアップロードする度に古い画像を削除
お世話になっております。 とあるサイトのソースを参考に画像のリアルタイムプレビューを作成しました。 画像を上げプレビューを表示することはできたのですが画像を上げる度に次々と表示される画像が増えてしまいます。 画像を新しく上げる場合は以前に入っていた画像を削除する、 もしくは最後に上げた画像のみをプレビュー表示する方法はありますでしょうか？ unlinkを使用して削除を考えたのですが、 削除とアップロードの両立ができませんでした。 以下が使用しているソースになります。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery.uploadのサンプル</title> <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="./js/jquery.upload-1.0.2.min.js"></script> <script type="text/javascript"> $(function() { $('#file_id').change(function() { $(this).upload('upload.php', function(res) { $(res).insertAfter(this); }, 'html'); }); }); </script> </head> <body> <style> .thumb { height: 200px; border: 1px solid #000; margin: 10px 5px 0 0; } </style> <input type="file" name="upload_file" id="file_id"> </body> </html> <?php #アップロードされたファイルが存在するか if ( !is_uploaded_file( $_FILES['upload_file']['tmp_name'] ) ) { echo '<div>ファイルが選択されていません。</div>'; exit(); } #$_FILES["upload_file"]["tmp_name"]がテンポラリにあるファイル名 #$_FILES["upload_file"]["name"]がアップロード元のファイル名 #tmpからファイルをコピー move_uploaded_file($_FILES["upload_file"]["tmp_name"], "files/" . $_FILES["upload_file"]["name"]); echo '<div>'.$_FILES["upload_file"]["name"].'をアップロードしました</div>'; echo '<img class="thumb" src="files/' . $_FILES["upload_file"]["name"] . '">' ?> どなたかご回答いただけましたら幸いでございます。 どうぞ宜しくお願いします。
- ベストアンサー
- PHP
- アップロードができるようにしたいのですが・・。
こんにちは。お世話様になります。 ホームページで画像などがアップできて、表示ができるようにアップロードボタンを作りたいと思っています。 <!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 action="http://●●●/upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="max_file_size" value="1000000" /> <input type="file" name="upload_image" /> <input type="submit" value="画像アップロード" /> </form> <div id="container"></div> <iframe name="upload_frame" style="display:none;"></iframe> </body> </html> ---phpファイル---- <!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>画像アップロード（iframe内）</title> </head> <body> <?php $upload_dir = './'; $filename = $_FILES['upload_image']['name']; move_uploaded_file($_FILES['upload_image']['tmp_name'], $upload_dir.$filename); ?> <script type="text/javascript"><!-- var container = parent.document.getElementById('container'); image = parent.document.createElement('img'); image.src = './<?php print($filename);?>'; container.appendChild(image); //--></script> </body> </html> ネットで調べて、このようにしたのですが、画像をアップしようとしても表示されません。 何がいけないのでしょうか・・・。 大変恐れ入りますが、詳しい方はご教示くださいませ。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- jqueryで、後から追加した画像もドラッグ&ドロップできるようにした
jqueryで、後から追加した画像もドラッグ&ドロップできるようにしたい 以下のようにして、画像をドラッグ&ドロップできるようにしています そこに、新たに画像をアップロードして、その画像もドラッグできるようにするところで詰まってしまいました アップロードする時に画面遷移を起こしたくなかったので、インラインフレームを使っています upload.phpでアップロードされた画像を取得して、divタグのクラス名を指定したりしてappendChildで親フレームに挿入 しかし、画像が表示されはするのですがドラッグしようとしても何も起こらない状態です Firebugでも見てみると、元の画像は <div class="dragArea ui-draggable"><img src="./img0.jpg" width="100" height="100"></div> となっていますが、アップロードした画像(新規追加した要素)は、 <div id="adddragfile"><div class="dragArea"><img src="././tmp/newimg.jpg" width="100" height="100"></div></div> となっていて、ドラッグ属性が付いていないように思えます よろしくお願いします /* include.php */ //ドラッグ可能な画像 <div class='dragArea'><img src='./img0.jpg' width='100' height='100'></div> //ここにタグを追加していく <div id='adddragfile'></div> //ドロップ先となる画像 <div class='dropArea'><img src='./img1.jpg' width='300' height='300'></div> <div class='dropArea'><img src='./img2.jpg' width='300' height='300'></div> //ファイルのアップロード <iframe title='upload_frame' name="upload_frame" style="display:none"></iframe> <form action="./upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="max_file_size" value="1000000"> <input type="file" name="upload_image"> <input type="submit" value="画像アップロード"> </form> /* jqueryファイル */ $(function(){ $(".dragArea").draggable({ cursor:'move', helper:'clone' }); $(".dropArea").droppable({ drop:function(e,ui){ alert("ドロップされました"); } }); }); /* upload.php */ <?php $upload_dir = './tmp/'; $filename = $_FILES['upload_image']['name']; move_uploaded_file($_FILES['upload_image']['tmp_name'], $upload_dir.$filename); ?> <script type="text/javasscript"> //親フレームのオブジェクトを取得 var container = parent.document.getElementById('adddragfile'); //要素を作成していく div = parent.document.createElement('div'); div.className = "dragArea"; image = parent.document.createElement('img'); image.src = './<?php print($upload_dir.$filename);?>'; image.width = "100"; image.height = "100"; container.appendChild(div); div.appendChild(image); </script>
- ベストアンサー
- JavaScript
- 画像アップロードについて
いつもお世話になっております。 画像アップロード機能を作成し、問題なくアップロードを行うことができたのですが、 ある一定サイズ(約2MB)を超えるとアップロードが行われない現象が発生しました。 アップロードした画像は既定のサイズにリサイズして保存する仕様となっているのですが アップロード自体が行われないため、困っています。 以下【該当処理抜粋】------------------------------------------------------------- // ファイル名を設定する $fname = "hoge.jpg"; // 画像の幅・高さを設定する【規定値】 $w_size = "150"; $h_size = "100"; $tmp_name = $_FILES[$fname]['tmp_name']; // 画像ファイル名 $filename = "./hoge/".$fname; if (is_uploaded_file($tmp_name)){ $type = $_FILES[$fname]['type']; if ($type == "image/jpeg" || $type == "image/pjpeg") { // 画像ファイル存在チェック if(file_exists($filename)){ // ファイルが存在する場合は削除する unlink($filename); } // 画像ファイル名でアップロードをおこなう move_uploaded_file($tmp_name, $filename); // 画像ファイルのサイズを取得する list($sw, $sh) = getimagesize($filename); $src = imagecreatefromjpeg($filename); $dst = imagecreatetruecolor($w_size, $h_size); // 画像ファイルを既定サイズにリサイズする imagecopyresized($dst, $src, 0, 0, 0, 0, $w_size, $h_size, $sw, $sh); imagejpeg($dst, $filename); echo $fname[1]."ファイルのアップロードが完了しました。<br>"; }else{ echo $fname ."ファイルの画像形式が正しくありません。<br>"; } }else{ echo $fname ."ファイルはアップロードされませんでした。<br>"; } ---------------------------------------------------------------------------------------------------- 現象について調べたところ、PHPにはアップロードサイズが設定されている(デフォルト2MB)ため サイズの大きいファイルはアップロードできないようです。 サーバーはロリポップでレンタルしているためphp.iniの設定を変更ができません。 画像自体を事前にリサイズしてアップロードを行えば問題ないのですが、 今後、一般の方にも公開を予定してまして、リサイズ方法が分からない人(そのようなソフトがない人)にも 操作できるようにデジカメで撮った写真をそのままアップロードできる形式にしたいと考えています。 何かいい方法があればご教授願います。 【環境】 PG：php4.3.11 WEB：Apache
- 締切済み
- PHP
- アップロードした画像をうまく表示できません
アップロードした画像をうまく表示できません。 a.php というスクリプトファイルを作成しました。 その中身の構成は、 1. [2.]の結果として戻ってきた場合のみ、画像を所定の場所に保存し、表示するスクリプト 2. formの<input type="file">があるスクリプト。戻り先はこのスクリプトがある、a.phpというファイル というようになっております。 2.のsubmitボタンを押して結果を確認したところ、画像はきちんと所定の場所に保存されるのですが、その時点ではうまく表示されません。「更新」ボタンを押して初めて画像が表示されます。 これを2.のsubmitボタンを押して、戻ってきた瞬間に表示させることは出来ないものでしょうか。教えて頂けると助かります。どうぞ宜しくお願いします。
- ベストアンサー
- PHP
- 変数の受け渡しによる画像の表示
こんな感じで変数の受け渡しによる画像の表示をしたいのですけど、うまく出来ません。どなたか宜しくお願いします。 <?php $gazou=$_GET['r']; echo"$gazou"; //変数の取得（１です）は出来ています。 echo'<IMG src="http://127.0.0.1/firstimage/"$gazou"..jpg" name="img2" border="0">'; ?>
- ベストアンサー
- PHP
- スマートフォンから画像のアップロード
スマートフォン用サイトで画像のアップロード機能を実装しようと思っています。 PCサイト用に作成したものをそのまま流用しようと思ったのですが、 うまくいきませんでした。 対応する画像はjpg,gif,pngの三種類です。 下記がPC用のソースです。 <form action="edit_url" method="POST" enctype="multipart/form-data"> <input type="file" name="Img" size="10"> </form> フォーム受け取り先で if(is_uploaded_file($_FILES['Img']['tmp_name'])){ //jpg,gif,png以外のファイルの場合はエラー if($_FILES['Img']['type'] != "image/pjpeg" AND $_FILES['Img']['type'] != "image/jpeg" AND $_FILES['Img']['type'] != "image/png" AND $_FILES['Img']['type'] != "image/gif"){ echo "エラー"; } } とすると「エラー」が表示されます。 $_FILES['Img']['type'] の中身を見ると 「application/octet-stream」 になっていました。 試してみた端末はandroid4.0の端末で、デフォルトブラウザを使用しました。 スマートフォンから画像をアップロードするには、 どのようにしたらよいのでしょうか。
- ベストアンサー
- PHP
- 候補画像から選択して画像をアップロード
通常、画像のアップロードは <form action="upload.php" method="post" enctype="multipart/form-data"> <p> 画像をアップロードする<br> <input type="file" name="pic"> </p> <p> <input type="hidden" name="code" value="<?php echo $code ?>"> <input type="submit" name="submit" value="アップロード"> </p> </form> というフォームを使っています。 ↓ ★画像アップロードフォーム http://pips.chu.jp/0/up/upload.php これで、「参照」を押すと、ローカルのフォルダから画像を選べますが、 あらかじめ作成した画像の候補の中から１つ選んでアップロードするにはどうすればよいでしょうか。 画像の候補は、「img」というフォルダを作り、その中に格納しています。 ↓ ★候補画像 http://pips.chu.jp/0/up/img/sample1.jpg http://pips.chu.jp/0/up/img/sample2.jpg http://pips.chu.jp/0/up/img/sample3.jpg 「参照」のボタンを押すと、「img」フォルダに行く方法が知りたいです。 また、ラジオボタンやセレクトボタンを使った方法があれば教えて頂けないでしょうか。 何卒よろしくお願いします。
- ベストアンサー
- PHP
- onclickで画像と文字を別々の場所に表示したいのですが...
onclickで小さい画像を別の場所に大きな画像で表示することは出来たのですが、その時に別の場所に文字を表示したいのです。 （例えば：「山」の小さな画像をクリックすると大きな「山」の画像が表示されて←これはＯＫ、 その下に「富士山」の文字を表示したい←これです。） 下記のようにしています。 <script language="javascript"> <!-- function Image(img){ document.getElementById("image").src=img} //--> </script> </head> <table> <tr> <td><img src="sample1_small.jpg" onclick="Image('sample1.jpg')"></td> <td><img src="sample2_small.jpg" onclick="Image('sample2.jpg')"></td> <td><img src="sample3_small.jpg" onclick="Image('sample3.jpg')"></td> <td><img src="sample4_small.jpg" onclick="Image('sample4.jpg')"></td> </tr> <tr> <td colspan="4"><img src="sample1.jpg" name="image"></td> </tr> <tr> <td>***ここに文字を表示させたいのです***</td> </tr> </table> 宜しくお願いします。
- ベストアンサー
- JavaScript
- ファイルのアップロードについて
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
お礼
そのとおりでした。imgタグ生成後にgetElementByIdを使ったところあっさり表示されました。 ありがとうございます。