ファイルのドラッグ＆ドロップアップロードの実装方法

ファイルをドラッグして選択する

デフォルトのイベントをブロックする

私が最初に始めたとき、インターネットで例を見つけました。この例では、ドキュメント上でドラッグに関連するすべてのイベントのデフォルトの処理方法をブロックする必要があると述べています。

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

実際、私たちのファイルアップロードでは、ドラッグアンドドロップを受け入れる領域は一般に小さな領域しかないため、次のように簡略化しました

$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();})

そして、Enterイベント中に、ターゲットを与えますエリア受け入れエリアを強調表示するためのホバー スタイルを追加しました

デフォルトでは紫色です (そのため、このスタイルはドロップ イベントと残すイベントで削除する必要があります)

さまざまなソースからのファイルを処理します

入力ボックスとドラッグ領域を同時に表示する場合、私のHTML構造は次のとおりです:

             <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>

は#dropBoxのdropイベントとinputのchangeイベントです。 > 同時に Change 関数をバインドし、イベント オブジェクトを関数に渡します #dropBox 的drop事件和input的change事件同时绑定Change函数并将event对象传入函数中
这里，我在drop事件上加入了prevent修饰符来屏蔽默认事件，如果不屏蔽事件，接受区域#dropBox 是无法接收到文件，并且文件会触发浏览器的下载（如果不能直接预览的话）或者预览；

            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:隐去了js代码中的业务逻辑只讲述公共部分，

在接受用户选择的文件时，用e.target.files作为判断条件，来判断是否有input选择的文件，如果是则取 e.target.files[0] ,如果不是 则取 e.dataTransfer.files[0]ここでは、prevent 修飾子を drop イベントに追加しましたデフォルトのイベントをブロックするには、イベントがブロックされていない場合、受け入れ領域 #dropBox はファイルを受信できず、ファイルはブラウザのダウンロードをトリガーします (直接プレビューできない場合)。またはプレビュー;

🎜rrreee🎜ps: hidden js コードのビジネス ロジックは、ユーザーが選択したファイルを受け入れるときに、e.target.files を使用します。入力で選択されたファイルがあるかどうかを判定する判定条件 If はいの場合は e.target.files[0] を取得し、そうでない場合は e.dataTransfer.files[0]。 🎜これら 2 つのイベント オブジェクトのプロパティは、さまざまな状況に応じてブラウザによってイベント オブジェクトにハングされます。 🎜

以上がファイルのドラッグ＆ドロップアップロードの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。