javascriptでファイルのリンクを取得したい

Question

jsで画像などのファイルのアップロードをしたいのですが、ファイルのリンクを取得する方法がわかりません。

画像名（file.name)をクリックしたら、そのファイルが表示される様にしたいです。

Comments

[maisumakun]

「ユーザーのローカルにあるファイルをアップロードさせる」のでしょうか、それとも「サーバサイドで用意したファイルを選ばせる」形なのでしょうか。

[Tsuyoshipanda]

前者です！

[gentaro]

とりあえず質問文を編集して、作ったコードとそれが動作する環境等を書きましょう。

Answer 1

画像名（file.name)をクリックしたら、そのファイルが表示される様にしたいです。

無理です。ユーザーが能動的に選択したファイルしか、ブラウザ内JavaScriptでは取得することができません。

Comments

[Tsuyoshipanda]

ユーザーが自由に選択できます。

Answer 2

単にファイルを選択するのでしたらJavaScriptは必須ではないです。
input type=fileを設置すればユーザーローカルからファイルを選択できます。
あとはform送信すればあとはサーバー側の処理です。
※formタグにenctypeは必ずいれること

Answer 3

画像名（file.name)をクリックしたら、そのファイルが表示される

file.name から「アップロードプレビュー」として回答します。

input[type=file][onchange] で files を取得したら、ループ処理で file を走査しつつ、
以下の処理を実装します。

1. file.name から リンクを動的に作成
2. URL.createObject.URL() で HTMLImageElement 用の src を取得

動的に生成するリンクは、clickイベントも仕込んでおき、
プレビュー領域への画像挿込/更新を実装します。

• blobUrl=URL.createObjectURL(file)
• URL.revokeObjectURL(blobUrl)

CODEPEN 動くサンプル

---

※クリックで削除する実装にも発展させる場合

1. ユーザにフォームを選択し直してもらう
2. FormDataを手動で作成してAjaxを使う