マンガでよめる痔のこと・薬のこと

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";
}
}

このQ&Aに関連する最新のQ&A

A 回答 (7件)

クリアするだけであれば



document.getElementById(oID1).value.clear();

で、できるのではないでしょうか。
    • good
    • 0

No.5です。


補足に書かれている現状、やりたい事がよくわかりません。
第3者が確認できるようなソースを!
    • good
    • 0

http://d.hatena.ne.jp/Mars/20071102
こちらはinputをspanに収めてクリアする方法です。

この回答への補足

この方法で、IE8でも動作は確認できましたが、
PHPで、複数のファイルアップロード機能があり、
いずれか、1つのファイルを選択します。
<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になってしまいます。
そのような場合、どのような記述をすればよいのでしょうか?

補足日時:2009/11/13 17:49
    • good
    • 0

#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>
    • good
    • 0

> <input type="file">のテキストエリアをクリアしようとしています



type="file" への代入はできません。これは、意図しないファイルの不正アップロードを防ぐためのセキュリティ対策です。ただ、これでエラーは出ませんでした。(IE8の場合)
(type="file"の中身を消す方法として、一度<input>タグごとremoveして、新しい<input type="file">を生成する、という方法で出来ませんかね??試していませんが・・・)

エラーになりそうなところは、補足のonChangeイベントで呼び出しているpreview_imageの第3引数に閉じの ' がないことでしょうか。(下記☆印)

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">を生成すると
いうのは、具体的には、どのようにしたらよいのでしょうか?

補足日時:2009/11/13 15:05
    • good
    • 0

構成が不明なのでわかりませんが…



>BMPファイルを選択した場合には、テキストエリアをクリアしたい
>のですが、javascriptで行うと、エラーになってしまいます
ひょっとして、<input type="file">のエリアをクリアしようとしていませんか?
<input type="file">の内容は保護されているので、スクリプトからは値の取得は可能でも、確か、記入はできなかったような…?

この回答への補足

そうです。<input type="file">のテキストエリアをクリアしようとしています。構成としては、複数の質問があり、その中の回答したい質問に画像をアップロードして、回答内容を記入するというものです。
------------------------------------------------------------
質問
------------------------------------------------------------
回答
------------------------------------------------------------
質問
------------------------------------------------------------

補足日時:2009/11/13 14:24
    • good
    • 0

提示されているコードが中途半端です。


質問の意味が抽象的で解せません。
コードを全部出せないなら、もっと具体的に質問してください。

この回答への補足

<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を呼び出しています。

補足日時:2009/11/13 13:58
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QJavaScriptのfileオブジェクト(input type="file")の選択を初期化したい

fileでユーザーが選択したファイルを、未選択の状態にしたいのですができません。

valueプロパティを""にしてもnullにしても、元の値(ファイルパス)が入ったままです。

HTML:
<input type="file" name="picture_file">

JavaScript:
document.form_main.picture_file.value = "";
alert(document.form_main.picture_file.value);
document.form_main.picture_file.value = null;
alert(document.form_main.picture_file.value);

どうにかして初期化する方法はありますでしょうか?file以外のほかのinput項目は変更せず、また画面遷移もせず実現する必要があります。

Aベストアンサー

type="file"のvalueはセキュリティ上の制約でいぢる事はできません。
http://d.hatena.ne.jp/Mars/20071102
↑こちらのようなやり方しかないかと思います。

Qのイベントについて

<input type="file">でファイルを選択した時点にイベントを追加する方法を教えてもらえませんか?
セキュリティの観点から無理なのでしょうか?

Aベストアンサー

ファイルを選択した時点で、
onchange イベントが起こりますので、
それを利用すればいいです。
例:
<form name="File">
<input type="file" name="UPLOADFILE" onchange="alert(document.File.UPLOADFILE.value)">
</form>

Qhtmlのfileタグに自動で値を入れる方法

htmlのタグでいって
<input type="file">を用いてファイルをサーバーにアップロードしたいと思っています。で、このとき、ファイル名は任意に選べるのではなく固定で送信したいと思っています。

すなわち、HTMLを読み込んだ時点で、fileのテキストボックスにファイルパスが埋め込まれているか、JavaScriptで、ファイルパスを自動入力するようにしたいと思っています。

最終的には、form内のオブジェクトをすべて非表示にし、onload時にsubmitするような形にしたいと思っています。いろいろ事情があって苦肉の策になっています…。

とりあえず(だめだとは思っていたのですが)
<input type="file" value="ファイルパス" name="filepath">
と直書きにしてみたり
document.all.filepath.value = "ファイルパス";
などとしてみたりしましたがだめでした…。
W3C勧告の使用上はvalueでファイルパスを指定できるようになっているようなのですが、現在の一般的なブラウザでは禁止されているようですね。

