1

javascriptで、drag&dropされたファイルのfile objectを取得しており、そのファイル情報を画面に出力しています。

ファイル情報出力時、input type="file"タグに取得ファイルを設定して画面に出力することはセキュリティ上できないようなので、Pタグで表示していますがsubmitボタン押下時のsubmit対象にはなりません。

取得し、画面出力しているfile objectを、submitボタン押下時のsubmit対象にしたいのですが、どのようにsubmitの対象にすればよいか分かりません。
方法が分かる方がいましたら、ご教授をお願いします。

また、ファイルがdrag&dropされるたびに送信する方法は無しでお願いします。

・file object取得時ソース

var files = e.target.files

・画面出力時ソース
fileは取得したfile objectです

Output(
            "<p id = 'MessageParagraph'>name: <strong>" + file+
            "</strong> size: <strong>" + file.size +
            "</strong> bytes" +
            "<input id = 'Cancel' type = 'button' onclick = 'this.parentElement.remove()' value = 'Cancel' />" +
            "</p>"
        );

2 件の回答 2

1

FileReaderを利用してJavascriptでデータを読み込んで下さい。

ユーザが選択したファイルが、そのブラウザで表示可能な形式(画像や動画など)であれば、選択したファイルを画面に出力することは可能なはずです。

読み込んだデータをsubmitの対象にするにはformタグに以下のようなinput type="hidden"を追加します。

<input type="hidden" name="[ここに名前]" value="[ここにbase64などのデータの実態]">
1

file objectを格納しているリストをグローバル変数化し、
submit時にformタグ内の画面情報と、FileData.appendを使用してグローバル変数リストをformに追加。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。