Enviar pesquisa
Carregar
Drag anddropfilereader
•
Transferir como PPTX, PDF
•
0 gostou
•
941 visualizações
Daichi Nakajima
Seguir
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 20
Baixar agora
Recomendados
第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 ログ解析方法
博文 斉藤
Recomendados
第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
Mais conteúdo relacionado
Mais procurados
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
Mais procurados
(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
ハッシュと配列
ハッシュと配列
Destaque
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
Destaque
(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ị
Semelhante a 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
Semelhante a 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機械学習
Último
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Último
(12)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
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.
ご性聴ありがとうございました。
Baixar agora