- 締切済み
IE8で<input type="file">のテキストエリアをクリア
IE8で、<input type="file">を使用していますが、 BMPファイルを選択した場合には、テキストエリアをクリアしたいのですが、 javascriptで行うと、エラーになってしまいます。 テキストエリアは複数あり、javascriptに可変変数を渡しています。 どなたか、解決方法をご存知の方、いらっしゃいましたら、 ご教授願います。よろしくお願い致します。 具体的なコードは、以下の通りです。 <script type="text/javascript"><!-- function preview_image(obj_image, image_id, oID1, oID2) { var ext = document.getElementById(oID1).value; if(ext.match(/\.(bmp)$/i)){ alert("bmpファイルは、アップロードできません。"); document.getElementById(oID2).src = "/img/dummy.jpg"; obj_image.style.color='#FFFFFF' return false; } else { document.getElementById(image_id).src= obj_image.value; document.getElementById(image_id).style.display="inline"; } }
- mamoru_tig
- お礼率0% (0/9)
- JavaScript
- 回答数7
- ありがとう数6
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- kudlak55
- ベストアンサー率0% (0/0)
クリアするだけであれば document.getElementById(oID1).value.clear(); で、できるのではないでしょうか。
- steel_gray
- ベストアンサー率66% (1052/1578)
No.5です。 補足に書かれている現状、やりたい事がよくわかりません。 第3者が確認できるようなソースを！
- steel_gray
- ベストアンサー率66% (1052/1578)
http://d.hatena.ne.jp/Mars/20071102 こちらはinputをspanに収めてクリアする方法です。
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 #3様の方法で実験してみたところ可能みたいですね。 <html> <head> <script type="text/javascript"> function check(f) { var i = 0, e, c = f.childNodes, flag = true; while (e = c[i++]) if (e.nodeName=='INPUT' && e.type=='file' && e.value.match(/\.bmp$/i)) { flag = false; var inp = document.createElement('INPUT'); inp.setAttribute("type", "file"); f.replaceChild(inp, e); } if (flag) { alert('OK'); //f.submit(); } else { alert('BMPファイル'); } } </script> </head> <body> <form> A:<input type="file"> <br> B:<input type="file"> <br> <button type="button" onclick="check(this.form)">check</button> </form> </body> </html>
- うぃず（@Wizard_Zero）
- ベストアンサー率69% (344/495)
> <input type="file">のテキストエリアをクリアしようとしています type="file" への代入はできません。これは、意図しないファイルの不正アップロードを防ぐためのセキュリティ対策です。ただ、これでエラーは出ませんでした。(IE8の場合) （type="file"の中身を消す方法として、一度<input>タグごとremoveして、新しい<input type="file">を生成する、という方法で出来ませんかね？？試していませんが・・・） エラーになりそうなところは、補足のonChangeイベントで呼び出しているpreview_imageの第３引数に閉じの ' がないことでしょうか。（下記☆印） onChange="preview_image(this, 'preview_img<?= $QA_datas[$i][0]['id']; ?>','img<?= $QA_datas[$i][0]['id']; ?>☆,'img_<?= $QA_datas[$i][0]['id']; ?>')" コピペミスかもしれませんが確認してみてください。 あと気になったので・・・。 実装済みかもしれませんが、拡張子は偽装できるのでサーバー側でのファイル検証も忘れずに。
補足
一度<input>タグごとremoveして、新しい<input type="file">を生成すると いうのは、具体的には、どのようにしたらよいのでしょうか？
- fujillin
- ベストアンサー率61% (1594/2576)
構成が不明なのでわかりませんが… ＞BMPファイルを選択した場合には、テキストエリアをクリアしたい ＞のですが、javascriptで行うと、エラーになってしまいます ひょっとして、<input type="file">のエリアをクリアしようとしていませんか？ <input type="file">の内容は保護されているので、スクリプトからは値の取得は可能でも、確か、記入はできなかったような…？
補足
そうです。<input type="file">のテキストエリアをクリアしようとしています。構成としては、複数の質問があり、その中の回答したい質問に画像をアップロードして、回答内容を記入するというものです。 ------------------------------------------------------------ 質問 ------------------------------------------------------------ 回答 ------------------------------------------------------------ 質問 ------------------------------------------------------------
- yyr446
- ベストアンサー率65% (870/1330)
提示されているコードが中途半端です。 質問の意味が抽象的で解せません。 コードを全部出せないなら、もっと具体的に質問してください。
補足
<span id="img_<?= $QA_datas[$i][0]['id']; ?>"><input type='file' name='img<?= $QA_datas[$i][0]['id']; ?>' id='img_<?= $QA_datas[$i][0]['id']; ?>' onChange="preview_image(this, 'preview_img<?= $QA_datas[$i][0]['id']; ?>','img<?= $QA_datas[$i][0]['id']; ?>,'img_<?= $QA_datas[$i][0]['id']; ?>')"></span> というPHPコードから、Javascriptを呼び出しています。
関連するQ&A
- input type="file"のvalue監視
input="file"のvalue値が変更されたら別のテキストフィールドに表示するというScriptを書いたのですが動作してくれません。 input="file"ではなく普通のテキストフィールドならば動作します。 fileフィールドでは動作しないのでしょうか。それとも書き方がまずいのでしょうか。 以下、ソースです。 <html> <head> <title>test</title> <script type="text/javascript" src="/javascript/prototype.js"></script> </head> <body> <form action="" enctype="multipart/form-data" method="post"> <input id="file_test" name="file_test" type="file"> <br> <div id="result">表示</div> <script type="text/javascript"><!-- window.onload = function() { new Form.Element.Observer('file_test', 1, function(element, value) { document.getElementById('result').innerHTML = value; }); } //--></script> </form> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
- <input type="file"/>
に文字列をセットするために <form> <input type="file" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> としてもセットできません <form> <input type="text" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> であればセットできるのです どうしたらセットできるでしょうか？
- ベストアンサー
- JavaScript
- <input type="file">で画像を選択
HTMLのページ内で<input type="file">で画像を選択して その画像を現在のHTMLページに表示する という質問のベストアンサー http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1151913361 にしたがって、使ってみましたが、表示されません。 使い方のどこがまちがっているか教えてください。 また、そこにある動作サンプルが見えません。 動作サンプルを見る方法もわかりましたら、お願いします。 -------------------------- <html lang="ja"> <head> <title></title> <script type="text/javascript"> function dispImg() { var myFile = document.getElementById('ans5'); var src = null; if (window.File) { src = myFile.files[0].getAsDataURL(); } else { src = myFile.value; } document.getElementById('DISP').src = src; } </script> </head> <body> <form name ="a"> 写真を指定してください： <input type="file" name="ans5" Onchange="dispImg();"><br> <img src="" alt="" id="DISP"> </form> </body> </html>
- ベストアンサー
- JavaScript
- javascriptでボタンを押すたびにテキストエリアを追加
javascriptでボタンを押すたびにテキストエリアを追加しようとしています。 下記の内容を応用して 1 テキストエリア(1) 2 テキストエリア(2) 3 テキストエリア(3) 4 テキストエリア(4) ・ ・ ・ ボタンを押すたびに追加され15個まで増やすという風にしようとしているのですが、うまくいきません。テーブルの中に入るところまでは良くのですが、連番の数字を入れるのができません。 var tag_num=4; function myTextAreaAdd(obj){ var max=15; var c=count("howto"); if(c>=max) return false; var oTag = document.createElement("textarea"); oTag.setAttribute("name", "howto" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); if(c>=max-1) obj.disabled=true; } 教えてください。宜しくお願いします。
- ベストアンサー
- JavaScript
- ボタンを押してテキストエリアの内容をクリアする方法
自分のHPにテキスト翻訳機能をつけようと思い Google language APIを利用したサイトに習い以下のように 作ってみました。（ソース提供してあった場所からいただきました） この中にはリセットボタンがなかったので自分でつけてみたのですが、 テキストエリアの内容をうまくクリアする方法がわかりません。 リセットボタンを押したら左右両方のテキストエリアの内容をクリア したいのです。 おそらく scriptのところにfunction reset()という内容を つけなければならないのではと言うところまでは分かるのですが。 私のレベルには限界がありますので、どうぞよろしくご教授ください。 スクリプトを貼ります。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"></meta> <style type="text/css"> textarea { height: 50px; width: 250px } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("language", "1"); // 画面初期化時に言語選択ボックスを作成する function init() { var langList = document.getElementById("target-language"); // (1) Language APIで使える言語をループしてリストに表示 for (var lang in google.language.Languages) { var langOpt = new Option(lang, google.language.Languages[lang]); langList.options[langList.options.length] = langOpt; } } // body.onload時にinit()が呼ばれるようにする google.setOnLoadCallback(init); function translate() { var source = document.getElementById("source").value; // (2) 入力された文字列から、言語を自動的に判別する google.language.detect(source, function(detectResult) { if (detectResult.error) { alert("Error:" + error.message); return; } // 選択されている言語を取得 var langList = document.getElementById("target-language"); targetLang = langList.options[langList.selectedIndex].value; // 翻訳 google.language.translate( source, detectResult.language, targetLang, function(result) { if (result.error) { alert("Error:" + result.message); return; } document.getElementById("result").value = result.translation; }); }); } </script> </head> <body> <center> <textarea id="source"></textarea> <textarea id="result"></textarea><br> Translate into <select id="target-language"></select> <button onclick="translate()">Translate</button> <button onclick="reset()">Reset</button> </center> </body> </html>
- ベストアンサー
- JavaScript
- onClickがinput type="image"だとできない！
以前、↓の質問をさせていただき解決したのですが、 input type="image" にしたいのですが、 ただ変更するだけでは、できません。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911 どのように変更したらいいでしょうか？ 教えてください！ 現在下記の方法でやっています。 <style type="text/css"> .white{ background-Color:white; color:black; } .gray{ background-Color:gray; color:yellow; } .blue{ background-Color:blue; color:red; } </style> <body> <form> 全体： <input type="button" value="White" onClick="document.body.className='white'"> <input type="button" value="Gray" onClick="document.body.className='gray'"> <input type="button" value="Blue" onClick="document.body.className='blue'"><br> テーブル1: <input type="button" value="White" onClick="document.getElementById('t1').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br> テーブル2: <input type="button" value="White" onClick="document.getElementById('t2').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br> </form> <table width=100% id="t1"> <tr><td>test</td></tr> </table> <table width=100% id="t2"> <tr><td>test</td></tr> </table> </body>
- ベストアンサー
- JavaScript
- ページが切り替わるスクリプトで最初から指定のページを表示させる
<html> <head> <script type="text/javascript" language="JavaScript"> <!-- JavaScript小技集 2005. 6.17 function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "block"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option selected="selected">記事を選ぶ</option> <option value="item1">記事１</option> <option value="item2">記事２</option> <option value="item3">記事３</option> </select> </form> </body> <html> これなんですが、これを貼ってあるページを読み込んだ際、最初からitem1を表示した状態にしたいのですが どうすればよいのでしょう？
- 締切済み
- Java
- window.onloadを複数実行したいのです
こんにちは。 最近、サーバーを借りてホームページを作りはじめた初心者なのですが、どなかた教えて下さいm(_ _)m ↓formでselectを使ったプルダウンメニューを設置しました。 <select id="area" name="area" onchange="changeA();"> <option value="1">海</ottion> <option value="2">山</option> </select> このプルダウンメニューを触ると、Javascriptの制御で、海の項目が選択されると海関連の情報が表示され、山の項目が選択されると山関連の情報が表示されるページを作りました。 ↓Javascriptソース function changeA(){ if(document.getElementById('area')){ id = document.getElementById('area').value; if(id == '1'){ document.getElementById('sea1').style.display = ""; document.getElementById('sea2').style.display = ""; document.getElementById('mnt1').style.display = "none"; document.getElementById('mnt2').style.display = "none"; }else if(id == '2'){ document.getElementById('sea1').style.display = "none"; document.getElementById('sea2').style.display = "none"; document.getElementById('mnt1').style.display = ""; document.getElementById('mnt2').style.display = ""; } } } window.onload = changeA; という感じです。 このような制御のプルダウンメニューを同じページにもうひとつ配置したところ、ページをブラウザの更新ボタンで更新したりすると、関係ない項目などが表示されるようになってしまいました。 原因を調べるために検索をしてみたところ、window.onloadを2つ実行させるには特別なことが必要とのことでしたが、どうすればよいのかが全然わかりません。 どなたか教えてくれないでしょうか？ お願いします。
- 締切済み
- JavaScript
- 表示・非表示のスクリプトで、複数指定する場合はどうしたらいいですか？
複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。 なんとか、2つまではわかったのですが、3つまで表示すると3つ目が非表示になってくれません。 最終的には5つくらいを下記のスクリプトで行いたいのですが、どうすれば、複数のIDを対応させることができますか？ ●例えば、test1を押した際、test2と3は非表示としたいです。 <script language="JavaScript" type="text/JavaScript"> <!-- function ChDsp2(strShow,strHidden){ var obj=''; obj=document.all && document.all(strShow) || document.getElementById && document.getElementById(strShow); obj.style.display = "block"; obj=document.all && document.all(strHidden) || document.getElementById && document.getElementById(strHidden); obj.style.display = "none"; } //--> </script> <a href="javascript:ChDsp2('text1','text2');">1を表示</a> <a href="javascript:ChDsp2('text2','text1');">2を表示</a> <a href="javascript:ChDsp2('text3','text1');">3を表示</a> <span id="text1" style="display:block;">111111</span> <span id="text2" style="display:none;">222222</span> <span id="text3" style="display:none;">333333</span> どなたか教えてください。お願いします。
- ベストアンサー
- JavaScript
- javascriptでのフェードイン
javascriptを使用してhtml上の画像をフェードインにて表示したいと思っております。 ネット上の情報とこちらのサイトでのアドバイスを元に以下のソースを使用しておりますが WindowsのIE（6&7）で確認すると「エラー：オブジェクトがありません」と表示されてしまいます。 こちらで確認したところjavascript最後の行の「window.onload～」がエラーの原因となっているようなのですが、 修正する記述方法が分からず困っております。 解決策をご存じの方がおられましたらお手数ですが、 ご教授いただけないでしょうか。 何卒、宜しくお願い申し上げます。 ///javascript file（fade.js）/// document.write("<style type='text/css'>#thephoto1 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto2 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto3 {visibility:hidden;}</style>"); function initImage() { for(i=1;i<4;i++){ imageId = 'thephoto' + i; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() { initImage() } //////////////////////// ///html file/// <html> <head> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto1" /> <img src="img_02.jpg" id="thephoto2" /> <img src="img_03.jpg" id="thephoto3" /> </body> </html> ////////////////////////
- ベストアンサー
- JavaScript
補足
この方法で、IE8でも動作は確認できましたが、 PHPで、複数のファイルアップロード機能があり、 いずれか、１つのファイルを選択します。 <input type="file" name="file_x"> <input type="file" name="file_y"> <input type="file" name="file_z">の様に連番に表示し、 例えば、1,2,3,4,5と複数の質問があり、5つの質問でまだ回答していない 1に回答すると、正常に動作しますが、1～5で回答していない時に、 1以外の2～5のいずれかに回答した場合、例として、ここでは3に答えたとします。表示されるのが、1になってしまいます。 そのような場合、どのような記述をすればよいのでしょうか？