drag2upload

拖曳電腦中的某張圖片到指定的DOM上，即可上傳圖片到網站上某個指定目錄

前置安裝

jQuery

安裝

1.用npm指令安裝

npm install drag2upload

2.用html語法引入

<script src="drag2upload/drag2upload.jquery.js"></script>

Vue

require('drag2upload/drag2upload.jquery.js');

使用方法

基本用法

$('.drag-upload-area').drag2upload();

必傳參數

name

// 檔名
$('.drag-upload-area').drag2upload({
    name: 'avatar'
});

uploadFileUrl

// 指出能夠處理上傳圖片的程式路徑
$('.drag-upload-area').drag2upload({
    uploadFileUrl: '/upload/file/handler'
});

其他參數

csrf

// CSRF token
$('.drag-upload-area').drag2upload({
    csrf: $('meta[name="csrf-token"]').attr('content')
});

refreshCsrfUrl

// 當CSRF token逾期時，可以更新的程式路徑
$('.drag-upload-area').drag2upload({
    refreshCsrfUrl: '/csrf/token/refresh'
});

Callbacks

onDragOver

$('.drag-upload-area').drag2upload({
    onDragOver: function() {
        // Doing something when dragging a picture over the area.
    }
});

onDragOut

$('.drag-upload-area').drag2upload({
    onDragOut: function() {
        // Doing something when dragging a picture out the area.
    }
});

onDrop

$('.drag-upload-area').drag2upload({
    onDrop: function() {
        // Doing something after dropping a picture on the area.
    }
});

onUploaded

$('.drag-upload-area').drag2upload({
    onUploaded: function() {
        // Doing something after uploading successfully.
    }
});

onError

$('.drag-upload-area').drag2upload({
    onError: function() {
        // Doing something once uploading fails.
    }
});

onRefreshCSRFFail

$('.drag-upload-area').drag2upload({
    onRefreshCSRFFail: function() {
        // Doing something after the CSRF token refreshes.
    }
});