このような場合、何らかの方法でfileにファイルパスを自動入力することはできますでしょうか?
もしできない場合、何らかの方法で実現する方法はありますでしょうか?よろしくお願いします。

ちなみに実現できればいい環境は
WinXP環境のIE6です。言語はクライアント言語はJavaScriptのみで、という条件付です。
できないかもしれないのですが、こういうのって必要になるときもあるよなーなどと思っており、もしかしたら解決方法があるかもしれないと思い質問しました。よろしくお願いします。

htmlのタグでいって
<input type="file">を用いてファイルをサーバーにアップロードしたいと思っています。で、このとき、ファイル名は任意に選べるのではなく固定で送信したいと思っています。

すなわち、HTMLを読み込んだ時点で、fileのテキストボックスにファイルパスが埋め込まれているか、JavaScriptで、ファイルパスを自動入力するようにしたいと思っています。

最終的には、form内のオブジェクトをすべて非表示にし、onload時にsubmitするような形にしたいと思っています。いろいろ事情があって苦肉...続きを読む

Aベストアンサー

やっぱ無理じゃないでしょうか。
なにか裏ワザ的な方法で一時的にできたとしても、いつか直されるかもしれないのでおいそれとは使えないし。

>W3C勧告の使用上はvalueでファイルパスを指定できるようになっている
→参考URL 「ユーザが明示的に送信を求めたファイル以外のものは送ってはいけない」とあります。

参考URL:http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/appendix/notes.html#forms-security

Q[html]タグの参照ボタンを画像ボタンにした時のsubmitの方法

なにから書けばいいのか難しいのですが…
とりあえず、先日次のような質問をしました。
【[html] <input type="file">タグの参照ボタンを画像ボタンにしたい。】
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1244273

その中のやり取りにあるように、参照ボタンを画像にすることはできたのですが、実際に参照ボタンを画像にしてからsubmitすることができなくなってしまいました…

いろいろ調べてみましたら、どうやら<input type="file">をjavascript等でclickして値を入れると、セキュリティ上submitできないみたいなのです。実際そのフォームがsubmitに対して無反応になります。javascriptで強引にsubmitしようとすると"アクセスが拒否されました"のエラーがでます。

なんかごちゃごちゃになってきた…

今自分が実現したいのは、以下の2つです。
1.<input type="file">の参照ボタンを画像にしたい。
2.1を実現後そのformをsubmitしたい。

どなたか実現している方がいましたら、ご教授ください。
IE6で動けば問題ないです。

すみませんコードは文字制限に引っかかって載せれなかったです…

なにから書けばいいのか難しいのですが…
とりあえず、先日次のような質問をしました。
【[html] <input type="file">タグの参照ボタンを画像ボタンにしたい。】
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1244273

その中のやり取りにあるように、参照ボタンを画像にすることはできたのですが、実際に参照ボタンを画像にしてからsubmitすることができなくなってしまいました…

いろいろ調べてみましたら、どうやら<input type="file">をjavascript等でclickして値を入れると、セキュリティ上submitできな...続きを読む

Aベストアンサー

試してみたところ、submitはキャンセルされてtype="file"の入力内容がクリアされますね。
(クリアされた状態でもう一度submitボタンをクリックすると送信できる。)

私的にはセキュリティ強化としても厳し過ぎる気もしますが・・・今の時点で何か方法が見つかっても今後セキュリティホールとして塞がれてしまう可能性もあるので、諦めたほうがいいのかもしれません。

Qエクセル:マクロ「Application.CutCopyMode = False」って?

エクセルのマクロを記録していると

「Application.CutCopyMode = False」

というものがよく出てきますが、これは何でしょう?
どういう意味のものかわかりません。
削除しても差し支えないのもでしょうか?

Aベストアンサー

「Application.CutCopyMode = False」の前で
セルのコピー、または切り取りを行っていると思います。
これは、その操作(セルのコピー、または切り取り)を無効にしているだけです。
------------
Range("A1").Select
Selection.Copy ← これを無効にしている
Range("A2").Select
ActiveSheet.Paste
Application.CutCopyMode = False
------------
上記の場合であれば、「Application.CutCopyMode = False」を削除しても問題ありませんが、
以下の場合、貼り付け処理でエラーになります。
------------
Range("A1").Select
Selection.Copy
Range("A2").Select
Application.CutCopyMode = False
ActiveSheet.Paste ← ココでエラー
------------
ご自分で、セルをコピーしてみると分かると思いますが、コピーした範囲が点線で点滅されます。
「Application.CutCopyMode = False」をすると、
その点滅がなくなります。

