IE8で<input type="file">のテキストエリアをクリア

締切済

質問者：mamoru_tig
質問日時：2009/11/13 13:10
回答数：7件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (7件)

最新から表示
回答順に表示

No.7

回答者： kudlak55
回答日時：2009/11/19 14:57

クリアするだけであれば

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

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

- 0
- 件

通報する

No.6

回答者： steel_gray
回答日時：2009/11/16 12:06

No.5です。

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

- 0
- 件

通報する

No.5

回答者： steel_gray
回答日時：2009/11/13 17:40

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

この回答への補足

この方法で、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になってしまいます。
そのような場合、どのような記述をすればよいのでしょうか？

補足日時：2009/11/13 17:49

通報する

- 0
- 件

通報する

No.4

回答者： fujillin
回答日時：2009/11/13 15:57

#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>

- 0
- 件

通報する

No.3

回答者： Wizard_Zero
回答日時：2009/11/13 14:55

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

補足日時：2009/11/13 15:05

通報する

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2009/11/13 14:09

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

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

この回答への補足

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

補足日時：2009/11/13 14:24

通報する

- 0
- 件

通報する

No.1

回答者： yyr446
回答日時：2009/11/13 13:27

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

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

この回答への補足

<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

通報する