Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Drag anddropfilereader

2.016 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

Drag anddropfilereader

  1. 1. Drag & Drop ときどき File API<br />nakajijapan<br />
  2. 2. 背景的なもの<br />html5といろいろなAPIの出現に伴い、いろいろな表現ができるようになってきた。<br /> こんな僕でも実装できた!<br />写真をドラッグアンドドロップして画像投稿できたらいいなぁという純粋な願望<br />イメージは30Days的な表現をしたかった。<br />
  3. 3. 調査<br />Drag & Drop<br />DataTransfer<br />FileApi<br />FileReader<br />// XmlHttpRequest<br />※ブラウザはFirefoxのみ<br />
  4. 4. Drag & Drop<br />
  5. 5. Drag & Drop<br />dragenter<br /> ドラッグ中のマウスカーソルが、要素と重なったときに瞬間に呼び出されるイベント<br />dragover<br />ドラッグ中のマウスカーソルが要素内から出た時に呼び出されるイベント<br />drop<br />ドラッグ時に呼び出されるイベント<br />
  6. 6. あああ<br /><javascript><br />function init() {<br />dandd= new Nakaji();<br /> <br />addEvent(window, "dragenter", dandd.dragEnter, false);<br />vardropBox = {};<br />dropBox= document.getElementById("dropbox");<br /> <br />addEvent(dropBox, "dragover", dandd.dragOver, false);<br />addEvent(dropBox, "drop", dandd.drop, true);<br />}<br /> <br />// ロード時に処理を追加<br />window.addEventListener("load", init, false);<br /> <br /> <br />
  7. 7. あああ<br /><javascript><br />Nakaji.prototype= {<br /> <br /> //-------------------------<br /> // ドラッグ中のマウスカーソルが、<br /> // 要素と重なったときに瞬間に呼び出されるイベント<br /> //-------------------------<br />dragEnter : function(event) <br /> {<br /> $("#dropbox").css('background', 'red');<br /> },<br />
  8. 8. <html><br /><div id= "dropbox"> Drop Here!!</div><br />
  9. 9. File API<br />
  10. 10. File API<br />FileReader<br />今のところFirefoxのみ<br />次のバージョンのChromeで利用可能!?<br />http://gihyo.jp/dev/column/01/browser/chrome5<br />ファイルをたくさんアップロードする処理をしようとすると重くなる?<br />
  11. 11. drop : function(event) {<br /> // ドラッグされたデータを取得<br />var files = event.dataTransfer.files;<br /> <br />・<br />・<br />・<br />var file = files[i];<br />var reader = new FileReader();<br /> reader.name = file.name,<br />reader.index = i,<br />reader.file = file;<br /> // メソッドの登録<br />reader.addEventListener("loadend", Nakaji.prototype.buildImageListItem, false);<br /> // ファイルをdataURL形式で読み取る<br />reader.readAsDataURL(file); <br /> <br />あああ<br />
  12. 12. buildImageListItem : function(event) {<br />varimgTag = $(document.createElement("img"));<br />vardivTag = $(document.createElement("div"));<br />varname = event.target.name;<br />vardata = event.target.result;<br />varfile = event.target.file;<br /> <br />imgTag.attr({<br /> width: 200,<br /> height: 200,<br />src: data<br /> });<br /> <br /> // 先頭に追加<br /> $("#bag").prepend(divTag.append(imgTag.fadeIn(2000)));<br />あああ<br />
  13. 13. 以上!<br />
  14. 14. XmlHttpRequest()<br />
  15. 15. XmlHttpRequest()<br />画像ファイルをアップロード<br />DataTransferオブジェクトを利用<br />処理中は進捗状況を表示させる<br />XmlHttpRequest.onprogress()<br />
  16. 16. あああ<br /><javascript><br /> // マルチパート形式で画像を保存する<br />multipartFormData+= '--' + boundary + 'rn';<br />multipartFormData += 'Content-Disposition: form-data; <br /> filename="' + file.name + '"rn'<br /> +'Content-Type: ' + contentType + 'rn'<br /> +'Content-Transfer-Encoding: binary' + 'rn' + 'rn'<br /> +file.getAsBinary()<br /> +'rn--' + boundary + '--';<br /> <br />
  17. 17. あああ<br /><javascript><br />//アップロード先<br />xhr.open("POST", "./upload.php");<br />// ヘッダの設定<br />xhr.setRequestHeader( "Content-type","multipart/form-data; boundary=" + boundary );<br />xhr.setRequestHeader( "Content-Length", multipartFormData.length );<br />// バイナリデータを送信<br />xhr.sendAsBinary(multipartFormData);<br />
  18. 18. まとめ<br />ほとんどクロスブラウザできてない<br />Firefoxでしか動かない。<br />jqueryがやってくれることを切に願います<br />重い<br />ブラウザのメモリリークが凄いことになる<br />free()的なものはないものか!<br />   FileReaderは重い<br />XmlHttpRequest()<br />今回なによりも画像ファイルアップロード時の処理<br />が面倒くさかった!<br />
  19. 19. 実演?<br />
  20. 20. ご性聴ありがとうございました。<br />

×