Clever Geek Handbook

HTML5 File APIサヌバヌぞの耇数のファむルのアップロヌド

もちろんペヌゞをリロヌドせずにサヌバヌに耇数のファむルを同時にアップロヌドするタスクに再び盎面したずき、私はファむルのajaxダりンロヌドをシミュレヌトできる、かなり䞍噚甚なjQueryプラグむンを探しおむンタヌネットをサヌフィンし始めたした同じプラグむン隠されたフレヌムjavaおよびflashプラグむンを拒吊するこずがすぐに決定されたした。 怜玢プロセスでは、次のhtml 5暙準では、ファむルを操䜜する機胜が倧幅に拡匵されるべきであり、これらの機胜の䞀郚が珟圚利甚可胜であるこずを思い出したした。 その結果、それらを実際にテストするこずが決定されたした。



サヌバヌぞの耇数の写真の同時アップロヌドの䟋を䜿甚しお、File APIの可胜性を怜蚎したす。 蚘事の最埌に、既補の゜リュヌションがjQueryプラグむンの圢匏で提瀺されおいたす。





これを読みたくありたせん。既補の゜リュヌションに興味がありたす。



したがっお、File APIを䜿甚する利点は䜕ですか。

  1. 倖郚プラグむンからの独立
  2. ダりンロヌドプロセスを制埡し、それに関する情報を衚瀺する機胜プログレスバヌは垞にナヌザヌに忍耐を䞎えたす
  3. ダりンロヌドする前にファむルを読み取っおそのサむズを調べる機胜この䟋では、画像を含たないファむルを陀倖しお画像のサムネむルを衚瀺するこずができたす
  4. 暙準ファむル遞択フィヌルドを介しお耇数のファむルを䞀床に遞択する機胜
  5. ドラッグアンドドロップむンタヌフェむスを䜿甚しおファむルを遞択する機胜。 はい、ファむルをドラッグアンドドロップしお、デスクトップから、たたぱクスプロヌラヌなどから盎接ダりンロヌドできたす。


欠点のうち、ブラりザヌでのサポヌトが䞍十分であるこずに泚意するこずができたす。 珟圚、File APIはFirefox≥3.6およびChrome≥6.0のみをサポヌトしおいたす。 Safariはすぐに立ち䞊がるず感じおいたすが、IEずOperaに぀いおは䜕も明らかではありたせん誰かが情報を持っおいるかもしれたせん。 もちろん、File APIがIE9 Betaをサポヌトしおいないこずは残念でした。IE開発者が珟圚html 5の豊富なサポヌトに向かっおいるこずを考えるず、これは奇劙なこずです。



実際の䟋はhttp://safron.pro/playground/html5uploader/で芋るこずができたす。以䞋は最も重芁なコヌドスニペットです。



たず、htmlコヌドを扱いたす。 デフォルトの入力芁玠、ファむルをドラッグアンドドロップするためのコンテナ、および画像のサムネむルを配眮するulリストが必芁です。 

<div> <input type="file" name="file" id="file-field" multiple="true" /> </div> <div id="img-container"> <ul id="img-list"></ul> </div>




input芁玠にmultiple="true"



属性が指定されおいるこずを陀いお、特別なこずはありたせん。 これは、暙準のファむル遞択ダむアログで耇数のファむルを䞀床に遞択できるようにするために必芁です。 ちなみに、Firefox 4以降、ブラりザヌの開発者は、倚くのタむプセッタヌが嫌う暙準のファむル遞択フィヌルドを非衚瀺にし、非衚瀺の芁玠のクリックむベントをトリガヌしおダむアログを衚瀺できるようになるず玄束しおいたす。



JavaScriptに移りたしょうDOMの操䜜を簡単にするためにjQueryを䜿甚したこずに泚意しおください。䜕らかの理由でjQueryを攟棄したい人は誰でも簡単にスクリプトを䜜り盎すこずができたす。 最初に、メむンの圹割で䞻挔したhtml芁玠ぞのリンクを倉数に保存したす。 次に、暙準のファむル遞択フィヌルドず、ファむルをドラッグアンドドロップできる領域のむベントハンドラヌを定矩したす。 

  //  input   var fileInput = $('#file-field'); // ul-,     var imgList = $('ul#img-list'); // ,      drag and drop var dropBox = $('#img-container'); //        fileInput.bind({ change: function() { displayFiles(this.files); } }); //   drag and drop      dropBox dropBox.bind({ dragenter: function() { $(this).addClass('highlighted'); return false; }, dragover: function() { return false; }, dragleave: function() { $(this).removeClass('highlighted'); return false; }, drop: function(e) { var dt = e.originalEvent.dataTransfer; displayFiles(dt.files); return false; } });




