HTML5ファイルアップロード機能

いくつかの経験の後、HTML5機能、つまりFile APIを使用したファイルのダウンロードに関する小さな虎の巻記事を書くことにしました。

続きを読む：

1. ブラウザのサポート。
2. フォームデータを介してダウンロードします。
3. ファイルリーダー経由でダウンロードします。

1.ブラウザのサポート

もちろん、すべてのブラウザーが現在この機能を完全にサポートしているわけではありません。 IEはバージョン10のFile APIのみをサポートするため、IEについては忘れてしまいます。 残りの、より高度なブラウザ、およびこれらは単なるChrome、Firefox、Opera、Safariであり、すべてがそれほどスムーズでもありません。 もちろん、彼らは「前向き」になろうとしますが、今のところ誰もが成功するわけではありません。

HTML 5では、ファイルを非同期に読み取り、サーバーに送信する2つの方法があります。ファイルリーダーとフォームデータオブジェクトを使用する方法です。 原則として、ファイルをアップロードするためのものであり、サーバーにファイルを送信する方法は関係ありません。 正確には、XMLHttpRequestオブジェクトはファイルの送信を担当し、ファイルリーダーとフォームデータはファイルの読み取りとそのXHRの「フィード」のみを許可します。 これらのオブジェクトは、さまざまなタスク用に設計されています。 ファイルリーダーは、ブラウザ側でファイルを操作するように設計されています。 つまり、ファイルがサーバーにアップロードされる前であっても、重量、種類、作成日などのパラメーターを見つけることができます。たとえば、画像はサーバーにダウンロードせずにすぐにユーザーに表示できます。 フォームデータは、フォームを作成し、サーバーにアップロードする前にフォームデータを管理するように設計されています。 そして、私たちが知っているように、入力タイプ=“ file”もフォームに存在し、それを通して、今までファイルを送信していました。 したがって、フォームを作成し、ファイルを添付して、XHR経由でサーバーに送信できます。

歌詞からアクションまで。 両方のブート例を検討してください。 ただし、最初に、ブラウザがFile APIを介してロードできるかどうかを判断することをお勧めします。 これを行うには、ファイルリーダーまたはフォームデータオブジェクトの存在を確認するだけです。 しかし！ Safariはまだファイルリーダーをサポートしていないため、このオブジェクトを操作することはできません。 Yablofagiはinしており、すべてのユーザーを平等に愛しています。 したがって、現時点では、フォームデータの存在が最も正しいチェックと見なされます。

if (window.FormData === undefined) { //   ,    :-)    . } 

2.フォームデータを介したダウンロード

最初に、すべてのイベントについて説明します。ファイルのドラッグ、ダウンロード用のブロックへの「スロー」などです。

 $("#drop-block").bind( // #drop-block        'dragenter', function(e) { //        . }) .bind( 'dragover', function(e) { //        . }).bind( 'dragleave', function(e) { //         . }).bind( 'drop', function(e) { //   «»   . if (e.originalEvent.dataTransfer.files.length) { //    -   . e.preventDefault(); e.stopPropagation(); // e.originalEvent.dataTransfer.files —     . // e.originalEvent.dataTransfer.files[i].size —     . // e.originalEvent.dataTransfer.files[i].name —   . //    :-) upload(e.originalEvent.dataTransfer.files); //   . } }); 

さて、ファイルを直接読んでダウンロードしましょう：

 function upload(files) { //       . //    ,   Safari   //  . $.get('/blank.html'); var http = new XMLHttpRequest(); //   XHR,       . //   if (http.upload && http.upload.addEventListener) { http.upload.addEventListener( //      . 'progress', function(e) { if (e.lengthComputable) { // e.loaded —   . // e.total —     . //    —   - :-) } }, false ); http.onreadystatechange = function () { //     if (this.readyState == 4) { //   4 ,    4        if(this.status == 200) { //     //    . // ,  // var result = $.parseJSON(this.response); //       . } else { //       . } } }; http.upload.addEventListener( 'load', function(e) { //         . //       . //  . }); http.upload.addEventListener( 'error', function(e) { // ,   ! }); } var form = new FormData(); //   . form.append('path', '/'); //   . for (var i = 0; i < files.length; i++) { form.append('file[]', files[i]); //      . } http.open('POST', '/upload.php'); //    . http.send(form); //   ,    .  XHR. } 

3.ファイルリーダーからダウンロードする

ファイルリーダー自体は、ブラウザ側でファイルを操作するように設計されています。 このオブジェクトを使用してファイルをアップロードしてみましょう。 Safariにはファイルリーダーオブジェクトがないことを思い出してください！

 if (window.FileReader === undefined) { //      //   — ! } //        . //        ,  . //  ... var dropbox = $('#file-drag'); dropbox[0].ondragover = function() { return false; }; dropbox[0].ondragleave = function() { return false; }; dropbox[0].ondrop = function(e) { var files = e.dataTransfer.files; uploadFile(files[i]); e.preventDefault(); e.stopPropagation(); return false; }; //     . // -,    0   . // -,       . //     function uploadFile(file) { var reader = new FileReader(); reader.onload = function() { var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress-bar", function(e) { if (e.lengthComputable) { // -,  ;-) } }, false); //    load  error xhr.onreadystatechange = function () { if (this.readyState == 4) { if(this.status == 200) { } else { //  :-( } } }; xhr.open("POST", "upload.php"); //       ,     . 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='superfile'; filename='" + unescape( encodeURIComponent(file.name)) + "'\r\n"; // unescape        . body += "Content-Type: application/octet-stream\r\n\r\n"; body += reader.result + "\r\n"; body += "--" + boundary + "--"; //     Chrome,       . if (!XMLHttpRequest.prototype.sendAsBinary) { XMLHttpRequest.prototype.sendAsBinary = function(datastr) { function byteValue(x) { return x.charCodeAt(0) & 0xff; } var ords = Array.prototype.map.call(datastr, byteValue); var ui8a = new Uint8Array(ords); this.send(ui8a.buffer); } } //  . if(xhr.sendAsBinary) { //   Firefox xhr.sendAsBinary(body); } else { //   (    W3C) xhr.send(body); } }; //   reader.readAsBinaryString(file); }; 

この記事は使用方法を説明するものではなく、HTML 5の機能を調べるためのガイドにすぎません。このコードは理想的なものではありません。 誰かが補完したり修正したりしてくれたら嬉しいです。