続きを読む：
- ブラウザのサポート。
- フォームデータを介してダウンロードします。
- ファイルリーダー経由でダウンロードします。
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の機能を調べるためのガイドにすぎません。このコードは理想的なものではありません。 誰かが補完したり修正したりしてくれたら嬉しいです。