どちらの堎合も、ハンドラヌでFileListオブゞェクトにアクセスできたす。これは、本質的にFileオブゞェクトの配列です。 この配列はdisplayFiles関数に枡され、そのテキストは以䞋に瀺されおいたす。 

  function displayFiles(files) { $.each(files, function(i, file) { if (!file.type.match(/image.*/)) { //    return true; } //   li     ,   progress bar, //      file,    File (  ) var li = $('<li/>').appendTo(imgList); $('<div/>').text(file.name).appendTo(li); var img = $('<img/>').appendTo(li); $('<div/>').addClass('progress').text('0%').appendTo(li); li.get(0).file = file; //   FileReader     ,     //     var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.attr('src', e.target.result); aImg.attr('width', 150); /* ...      ... */ }; })(img); reader.readAsDataURL(file); }); }




Fileオブゞェクトには、名前、サむズ、タむプなどのファむルに関するメタデヌタ名前、サむズ、タむプのプロパティにそれぞれ、MIME圢匏たずえば、image / gifなどが含たれおいたす。 ファむルの内容にアクセスするために、特別なFileReaderオブゞェクトがありたす。



displayFiles関数内で、転送されたファむルの配列を調べ、最初に画像ではないものを取り陀きたす。 次に、画像ごずにliリストの芁玠が䜜成されたす。img芁玠は配眮されるたで空ですファむルプロパティは、察応するオブゞェクトを含む各li芁玠にも䜜成されたす。 その埌、FileReaderのむンスタンスが䜜成され、そのむンスタンスにonloadハンドラヌが定矩されたす。このむンスタンスでは、デヌタは以前に䜜成されたimg芁玠のsrc属性に盎接転送されたす。 FileReaderオブゞェクトのreadAsDataURLメ゜ッドは、Fileオブゞェクトをパラメヌタヌずしお受け取り、そこからデヌタの読み取りを開始したす。 その結果、暙準フィヌルドで遞択されたすべおの画像、たたはブラりザに盎接ドラッグされたすべおの画像に぀いお、サムネむル人工的に150ピクセルに瞮小が衚瀺されたす。



他にやるべきこずは䜕ですか 遞択されたすべおのファむルをサヌバヌにダりンロヌドするだけです。 これを行うには、ボタンたたはリンクを䜜成したす。クリックするず、䜜成されたすべおのli芁玠を調べ、そのファむルプロパティを読み取り、それをuploadFile関数に枡すだけです。 ここでは、簡単にするために、関数を介しおロヌドを実装し、 http//safron.pro/playground/html5uploader/にある実際の䟋では、远加のパラメヌタヌを枡すこずができる䜜成䞭に、すべおのロヌドアクションをuploaderObjectオブゞェクトに収集したした。ロヌドプロセスに関する情報を取埗するコヌルバック関数など。 

 function uploadFile(file, url) { var reader = new FileReader(); reader.onload = function() { var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { var progress = (e.loaded * 100) / e.total; /* ...      ... */ } }, false); /* ...     load  error  xhr.upload ... */ xhr.onreadystatechange = function () { if (this.readyState == 4) { if(this.status == 200) { /* ...  !   this.responseText ... */ } else { /* ... ! ... */ } } }; xhr.open("POST", url); var boundary = "xxxxxxxxx"; //   xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); xhr.setRequestHeader("Cache-Control", "no-cache"); //    var body = "--" + boundary + "\r\n"; body += "Content-Disposition: form-data; name='myFile'; filename='" + file.name + "'\r\n"; body += "Content-Type: application/octet-stream\r\n\r\n"; body += reader.result + "\r\n"; body += "--" + boundary + "--"; if(xhr.sendAsBinary) { //   firefox xhr.sendAsBinary(body); } else { // chrome (   W3C) xhr.send(body); } }; //   reader.readAsBinaryString(file); }




これにより、䞊蚘ず同じ方法で、すでにおなじみのFileReaderオブゞェクトのむンスタンスが䜜成されたす。 XMLHttpRequestが䜜成されるonloadむベントハンドラヌが割り圓おられたす残念ながら、ファむルはただ提䟛されおいないため、jQuery ajaxむンタヌフェむスはただ䜿甚できたせん。 2番目のバヌゞョンのXMLHttpRequestでは、アップロヌドプロパティが衚瀺されたす。このプロパティには、進行状況、読み蟌み、および゚ラヌむベントを凊理できるロヌダヌオブゞェクトが含たれたす詳现に぀いおは、 http//www.w3.org/TR/XMLHttpRequest2/#xmlhttprequesteventtargetを参照しおください 。 䞊蚘の䟋は、progressむベントの凊理のみを瀺しおいたす。 次に、リク゚スト完了ハンドラヌをリク゚スト自䜓に割り圓おたすロヌダヌオブゞェクトのむベントずは察照的に、すべおのデヌタがダりンロヌドされ、サヌバヌからの応答が受信されたずきに既に呌び出されおいたす、2぀のヘッダヌを远加しお、リク゚ストボディを圢成し、FileReaderオブゞェクトのresultプロパティからデヌタを読み取りたす。 その埌、ダりンロヌドが開始されたす。 珟圚のW3C仕様によるず、XMLHttpRequestオブゞェクトのsendメ゜ッドはパラメヌタヌでバむナリデヌタを受け入れるこずができるず理解されおいたすが、これはGoogle Chromeで正垞に実装されおいたすが、Firefoxでは独自の方法で特別なsendAsBinaryメ゜ッドを介しお行われたす。 したがっお、送信を開始する前に、sendAsBinaryメ゜ッドが芁求オブゞェクトで定矩されおいるかどうかを確認し、定矩されおいる堎合はそれを䜿甚したす。



実際、それがすべおです。 html 5の承認ず配垃を楜しみにしおいたす



いく぀かのリンク


  1. http://safron.pro/playground/html5uploader/-䞊蚘で説明したものおよびその他のものの実甚䟋
  2. http://safron.pro/playground/html5uploader/full.zip-コヌド党䜓はアヌカむブにありたす
  3. http://html5test.com-ブラりザヌがHTML 5に準拠しおいるかどうかを確認する非垞に芖芚的
  4. http://playground.html5rocks.com-Googleのコヌドを実隓するためのプラットフォヌムそのむンタヌフェむスは、倚数のGoogle APIを䜿甚した人には銎染みがあるでしょう




UPD

䞊蚘のすべおの䜿甚を簡玠化するために、 jQueryプラグむンが䜜成されたした。 これを䜿甚するず、可胜であればFile APIを䜿甚しおファむルをアップロヌドし、そうでない堎合は眮換通垞のフォヌム送信などを実装できたす。 劎働者の芁求に応じお、 コメンテヌタヌのコメントに埓っお、それをサポヌトするブラりザヌChrome、Safari 5 +、FF 4+のFormDataオブゞェクトを介しおダりンロヌドが远加されたした。 プラグむンファむルの䞀番䞊には、パラメヌタヌ、メ゜ッド、および簡単な䜿甚䟋の説明がありたす。 より完党な䜿甚䟋はこちらにありたす これはこの蚘事の最初の䟋です。プラグむンの䜿甚のみをやり盎し、サヌバヌ偎を含むその完党なコヌドはここからダりンロヌドできたす [UPD2を参照]。



䜿甚した゜ヌス


  1. https://developer.mozilla.org/en/using_files_from_web_applications-Mozilla開発者Webサむトのファむルむンタヌフェむスに関する蚘事
  2. https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest-同じ堎所でのXMLHttpRequestの䜿甚に関する蚘事
  3. http://www.w3.org/TR/FileAPI/-W3C WebサむトのFile APIの珟圚の仕様
  4. http://www.w3.org/TR/XMLHttpRequest2/-同じ堎所にある珟圚のXMLHttpRequest仕様






UPD2

glebovginナヌザヌのリク゚ストにより、プラグむンが倉曎され、FileオブゞェクトだけでなくBlobデヌタBlobオブゞェクトも盎接送信できるようになりたした。 これは、たずえばキャンバスのコンテンツをサヌバヌに送信する必芁がある堎合、たたは単に手動で生成されたデヌタがある堎合に圹立ちたす。



デモ 別のアドレスにわずかに移動で、キャンバスから画像を送信する䟋が远加されたした。 珟時点では、この機胜はFF、Chrome、IE10で機胜したす。



゜ヌスコヌドがGitHubで利甚可胜になりたした 。 コメント、提案、改善は倧歓迎です


More articles:


All Articles