Soumettre la recherche
Mettre en ligne
Drag anddropfilereader
•
Télécharger en tant que PPTX, PDF
•
0 j'aime
•
941 vues
Daichi Nakajima
Suivre
Technologie
Signaler
Partager
Signaler
Partager
1 sur 20
Télécharger maintenant
Recommandé
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
nakamura001
Grails-1.1を斬る!~Grails-1.1からのチーム開発~ in Tokyo
Grails-1.1を斬る!~Grails-1.1からのチーム開発~ in Tokyo
Tsuyoshi Yamamoto
「Grails-1.1を斬る!〜Grails-1.1からのチーム開発〜」
「Grails-1.1を斬る!〜Grails-1.1からのチーム開発〜」
Tsuyoshi Yamamoto
BMXUG ブロックチェーンハンズオン 20190622
BMXUG ブロックチェーンハンズオン 20190622
Kohei Nishikawa
OCamlでWebアプリケーションを作るn個の方法
OCamlでWebアプリケーションを作るn個の方法
Hiroki Mizuno
Aizu lt tokyo_luxion
Aizu lt tokyo_luxion
Tomoaki Tamura
How Smalltalker Works
How Smalltalker Works
Sho Yoshida
GNU awk (gawk) を用いた Apache ログ解析方法
GNU awk (gawk) を用いた Apache ログ解析方法
博文 斉藤
Recommandé
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
第3回Webkit/HTML5勉強会 - File APIと加速度センサー
nakamura001
Grails-1.1を斬る!~Grails-1.1からのチーム開発~ in Tokyo
Grails-1.1を斬る!~Grails-1.1からのチーム開発~ in Tokyo
Tsuyoshi Yamamoto
「Grails-1.1を斬る!〜Grails-1.1からのチーム開発〜」
「Grails-1.1を斬る!〜Grails-1.1からのチーム開発〜」
Tsuyoshi Yamamoto
BMXUG ブロックチェーンハンズオン 20190622
BMXUG ブロックチェーンハンズオン 20190622
Kohei Nishikawa
OCamlでWebアプリケーションを作るn個の方法
OCamlでWebアプリケーションを作るn個の方法
Hiroki Mizuno
Aizu lt tokyo_luxion
Aizu lt tokyo_luxion
Tomoaki Tamura
How Smalltalker Works
How Smalltalker Works
Sho Yoshida
GNU awk (gawk) を用いた Apache ログ解析方法
GNU awk (gawk) を用いた Apache ログ解析方法
博文 斉藤
Start printf 6_takarakasai
Start printf 6_takarakasai
takara kasai
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
Fujio Kojima
OSSから学ぶSwift実践テクニック
OSSから学ぶSwift実践テクニック
庸介 高橋
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Shoot Morii
前期講座09
前期講座09
Takenori Nakagawa
ハッシュと配列
ハッシュと配列
TENTO_slide
Brand visibility 2 en
Brand visibility 2 en
Diferencia
僕とPuppetと
僕とPuppetと
Daichi Nakajima
English.sucess cases lauching chevrolet spark
English.sucess cases lauching chevrolet spark
Diferencia
Alyssa, Gianna& Grace
Alyssa, Gianna& Grace
gigistar4
Refining
Refining
Jayaseelan Gopinathan
English. success cases mscar children day
English. success cases mscar children day
Diferencia
Laviola marylea 2010-201_labinfo
Laviola marylea 2010-201_labinfo
marylea
サービスをRailsにした話
サービスをRailsにした話
Daichi Nakajima
Ethiopia
Ethiopia
Afadz101
Môn triết chương v giá trị hoàn chỉnh
Môn triết chương v giá trị hoàn chỉnh
ngaynangha
Môn triết chương v giá trị
Môn triết chương v giá trị
ngaynangha
jQuery超入門編
jQuery超入門編
Yasuhito Yabe
C# ドラッグ&ドロップ処理の実装
C# ドラッグ&ドロップ処理の実装
Hiroki Takahashi
Html5 Web Applications
Html5 Web Applications
totty jp
Jqm20120210
Jqm20120210
cmtomoda
Try Jetpack
Try Jetpack
Hideaki Miyake
Contenu connexe
Tendances
Start printf 6_takarakasai
Start printf 6_takarakasai
takara kasai
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
Fujio Kojima
OSSから学ぶSwift実践テクニック
OSSから学ぶSwift実践テクニック
庸介 高橋
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Shoot Morii
前期講座09
前期講座09
Takenori Nakagawa
ハッシュと配列
ハッシュと配列
TENTO_slide
Tendances
(6)
Start printf 6_takarakasai
Start printf 6_takarakasai
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
「Windows 8 ストア アプリ開発 tips」 hokuriku.net vol.11 (2013年1月26日)
OSSから学ぶSwift実践テクニック
OSSから学ぶSwift実践テクニック
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
前期講座09
前期講座09
ハッシュと配列
ハッシュと配列
En vedette
Brand visibility 2 en
Brand visibility 2 en
Diferencia
僕とPuppetと
僕とPuppetと
Daichi Nakajima
English.sucess cases lauching chevrolet spark
English.sucess cases lauching chevrolet spark
Diferencia
Alyssa, Gianna& Grace
Alyssa, Gianna& Grace
gigistar4
Refining
Refining
Jayaseelan Gopinathan
English. success cases mscar children day
English. success cases mscar children day
Diferencia
Laviola marylea 2010-201_labinfo
Laviola marylea 2010-201_labinfo
marylea
サービスをRailsにした話
サービスをRailsにした話
Daichi Nakajima
Ethiopia
Ethiopia
Afadz101
Môn triết chương v giá trị hoàn chỉnh
Môn triết chương v giá trị hoàn chỉnh
ngaynangha
Môn triết chương v giá trị
Môn triết chương v giá trị
ngaynangha
En vedette
(11)
Brand visibility 2 en
Brand visibility 2 en
僕とPuppetと
僕とPuppetと
English.sucess cases lauching chevrolet spark
English.sucess cases lauching chevrolet spark
Alyssa, Gianna& Grace
Alyssa, Gianna& Grace
Refining
Refining
English. success cases mscar children day
English. success cases mscar children day
Laviola marylea 2010-201_labinfo
Laviola marylea 2010-201_labinfo
サービスをRailsにした話
サービスをRailsにした話
Ethiopia
Ethiopia
Môn triết chương v giá trị hoàn chỉnh
Môn triết chương v giá trị hoàn chỉnh
Môn triết chương v giá trị
Môn triết chương v giá trị
Similaire à Drag anddropfilereader
jQuery超入門編
jQuery超入門編
Yasuhito Yabe
C# ドラッグ&ドロップ処理の実装
C# ドラッグ&ドロップ処理の実装
Hiroki Takahashi
Html5 Web Applications
Html5 Web Applications
totty jp
Jqm20120210
Jqm20120210
cmtomoda
Try Jetpack
Try Jetpack
Hideaki Miyake
webを飾る技術
webを飾る技術
ina job
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
Yuji Takayama
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
Twitter sphere of #twitter4j #twtr_hack
Twitter sphere of #twitter4j #twtr_hack
kimukou_26 Kimukou
ScaLa+Liftとか
ScaLa+Liftとか
youku
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
linzhixing
実行時のために最適なデータ構造を作成しよう
実行時のために最適なデータ構造を作成しよう
Hiroki Omae
HTML5&API総まくり
HTML5&API総まくり
Shumpei Shiraishi
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界
Yuji Takayama
HTML5最新動向
HTML5最新動向
Shumpei Shiraishi
Chrome Extensionsの基本とデザインパターン
Chrome Extensionsの基本とデザインパターン
Yoichiro Tanaka
YUI
YUI
Tatsuya Sasaki
Titanium Mobile
Titanium Mobile
Naoya Ito
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
Taisuke Fukuno
広告配信現場で使うSpark機械学習
広告配信現場で使うSpark機械学習
x1 ichi
Similaire à Drag anddropfilereader
(20)
jQuery超入門編
jQuery超入門編
C# ドラッグ&ドロップ処理の実装
C# ドラッグ&ドロップ処理の実装
Html5 Web Applications
Html5 Web Applications
Jqm20120210
Jqm20120210
Try Jetpack
Try Jetpack
webを飾る技術
webを飾る技術
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Twitter sphere of #twitter4j #twtr_hack
Twitter sphere of #twitter4j #twtr_hack
ScaLa+Liftとか
ScaLa+Liftとか
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
実行時のために最適なデータ構造を作成しよう
実行時のために最適なデータ構造を作成しよう
HTML5&API総まくり
HTML5&API総まくり
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界
HTML5最新動向
HTML5最新動向
Chrome Extensionsの基本とデザインパターン
Chrome Extensionsの基本とデザインパターン
YUI
YUI
Titanium Mobile
Titanium Mobile
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
広告配信現場で使うSpark機械学習
広告配信現場で使うSpark機械学習
Drag anddropfilereader
1.
Drag & Drop
ときどき File API nakajijapan
2.
背景的なもの html5といろいろなAPIの出現に伴い、いろいろな表現ができるようになってきた。
こんな僕でも実装できた! 写真をドラッグアンドドロップして画像投稿できたらいいなぁという純粋な願望 イメージは30Days的な表現をしたかった。
3.
調査 Drag &
Drop DataTransfer FileApi FileReader // XmlHttpRequest ※ブラウザはFirefoxのみ
4.
Drag & Drop
5.
Drag & Drop
dragenter ドラッグ中のマウスカーソルが、要素と重なったときに瞬間に呼び出されるイベント dragover ドラッグ中のマウスカーソルが要素内から出た時に呼び出されるイベント drop ドラッグ時に呼び出されるイベント
6.
あああ <javascript> function
init() { dandd= new Nakaji(); addEvent(window, "dragenter", dandd.dragEnter, false); vardropBox = {}; dropBox= document.getElementById("dropbox"); addEvent(dropBox, "dragover", dandd.dragOver, false); addEvent(dropBox, "drop", dandd.drop, true); } // ロード時に処理を追加 window.addEventListener("load", init, false);
7.
あああ <javascript> Nakaji.prototype=
{ //------------------------- // ドラッグ中のマウスカーソルが、 // 要素と重なったときに瞬間に呼び出されるイベント //------------------------- dragEnter : function(event) { $("#dropbox").css('background', 'red'); },
8.
<html> <div id=
"dropbox"> Drop Here!!</div>
9.
File API
10.
File API FileReader
今のところFirefoxのみ 次のバージョンのChromeで利用可能!? http://gihyo.jp/dev/column/01/browser/chrome5 ファイルをたくさんアップロードする処理をしようとすると重くなる?
11.
drop : function(event)
{ // ドラッグされたデータを取得 var files = event.dataTransfer.files; ・ ・ ・ var file = files[i]; var reader = new FileReader(); reader.name = file.name, reader.index = i, reader.file = file; // メソッドの登録 reader.addEventListener("loadend", Nakaji.prototype.buildImageListItem, false); // ファイルをdataURL形式で読み取る reader.readAsDataURL(file); あああ
12.
buildImageListItem : function(event)
{ varimgTag = $(document.createElement("img")); vardivTag = $(document.createElement("div")); varname = event.target.name; vardata = event.target.result; varfile = event.target.file; imgTag.attr({ width: 200, height: 200, src: data }); // 先頭に追加 $("#bag").prepend(divTag.append(imgTag.fadeIn(2000))); あああ
13.
以上!
14.
XmlHttpRequest()
15.
XmlHttpRequest() 画像ファイルをアップロード DataTransferオブジェクトを利用
処理中は進捗状況を表示させる XmlHttpRequest.onprogress()
16.
あああ <javascript>
// マルチパート形式で画像を保存する multipartFormData+= '--' + boundary + ''; multipartFormData += 'Content-Disposition: form-data; filename="' + file.name + '"' +'Content-Type: ' + contentType + '' +'Content-Transfer-Encoding: binary' + '' + '' +file.getAsBinary() +'--' + boundary + '--';
17.
あああ <javascript> //アップロード先
xhr.open("POST", "./upload.php"); // ヘッダの設定 xhr.setRequestHeader( "Content-type","multipart/form-data; boundary=" + boundary ); xhr.setRequestHeader( "Content-Length", multipartFormData.length ); // バイナリデータを送信 xhr.sendAsBinary(multipartFormData);
18.
まとめ ほとんどクロスブラウザできてない Firefoxでしか動かない。
jqueryがやってくれることを切に願います 重い ブラウザのメモリリークが凄いことになる free()的なものはないものか! FileReaderは重い XmlHttpRequest() 今回なによりも画像ファイルアップロード時の処理 が面倒くさかった!
19.
実演?
20.
ご性聴ありがとうございました。
Télécharger maintenant