html 5+jsドラッグアップロードの件

最近、ドラッグアップロードのプロジェクトをやっていて、簡単だと思っていたが、やってみると中に関連するものがたくさんあることに気づいた.ここではその中の面白いところを気ままに話しましょう.
ドラッグイベント
-オリジナルドラッグイベント
DragEventのアップロードはhtml 5の東で、対応するいくつかの事件はあります

drag

dragend

dragenter

dragexit

dragleave

dragover

dragstart

drop

その中でよく使われるのは4つあります:dragenter、dragover、drop、dragendそれぞれ対応するイベントは:ドラッグ、ドラッグ、ドラッグ、マウスの解放、ドラッグ
コードに変更すると、次のようになります.

document.addEventListener("dragenter", function( event ) {
    ...
}, false);
document.addEventListener("dragover", function( event ) {
    ...
}, false);
document.addEventListener("drop", function( event ) {
    event.preventDefault();//         
    ...
    return false;//         
}, false);
document.addEventListener("dragend", function( event ) {
    ...
}, false);

一般的には、「drop」にアップロードするときに行います.つまり、documentでマウスを離すと、eventからdataTransferを受け取ることができます.filesというオブジェクトは、ユーザーがドラッグしたデータを取得します.
-jqueryパッケージのドラッグイベント
jqueryの中のドラッグは原生と少し違い、小さな穴が付いています.

$("body").on({
    drop:function(e){  //   
        e.preventDefault();
        //jquery file  e.originalEvent   
        var files = e.originalEvent.dataTransfer.files;
        ...
    }
})

デザイン時にカプセル化されていないため、jqueryでバインドされたdropのファイルはeventの元のeventオブジェクトであるoriginalEventに行かなければ入手できないようです.どんな牛が追い詰める道具も原生apiに基づいているので、ここではやはり感嘆して、基礎知識をマスターしなければなりません.
-互換性
html 5のapiである以上、ブラウザにも一定の要求があります.ブラウザの最低互換性について、mdnに与えられたデータは以下の通りです.
chrome
firefox(Gecko)
ie
opera
safari(webkit)
4
3.5(1.9.1)
10
12
3.1
ファイルを巡回する
-FilleListファイル
実際、前述したように、アップロードされたファイルはe.dataTransferに保存されています.filesにあります.そのタイプを見るとFileListタイプであることがわかります.

Object.prototype.toString.call(e.dataTransfer.files);
//"[object FileList]"

このタイプは、によってアップロードされたデータを専用に格納する.
FileListにはlengthプロパティとitem()メソッドがあります.構造は次のようになります.

dataTransfer.files:{
    0: File,
    length: 1
}

一見普通の相手に見えますが、普通の相手とは少し違います.データにアクセスするにはdataTransferを使用します.files[0]またはdataTransfer.files.item(0).for inを使って遍歴すると、異なるブラウザで意図的に問題が思いつかないことがあります.
-FileListファイルを巡回する
その前に、私はずっとdataTransferと思っていました.filesは普通のオブジェクトです.だからずっとfor inを使って処理しています.しかし、異なるブラウザでは異なる問題があります.

chromeでhasOwnPropertyという方法を使用すると、それらのFileファイルをよく認識することができ、問題はありません.△ここではchromeのv 8コアが強いと感慨せざるを得ない.みんながchromeを使えばどれだけ節約できるか分からない.

ie/edgeブラウザではhasOwnPropertyは[0]を[1]、これらは自分の属性と判断しない.

犬検索ブラウザではhasOwnPropertyがlengthを自分の属性とします.

正しい遍歴は次のとおりです.

var file;
var files = e.dataTransfer.files;
for(var i = 0; i < files.length; i++){
    file = files [i];
    //  
    file = files.item(i);
    alert(file.name);
}

フォルダのアップロードはサポートされていません
プロジェクトはファイルアップロードのみをサポートし、フォルダアップロードはサポートされていないため、ドラッグしたファイルがフォルダであるかどうかを認識する必要があります.
-ファイルのプロパティ?
e.dataTransferからドラッグしたファイルがフォルダかどうかをよく区別できません.いくつかの理由があります.

フォルダの一部はe.dataTransfer.filesにはsize

が表示されます

フォルダのFile内typeは「」ですが、拡張名を付けないファイルFile内typeも「

」です.

e.dataTransferでフォルダかどうかを判別する関数

が見つかりませんでした
そのため、直接的な判断方法はありません.
-FileReader
FileReaderはhtml 5のapiであり、Fileファイルを読み込むために使用されます.3つの読み取り方法があります.
readAsBinaryString
readAsDataURL
readAsText
バイナリリード
ベース64の読み込み
テキストで読み込む
使用方法は以下の通りです.

var fr = new FileReader();
fr.readAsBinaryString(file);
//fr.readAsDataURL(file);
//fr.readAsText(file);
fr.onload=function(e){
   var data = this.result;
}
fr.onerror=function(e){
    //...
}

この3つの方法はいずれも異なる形式でファイルの内容を読み取ることができますが、フォルダを読み取るとerrorがトリガーされます.そのため、この特徴でアップロードしたファイルがフォルダかどうかを判断することができます.

myFileReader(file,function(result,file){
    if(result){
        //  
    }else{
        //   
    }
});

function myFileReader(file, callback){
    if(!window.FileReader){
        callback(true,file);
        return false;
    }
    var fr = new FileReader();
    fr.readAsDataURL(file);
    fr.onload=function(e){
        callback(true,file);
    }
    fr.onerror=function(e){

        callback(false,file);  
    }
    return true;
};

また、ファイルが大きいほど読み取り速度が遅くなります.一般的に、ドラッグしてフォルダをドラッグすると、そのFileのsizeプロパティのサイズは5 Mを超えません.そのため,まずこの属性で非フォルダを消去し,前処理の速度を増加させることができる.