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

10777 ワード
ドラッグイベント
——原生ドラッグ事件
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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

    • 一般的には、「drop」にアップロードするときに行います.つまり、documentでマウスを離すと、eventからdataTransferを受け取ることができます.filesというオブジェクトは、ユーザーがドラッグしたデータを取得します.
    ——jqueryパッケージのドラッグイベント
    jQueryの中のドラッグは原生のものと少し違い、小さな穴が付いています.
    $("body").on({
    drop:function(e){  //   
        e.preventDefault();
        //jquery file  e.originalEvent   
        var files = e.originalEvent.dataTransfer.files;
        ...
    }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

    • デザイン時にカプセル化されていないため、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
    ファイルを巡回する
    ——FileListファイル
    実際、前述したように、アップロードされたファイルはe.dataTransferに保存されています.filesにあります.そのタイプを見るとFileListタイプであることがわかります.
    Object.prototype.toString.call(e.dataTransfer.files);
//"[object FileList]"
  • 1
  • 2
  • 1
  • 2

    • このタイプは、によってアップロードされたデータを専用に格納する.
    FileListにはlengthプロパティとitem()メソッドがあります.構造は次のようになります.
    dataTransfer.files:{
    0: File,
    length: 1
}
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

    • 一見普通の相手に見えますが、普通の相手とは少し違います.データにアクセスするには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);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

    • フォルダのアップロードはサポートされていません
    プロジェクトはファイルアップロードのみをサポートし、フォルダアップロードはサポートされていないため、ドラッグしたファイルがフォルダであるかどうかを認識する必要があります.
    -ファイルのプロパティ?
    e.dataTransferからドラッグしたファイルがフォルダかどうかをよく区別できません.いくつかの理由があります.
  • フォルダの一部はe.dataTransfer.filesにはsize
    • が表示されます
  • フォルダのFile内typeは「」ですが、拡張名を付けないファイルFile内typeも「
    • 」です.
  • e.dataTransferでフォルダかどうかを判別する関数
    • が見つかりませんでした
    そのため、直接的な判断方法はありません.
     —FlieReader
    FileReaderはhtml 5のapiであり、Fileファイルを読み込むために使用されます.3つの読み取り方法があります.
    readAsBinaryString
    readAsDataURL
    readAsText
    バイナリリード
    ベース64の読み込み
    テキストで読み込む
    使用方法は以下の通りです.
    var fr = new FileReader();
fr.readAsBinaryString(file);
//fr.readAsDataURL(file);
//fr.readAsText(file);
fr.οnlοad=function(e){
   var data = this.result;
}
fr.οnerrοr=function(e){
    //...
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

    • この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.οnlοad=function(e){
        callback(true,file);
    }
    fr.οnerrοr=function(e){

        callback(false,file);  
    }
    return true;
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

    • また、ファイルが大きいほど読み取り速度が遅くなります.一般的に、ドラッグしてフォルダをドラッグすると、そのFileのsizeプロパティのサイズは5 Mを超えません.そのため,まずこの属性で非フォルダを消去し,前処理の速度を増加させることができる.上記のドキュメントは、Lienviws(http://blog.csdn.net/liyijun4114/article/details/52313798)
    JSオリジナルドラッグ機能draggable属性(H 5)
    h 5貼り付け板互換iosへのワンタッチコピーを実現