「Application.CutCopyMode = False」の前で
セルのコピー、または切り取りを行っていると思います。
これは、その操作(セルのコピー、または切り取り)を無効にしているだけです。
------------
Range("A1").Select
Selection.Copy ← これを無効にしている
Range("A2").Select
ActiveSheet.Paste
Application.CutCopyMode = False
------------
上記の場合であれば、「Application.CutCopyMode = False」を削除しても問題ありませんが、
以下の場合、貼り付け処理でエラーになります。
------------
...続きを読む

Qボタンを押してテキストエリアの内容をクリアする方法

自分の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>

自分のHPにテキスト翻訳機能をつけようと思い
Google language APIを利用したサイトに習い以下のように
作ってみました。(ソース提供してあった場所からいただきました)

この中にはリセットボタンがなかったので自分でつけてみたのですが、
テキストエリアの内容をうまくクリアする方法がわかりません。
リセットボタンを押したら左右両方のテキストエリアの内容をクリア
したいのです。

おそらく scriptのところにfunction reset()という内容を
つけなければならないのではと言うところまでは分...続きを読む

Aベストアンサー

function reset(){
document.getElementById("source").value ='';
document.getElementById("result").value ='';
}

Qwindow.open でExcelファイルを開く

window.openでブラウザからExcelファイルを開いています。

function test(){
 window.open('test.xls',null);
}

IE6+XPですとExcelファイルのみが開いてくれるのですが、IE7.0+Vistaでは空のIEウィンドウも一緒に開いてしまいます。
window.openを使いつつ、空ウィンドウが開かないようにする良い方法は無いでしょうか。
IE6でもIE7でも同じようにExcelファイルが開けることが理想です。

Aベストアンサー

location.href = "file://パス+ファイル名.xls";
だとIE7ではどのように動作しますか?
IE7は不安定なので入れてないので検証していないので何とも言えませんが、
条件付きコメントと組み合わせて作れそうな気がします。

http://questionbox.jp.msn.com/qa2298397.html?StatusCheck=ON

参考URL:http://www.keynavi.net/ja/bugh/comments.html

Qinput type="file" 参照内容のクリア

「input type="file"」にて、参照ボタン押下後に設定される、
ボタン左のテキストボックスの内容をクリアする方法を探しています。

「input type="file"」項目の直接入力を許可していれば可能かと思いますが、
「OnKeyDown = "return false;"」を設定し、直接入力を禁止しております。
可能であれば、このまま項目の直接入力は禁止としておきたいと思います。

以上の内容で、どなたか解決の方法をご存知ないでしょうか?
何卒宜しくお願い致します。

仕様ブラウザ
IE6・7

Aベストアンサー

http://d.hatena.ne.jp/Mars/20071102
こちらが参考になりますか?

Qhtmlでテーブル内にテキストボックスを作りたいのですが・・・

教えてください。

2行のテーブルを作ろうとしています。
1行目が項目で
2行目が入力できるようにしたいです。

入力できるようにしたいので
テーブル内にテキストボックスを作ったのですが
どうしてもテーブルを作る囲い線と
テキストボックスの右側の間に余白ができてしまいます。

テキストボックスの下にできる余白は
<form>
<table>
</table>
</form>
という感じで、テーブルをフォームで囲むことで
無くすことができました。

HTMLでこの余白を消せる方法がありましたら
ぜひ、教えてください。
よろしくお願いしますm(__)m

Aベストアンサー

ANo.1です。
「1行目が項目で2行目が入力」という事は、tableの構成は正しくはこうでしたね。

(省略)
<tr>
<th>項目名</th>
</tr>
<tr>
<td><input type="text" size="50" maxlength="100" name="hoge01" value=""></td>
</tr>
(省略)

失礼しました。でも、この結果でも同じですよ。

ただし…仮に、「項目名」に相当するデータのボリュームが、2行目の入力フィールドの長さより相対的に長くなってしまえば、当然余白はできますが。
そういう問題ではないですよね?

Qブラウザからファイルパスを取得するには

現在Webブラウザからローカルにあるファイルのパスを取得したいと
考えています。

イメージとしては、アップロードのときのように、参照ボタンを押すと
ダイアログが開き、そこからファイルを選択すればそのファイルのパスが
取得できるようなことを考えています。
ファイルアップロード時にファイルのパスを取得できることは知っているのですが、アップロード出来るサイズの制限を越えるものもあり、
できるだけアップロード処理を行わずに、ファイルのパスだけを取得できる
方法がないか探しております。

ご存知の方がいらっしゃいましたら、教えていただければ幸いです。

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

Aベストアンサー

単純に
enctype="multipart/form-data"
を指定しなければ
enctype="application/x-www-form-urlencoded"デフォルトが適用されるので、
<input type="file" name="filePath">
とでもしたら良かったと思います。
 たとえば、ローカルにある画像を使ってカレンダーを印刷するCGIを作成したときは、そのようにしたと記憶してます。


人気Q&Aランキング

おすすめ情報