File APIとドラッグ&ドロップを組み合わせてみる | @blog.justoneplanet.info
HTML5では、ユーザが選択したファイルにJavaScriptからアクセスできるようになったヽ(*ﾟ▽ﾟ)ﾉ ■ソース イベントハンドラが気に入らないけどまぁ。 <p ondragstart="dragstart(event)" ondragenter="dragenter(event);" ondragover="dragover(event);" ondrop="drop(event);">You drop some images, here!</p> <div id="preview"></div> JavaScript グローバルに書くのが気に入らないけどまぁ。基本的な動作としてブラウザにファイルがドロップされるとブラウザはファイルを元の動作で処理しようとする。つまりJavaScriptに処理を渡すようにはなっていないので、e.preventDefault()でデフォルトのイベント
ブラウザにファイルをドラッグ&ドロップそしてアップロードを調べてみたので » あるみ缶はある意味、勘
Gmailのようにドラッグ&ドロップして、アップロードってのをブラウザでできないか調べてみたのでメモ。 参考にしたのは、以下のURL File APIとドラッグ&ドロップを組み合わせてみる Firefox： Using files from web applications File DataTransfer Chrome: Drag-and-drop file upload in Google Chrome/Chromium? 大まかに処理の流れを見てみると多分次のような感じ。細かい処理はURL内のコードを見てください。 ドラッグ&ドロップをするためには、dragover,dragleave,dropといったイベントをイベントリスナに追加する。すると、取得したイベントのdataTransferオブジェクトのfilesってプロパティから、Fileオブジェクトが取得できる。 この後の方
html5のFileReaderでドラッグ&ドロップなファイルのアップロード - end0tknr's kipple - web写経開発
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
HTML5 の file API と jQuery でブラウザにファイルをドラッグ&ドロップしてアップロードするサンプルを作った - @kyanny's blog
GitHub - kyanny/html5_file_api_ajax_upload_sample: HTML5 file API + ajax file upload sample HTML5 の file API というのが面白そうなのでちょっといじってみた。 デモを動かすには Plack と JSON と Path::Class が必要です。このブログ読んでる人ならどれも ready for use ですよね。もしまだのひとは cpan -i Plack JSON Path::Class でよろしく。 git clone して plackup して Firefox 3.6.x 以降で開いてください。 複数ファイルをドロップしたときになんかうまく動いてない気がするとか、 app.psgi の書き方がだいぶいい加減とか、微妙なところはたくさんあるけどとりあえず動くところまでいけたので公開
Flash?いいえ、HTML5です: ファイルのドラッグ&ドロップによるフォトアップロード機能について - mixi engineer blog
はじめまして。コミュニケーションサービス開発部の澤と申します。コーヒーとカレーをこよなく愛する新卒2年目の新米エンジニアで、弊社Webのフロントエンドを主に担当しています。最近はmixiスマートフォン版(mixi Touch)の開発にも精力的に取り組んでいます。 さて、本日はPC版のmixiで1つの機能をリリースいたしました。ファイルをWebブラウザにドラッグ&ドロップするだけで写真をmixiフォトにアップロードできるもので、HTML5 File API※1を採用しています。本記事ではこの機能について色々とお話をしたいと思います。 なにこれ? 以下では、ドラッグ&ドロップによるアップロード機能を「本機能」と呼びます。 百聞は一見にしかずです。本機能のプロモーションムービーがありますので、まずはこちらをご覧ください。 動画では下記を説明しています。 従来のアップロード方法からドラッグ&ドロッ
File APIでブラウザーからローカルファイルを操作 (1/5)
W3Cで標準化が進められている「File API」を使うと、指定したローカルファイルのファイル情報やファイルの中身（データ）をJavaScriptで取得できます。今回のJavaScriptラボはこのFile APIを使って、ブラウザー上にファイルの内容を表示してみましょう。テキストファイルの内容をそのまま表示するサンプルと、バイナリファイルを16進数データの羅列（バイナリダンプ、ダンプリスト）として表示するサンプルを作成します。 File APIの対応ブラウザー File APIは2010年10月現在、以下のブラウザーで利用できます。 Firefox 3.6 / 4β Google Chrome 6 このほか、Safari 5が、File APIを使ったファイル情報（ファイル名やファイルサイズなど）の取得に対応していますが、ファイル内容へのアクセスはできないので今回作成するサンプルは動作し
Windowsに PHP eAcceleratorをインストールメモ
インストールのメモ。PHPは5.2.8。 インストール手順 Apache on Windows binaries and modules downloadからZIPをダウンロード（現時点の最新版（5.2.8）にしか対応していない？）ZIPを解凍（展開）して、eaccelerator.dllをPHPのextフォルダに移動またはコピーZIP内にあるcontrol.phpをWebブラウザで見られる場所に移動またはコピー（例：C:\apache\htdocs\test\control.php）control.phpの変数$userと$pwの値を適切なものに変える（この認証を使わないなら該当箇所をコメントアウトする）control.phpではshort_open_tagの"<?="を使ってるので、これを許可していない場合は"<?php echo "に置換する キャッシュ用のフォルダを作成（例：C:\
eAccelerator をインストールする - maruko2 Note.
eAccelerator をインストールする 提供：maruko2 Note. 移動： 案内, 検索 http://eaccelerator.net/wiki/Settings 目次 1 ソースコード 2 インストール 3 設定 3.1 Linux の共有メモリ設定 4 管理用 Web インターフェース (eAccelerator control panel) 5 脚注 ソースコード http://bart.eaccelerator.net/source/ インストール ソースコードを展開したディレクトリ内で phpize コマンドに続き ./configure を実行する。 --with-php-config= は php-config コマンドを指定する。 --with-eaccelerator-userid= は apache の実行ユーザ名を指定する。 $ phpize $ ./c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
