파일 드래그 앤 드롭 업로드 구현 방법-JS 튜토리얼-php.cn

파일 드래그 앤 드롭 업로드 구현 방법

一个新手

풀어 주다： 2017-10-19 09:13:48

원래의

3374명이 탐색했습니다.

파일을 드래그하여 선택

기본 이벤트 차단

처음 시작했을 때 인터넷에서 예제를 찾았습니다. 이 예제에서는 드래그와 관련된 모든 이벤트의 기본 처리 방법을 문서에서 차단해야 한다고 언급했습니다.

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

로그인 후 복사

그리고 엔터 이벤트 중에는 대상을 영역 허용 영역을 강조하기 위해 호버 스타일을 추가했습니다
파일 드래그 앤 드롭 업로드 구현 방법
기본적으로 보라색입니다. (그래서 이 스타일은 드롭 및 떠나기 이벤트에서 제거되어야 합니다)

다른 소스의 파일을 처리합니다

처리해야 하기 때문에 입력 상자와 드래그 영역을 동시에 사용하면 내 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의 드롭 이벤트이고 input</code의 변경 이벤트입니다. > 동시에 <code>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]여기에서는 drop 이벤트에 prevent 수식자를 추가했습니다. 기본 이벤트를 차단하려면 이벤트가 차단되지 않으면 #dropBox 허용 영역에서 파일을 수신할 수 없으며 파일이 브라우저의 다운로드를 트리거합니다(직접 미리 볼 수 없는 경우). 또는 미리보기;

🎜🎜rrreee🎜ps: 숨겨진 js 코드의 비즈니스 로직은 사용자가 선택한 파일을 수락할 때 e.target.files를 사용합니다. 입력으로 선택된 파일이 있는지 판단하는 판단 조건. 있으면 e.target.files[0], 없으면

e.dataTransfer.files[0]. 🎜이 두 이벤트 객체의 속성은 다양한 상황에 따라 브라우저에 의해 이벤트 객체에 달라집니다. 🎜

위 내용은 파일 드래그 앤 드롭 업로드 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!