So implementieren Sie den Datei-Drag-and-Drop-Upload

Dateien ziehen und auswählen

Standardereignisse blockieren

Als ich zum ersten Mal anfing, wurde in diesem Beispiel erwähnt, dass Drag-bezogene Ereignisse im Dokument blockiert werden müssen Bei der standardmäßigen Verarbeitungsmethode für alle Ereignisse lautet der Code wie folgt:

$(document).on({ 
        dragleave:function(e){    //拖离 
            e.preventDefault(); 
        }, 
        drop:function(e){  //拖后放 
            e.preventDefault(); 
        }, 
        dragenter:function(e){    //拖进 
            e.preventDefault(); 
        }, 
        dragover:function(e){    //拖来拖去 
            e.preventDefault(); 
        } 
    });

Tatsächlich ist in unserem Datei-Upload der Bereich, der Drag & Drop akzeptiert, im Allgemeinen nur ein kleiner Bereich, daher habe ich ihn wie folgt vereinfacht

$drop.on("dragenter", function (e) {
    e.preventDefault();
    console.log("enter");
    $drop.addClass("hover");});$drop.on("dragleave drop", function (e) {
    e.preventDefault();
    console.log("leave");
    $drop.removeClass("hover");});$drop.on("dragover", function (e) {
    e.preventDefault();})

Und während des Eingabeereignisses wird dem Zielbereich ein Hover-Stil hinzugefügt, um den Akzeptanzbereich hervorzuheben

Standardmäßig hierin In diesem Fall ist es lila (Daher sollte dieser Stil in den Drop- und Leave-Ereignissen entfernt werden)

Dateien aus verschiedenen Quellen verarbeiten

Weil Ich muss das Eingabefeld und den Drag-Bereich gleichzeitig bearbeiten. Meine HTML-Struktur ist wie folgt:

             <p class="row" id="dropBox" @drop.prevent="Change($event)">
                <p class="import-data">
                    <button                         
                    :class="{&#39;disabled&#39; : resultMsg.length > 0}"                        class="btn btn-info">
                        <i class="fa fa-cloud-upload text"></i>
                        选择文件                    
                     </button>
                    <span :class="{&#39;error-tips&#39;:isError}">{{msg}}</span>
                    <input                        
                    type="file"                         
                    v-show="resultMsg.length == 0" 
                        @change="Change($event)"                         
                        name="importExcel"                         
                        class="importExcel"                         
                        value="" />
                </p>
                <br>
                <p class="loading" :style="&#39;width:&#39;+loading+&#39;%&#39;"></p>
            </p>

ist das Drop-Ereignis von #dropBox und dem Ereignis von input ändern Binden Sie gleichzeitig die Funktion Change und übergeben Sie das Ereignisobjekt an die Funktion
. Hier habe ich den Modifikator drop zum Ereignis prevent hinzugefügt, um das Standardereignis If zu blockieren Das Ereignis ist nicht blockiert, der Akzeptanzbereich #dropBox ist Die Datei kann nicht empfangen werden und die Datei löst den Browser-Download aus (wenn sie nicht direkt in der Vorschau angezeigt werden kann) oder die Vorschau

            Change:function(ev){
                var e = window.event || ev; 
                var file = e.target.files ? e.target.files[0] : e.dataTransfer.files[0];
                if(!file){
                    vm.msg = "点击选择，或者拖拽填写好数据的excel文件致此";
                    vm.isError = true;
                    return false
                }               
            },

ps: Verstecken Sie den js-Code. Die Geschäftslogik spricht nur über den öffentlichen Teil. Wenn

die vom Benutzer ausgewählte Datei akzeptiert, verwenden Sie e.target.files als Beurteilungsbedingung, um festzustellen, ob dies der Fall ist Wenn ja, nehmen Sie e.target.files[0], wenn nicht, nehmen Sie e.dataTransfer.files[0].
Die Eigenschaften dieser beiden Ereignisobjekte werden vom Browser je nach Situation an das Ereignisobjekt gehängt.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Datei-Drag-and-Drop-Upload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!