HTML5のFile APIを使用して、ドラッグ＆ドロップでファイルをアップロード | Soraxism

学びカテゴリーの変更を依頼記事元:

soraxism.com

18 usersがブックマークコメント

記事へのコメント1件

注目コメント
新着コメント

mag4n fileAPIについて

JavaScript

2016/01/19 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=http%3A%2F%2Fsoraxism.com%2Fsoraxism%2Fblog%2Fhtml5%25E3%2581%25AEfile-api%25E3%2582%2592%25E4%25BD%25BF%25E7%2594%25A8%25E3%2581%2597%25E3%2581%25A6%25E3%2580%2581%25E3%2583%2589%25E3%2583%25A9%25E3%2583%2583%25E3%2582%25B0%25EF%25BC%2586%25E3%2583%2589%25E3%2583%25AD%25E3%2583%2583%25E3%2583%2597%25E3%2581%25A7%25E3%2583%2595%25E3%2582%25A1%25E3%2582%25A4" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="http://soraxism.com/soraxism/blog/html5%E3%81%AEfile-api%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%80%81%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%EF%BC%86%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4">HTML5のFile APIを使用して、ドラッグ＆ドロップでファイルをアップロード | Soraxism</a><a href="https://b.hatena.ne.jp/entry/soraxism.com/soraxism/blog/html5%E3%81%AEfile-api%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%80%81%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%EF%BC%86%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4">はてなブックマーク - HTML5のFile APIを使用して、ドラッグ＆ドロップでファイルをアップロード | Soraxism</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

HTML5のFile APIを使用して、ドラッグ＆ドロップでファイルをアップロード | Soraxism

社内で使用するファイルアップローダを作ることになりました。実装段階では従来の「ファイルを選択」ボ... 社内で使用するファイルアップローダを作ることになりました。実装段階では従来の「ファイルを選択」ボタンを押して、ダイアログ内でファイルを選択する仕様だったのですが、操作を見ているとかなり深い階層のファイルをアップロードするようなこともあるようで、階層たどっていくのが手間なように感じたため、ドラッグ&ドロップでファイルをアップロードできるように仕様を変更しました。実装手順をメモとして残しておきます。仕様、完成図まずは完成図から。仕様は、ドラッグ&ドロップでファイルをアップロード従来の「ファイルを選択」ボタンからでも可複数ファイルに対応という感じにしてみました。 htmlの内容 <div id="drag-area"> <p>アップロードするファイルをドロップ</p> <p>または</p> <div class="btn-group"> <input type="file" m