web-dev-qa-db-ja.com

HTMLでファイル入力に値を設定する方法

注：

以下の回答とコメントは、2009年のレガシーブラウザの状態を反映しています。今度は、2017年にJavaScriptとdataTransferまたはFileListオブジェクトを使用して、ファイル入力要素の値を動的またはプログラム的に設定できます。

詳細とデモについては、この質問の回答を参照してください。
プログラムでファイル入力値を設定する方法（例：ファイルをドラッグアンドドロップするとき）

値を設定するにはどうすればいいですか。

<input type="file" />
javascripthtmlfile-uploadpreset
282
Alon Gubkin

あなたはセキュリティ上の理由でできません。

想像してみてください。

<form name="foo" method="post" enctype="multipart/form-data">
    <input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>

あなたが訪問したウェブサイトにこれを可能にさせたくないですか？ =）

460
BalusC

できません。

ファイル入力の値を設定する唯一の方法は、ユーザーがファイルを選択することです。

これはセキュリティ上の理由から行われています。それ以外の場合は、クライアントコンピュータから特定のファイルを自動的にアップロードするJavascriptを作成できます。

116
Guffa

あなたの質問に対する回答ではありませんが（他の人が回答したことがありますが）、アップロードされたファイルフィールドの編集機能を使いたい場合は、おそらく次のようにします。

  • ファイル名またはURL、それをダウンロードするためのクリック可能なリンクを印刷することによってこのフィールドの現在の値を表示するか、またはそれが画像の場合：単にサムネイルとして表示する
  • 新しいファイルをアップロードするための<input>タグ
  • チェックすると現在アップロードされているファイルを削除するチェックボックス。 「空の」ファイルをアップロードする方法はないので、フィールドの値を消去するには次のようなものが必要です。
47
Wim

できません。そしてそれはセキュリティ対策です。誰かがファイル入力値を機密データファイルに設定するJSを書いたと想像してみてください。

32
Eimantas

他の人がここで述べているように、JavaScriptを使ってファイルを自動的にアップロードすることはできません

しかしながら！ 自分のコードで送信したい情報（つまりpasswords.txtではない）にアクセスできる場合は、それをblob-タイプとしてアップロードしてからファイルとして扱うことができます。

サーバーが最終的に表示するものは、実際に<input type="file" />の値を設定している人と区別がつきません。トリックは、結局のところ、サーバーから新しいXMLHttpRequest（）を始めることです...

function uploadFile (data) {
        // define data and connections
    var blob = new Blob([JSON.stringify(data)]);
    var url = URL.createObjectURL(blob);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'myForm.php', true);

        // define new form
    var formData = new FormData();
    formData.append('someUploadIdentifier', blob, 'someFileName.json');

        // action after uploading happens
    xhr.onload = function(e) {
        console.log("File uploading completed!");
    };

        // do the uploading
    console.log("File uploading started!");
    xhr.send(formData);
}

    // This data/text below is local to the JS script, so we are allowed to send it!
uploadFile({'hello!':'how are you?'});
0
HoldOffHunger

1）ファイル入力のデフォルト値の問題ISは「セキュリティ上の理由で行われた」わけではありませんが、ブラウザは「実装できなかったため、正当な理由はありません」：this deep report

2）単純な解決策は、ファイル入力の上にテキスト入力 こちらのように を使用することです。もちろん、ファイル入力ではなくテキスト入力の値を使用してファイルを送信するためのコードが必要です。

私の場合は、HTAアプリケーションを実行しても問題ありませんが、フォームはまったく使用しません。

よろしくお願いします。

0
msillano