javascript - 入力ファイルフィールドから入力テキストフィールドへ

Question

これが可能かどうかさえわかりませんが、入力ファイルフィールドで選択したファイルの値を入力テキストフィールドに取り込む方法はありますか？

このような：

Answer 1

changeファイルフィールドのイベントにフックします。

<form method="post" enctype="multipart/form-data">
    <input type="file" onchange="this.form.filename.value = this.value">
    <input type="text" name="filename">
</form>

Jsfiddleデモ。IE6 / 7は誤ってフルパスを提供しますが、他のブラウザはファイル名のみを正しく提供することに注意してください。

Answer 2

これは、新しいテキスト入力要素を作成し.value、ファイル入力のプロパティを入力することで可能になります。

ただし、最近のすべてのブラウザは、セキュリティ上の理由から、プロパティにファイル名のみを保存することに注意してください。value選択したファイルのフルパスを取得することはできません。

出典：IE8のMSDN

Answer 3

最初に自分のサーバーにファイルを保存せずにそれを行うことはできません。

ファイル入力コントロールには、ファイルのデータが含まれていません。POSTフォーム送信を介してファイルデータを送信するまで、ブラウザはプレースホルダーとしてそれを提供します。

ファイルのパスをたどっている場合は、それもできません（Pekkaが言うように、最近のブラウザーでは）。ブラウザはその情報をクライアント側のスクリプトに提供しません。ただし、ファイル名を提供する場合があります。