まず、ファイルアップロードのフォームをプログラムしましょう。 (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js","msmaflink"); File APIというものを使えば、JavaScriptでより自由にファイルを操作できます。独自のバリデーションや、非同期アップロードなども実現できます。 まず … バリデーションが必要不可欠となる。 3. また、JavaScriptでファイルを送る場合は、このエラーは表示されないので注意しましょう。 JavaScriptで選択されたファイルデータを取得する. まず、ファイルアップロードのフォームをプログラムしましょう。 (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js","msmaflink"); 詳しくはFileReader - MDNが参考になります。, ファイルデータ(file)を渡すとプレビュー画像をid="preview"要素の中に追加する関数です。reader.onload = function (e) { ... }の部分でURLを受け取り、画像要素を作成し、HTMLに追加しています。, CodePenのサンプルも用意しました。画像選択時にファイルデータを取得し、previewFile関数にわたすところまでやっています。実際に画像プレビューが表示されることを確認してみてください。, 非同期で画像データをサーバーに送信するやり方はいくつかあります。ライブラリを使わずにやるなら、FormDataで作成したフォームデータを、Fetchで送信するのが簡潔でしょう。, 大まかな流れです。実際のアプリケーション開発では「async/awaitで非同期処理にする」「try/catchでエラーハンドリングする」なども必要になるでしょう。, で表示されるアップロードボタンの見た目は、CSSでカスタマイズできます。,