こんちには、鈴木です。 HTML5 には File API というものがあます。 File API を使うとローカル PC からブラウザにドラッグ&ドロップされたファイルを扱うことができます。 ということで、今回は File API によるドラッグ&ドロップ処理をご紹介します。 まずは以下の HTML から始めましょう! <!DOCTYPE html> <html> <head> <title>HTML5 でドラッグ&ドロップ</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function() { // TODO ここにドラッグ&ドロップに必要な処理を記述します. }); </script> </head> <body> <
html5では、file apiが追加された為、ドラッグアンドドロップでfileを開けるようになったようなので、試しに書いてみました。 ※html5では、FileReaderクラスとFormDataクラスを使うようですが、firefox3.6では、FormDataが使用できないようなので、base64形式+jquery.param()なデータをjquery.post()でアップロードしています。 ※drag&dropでは画像のサムネイルやテキストファイルの内容もプレビューできます サーバ側の動作は確認していませんが、なんとなく理解できた気がします。 <html> <head> <meta charset="utf-8"> <title>drag & drop file upload</title> <script type="text/javascript" src="jquery-1.4
「これからはWebで何でもできるようになる」「Webブラウザで普通のアプリケーションが動くようになる」と、言われてきましたが、正直、今までそんなすごいWebアプリケーションってあったかな?と思う人も多いでしょう。 今まで、Webベースのアプリケーションがなかなか活用されなかった理由の一つは、「ローカルボリュームにアクセス出来ない」ということがあるのではないでしょうか。最近では「クラウドにデータを保存」というのがはやりですが、やはりハードディスクにファイルを保管しておかないと不安だ、というのが普通の人の感覚です。ローカルボリュームに直接アクセスできないのでは、まともなアプリケーションは作れません。 こうしたことを考慮し、HTML5では、ローカルボリュームのファイルにアクセスできる「File API」と呼ばれるものが整備されることになりました。といっても、自由にアクセス出来るわけではありません
この記事は賞味期限切れです。(更新から1年が経過しています) 外部リソースをプロジェクトにインストールするのに、今まではSublimeText2のNettuts+ Fetchを使用していましたが、 node.jsベースのパッケージマネージャーの「Bower」が大変良さそうだったのでレポートをしたためておきます。 Bower とは BOWER – THE BROWSER PACKAGE MANAGER html, css, and javascript Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you. BowerはWeb開発向けのパッケージマネージャー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く