HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
もっともっとFile APIを使ってサーバ側で受け取ってみる | @blog.justoneplanet.info
前回の記事に以下の質問がありました。 質問なのですがバイナリデータはsendでは送れないのでは？ 自分も同じようなことをしているのですがFireFox限定のsendAsBinaryでないと無理でした。 どのようにして転送してるのでしょうか？ えーと。。。(･Θ･;)。。。あの、その。。。うかれててサーバ側を考えてませんでした。すみませんm(_ _)m ■クライアント側のコード 前回のコードとおなじ。 function dragStart(e){ //e.preventDefault(); } function dragEnter(e){ //e.preventDefault(); } function dragOver(e){ e.preventDefault(); } function drop(e){ var files = e.dataTransfer.files; for(var
Read files in JavaScript | Articles | web.dev
Read files in JavaScript Stay organized with collections Save and categorize content based on your preferences. Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate the
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://calavera.info/v2/blog/2010/02/22/pure-javascript-webdav-file-manager.xml
HTML5 / File API
