JavaScriptのfileオブジェクトの選択を初期化する方法は?

このQ&Aのポイント
  • fileタイプのinput要素で選択したファイルを初期化する方法がわかりません。
  • valueプロパティやnullを設定してもファイルがクリアされません。
  • file以外の項目を変更せず、画面遷移せずに実現する必要があります。
回答を見る
  • ベストアンサー

JavaScriptの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項目は変更せず、また画面遷移もせず実現する必要があります。

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

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

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

stoutontap
質問者

お礼

教えていただいたリンク先で説明されていた方法で、思ったとおりの結果を得ることができました。 ソースを書き換えてしまうなんて方法が使えるのですね。大変勉強になりました。ありがとうございます。

関連するQ&A

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

  • <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> であればセットできるのです どうしたらセットできるでしょうか?

  • 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> よろしくお願いします。

  • input type="file"に入力するには?

    わからなかったので質問させてください。 inputtype="text"のときは入力できたのですが以下の方法で入力できたのですがfile場合はできないのでしょうか?。 入力したいのはファイルパスです。 ファイルパスを入力して画像ファイルをアップロードさせてたいのですがどのようにすればいいでしょうか。 どなたかご教授ください。 <input type="file" name="file" size="30"> WebBrowser1.Document.All.GetElementsByName("file")(0).InnerText = TextBox1.Text

  • INPUT TYPE=""submit"" の disabled をJavascriptで操作したい

    ご教授、お願いします。 <!-- function Kyoka(){ if(document.form02.ch_on.checked) { alert (""); document.form02.ilai2.disabled = false; } else { document.form02.ilai2.disabled = true } { // --> とスクリプトを記述し <TD><INPUT TYPE="checkbox" NAME="ch_on" VALUE="" onclick="Kyoka()"></TD>" <TD><FONT COLOR=green><INPUT TYPE="submit" name="irai2" VALUE="依頼" onClick="javascript:location.reload()"></TD>" と、body内に記述しています。 このとき、チェックボックスにチェックを入れると、アラートは表示されますが、その後でエラー(IEの右下のバーに「!」が表示)になります。 数時間悩みましたが、わかりません。 どなたかご教授頂けませんでしょうか? よろしくお願いします。 また、submitボタンのon/offをjavascriptを使わずに行う方法が、あるのでしょうか? もしあれば教えて頂ければ、幸いです。

  • input type="file"で複数選択を可能にする方法

    初めて利用させていただきます。初心者の為、できれば詳細なご回答いただけると嬉しいです。 早速ですが、<input type="file">の実行結果は、テキストエリアの横に【参照】ボタンがあるような状態になります。 このテキストエリアの部分に複数のファイルをどんどん選択して格納できる方法を探しております。 イメージとして、3行くらいがデフォルト表示のテキストエリアがあり、その横に【参照】と【削除】ボタンが上下に並び、 参照で選択したファイルがそのテキストエリアに格納されてゆき、3行を超えるとスクロールバーが表示される、 格納されたあるファイル名を反転させて【削除】選択で削除される、 というものを作りたいのです。 今回、クライアントの要望で添付ファイルは1000個まで選択可能という状態を実現しなくてはならず、<input type="file">を1000個並べる訳にもいかない為、とても困っております。 且つ、java script禁止令を出されています。 ファイル形式はjspですので、formのactionでサーバ側で処理を制御することは可能です。 念の為、私が探し出したソースで一番理想に近いものを併記致します。 <table>  <tr>   <td rowspan="2" nowrap><select name="File" size="3" multiple> <option value="">                         </select></td>   <td>   <iframe width="60" height="25" frameborder="no" scrolling="no" src="とあるexeファイルを指定"></iframe>   </td>   <td rowspan="2" valign="top" nowrap><font size="-1">「参照...」ボタンをクリックして<br>ファイルを指定してください。</font></td>  </tr>  <tr>   <td nowrap><input type="button" value=" 削除 " onClick="RemoveFile( this.form )"></td>  </tr> </table>

  • <input type="file">アップロード

    下記教えて下さい <input type="file" name="datafile"> <input type="submit" value="送信する"> 上記を使ってファイルのアップロード機能を作りたいのですが、 (1)ファイル選択していない状態で「選択されていません」となるので  文字を消したい(文字を非表示、または違う文言にしたい)場合、どこで設定するのでしょうか。 (2)送信するボタンを置かずに、選択時にそのまま送信処理につなげたいのですが  どのようにすれば良いでしょうか。

    • ベストアンサー
    • HTML
  • <input type="file">で条件分岐

    <input type="file">で、送信ボタンをクリックする前に、下記のようなことをしたいです。 どうやるのでしょうか? ■A ・ファイルを選択したかどうか、の条件分岐 ■B ・選択したファイル名を、JavaScript変数へ格納

  • Javascriptでセレクトメニューの選択チェックの方法

    Javascriptでセレクトメニューのフォームをチェックしたいのですが、 リストメニューの「選択して下さい」を選んだままだと、「番号を選択して下さい。」とエラーを出したいのですが、下記の様に書いてみたのですが、うまく動きません…どのように書けばいいか教えて下さい。宜しくお願いします。 <script language=\"JavaScript\"> <!-- function Check() { var str = document.form.a.value; if(document.form.a.value == "0") { alert("番号を選択して下さい"); } //--> </script> <form id="form" name="form" method="post" action="##"> <select name="a" onblur="Check();"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit" name="Submit" value="登録" onClick="Check();"> </form>

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

専門家に質問してみよう