拖曳電腦中的某張圖片到指定的DOM上,即可上傳圖片到網站上某個指定目錄
jQuery
1.用npm指令安裝
npm install drag2upload
2.用html語法引入
<script src="drag2upload/drag2upload.jquery.js"></script>
require('drag2upload/drag2upload.jquery.js');
$('.drag-upload-area').drag2upload();
// 檔名
$('.drag-upload-area').drag2upload({
name: 'avatar'
});
// 指出能夠處理上傳圖片的程式路徑
$('.drag-upload-area').drag2upload({
uploadFileUrl: '/upload/file/handler'
});
// CSRF token
$('.drag-upload-area').drag2upload({
csrf: $('meta[name="csrf-token"]').attr('content')
});
// 當CSRF token逾期時,可以更新的程式路徑
$('.drag-upload-area').drag2upload({
refreshCsrfUrl: '/csrf/token/refresh'
});
$('.drag-upload-area').drag2upload({
onDragOver: function() {
// Doing something when dragging a picture over the area.
}
});
$('.drag-upload-area').drag2upload({
onDragOut: function() {
// Doing something when dragging a picture out the area.
}
});
$('.drag-upload-area').drag2upload({
onDrop: function() {
// Doing something after dropping a picture on the area.
}
});
$('.drag-upload-area').drag2upload({
onUploaded: function() {
// Doing something after uploading successfully.
}
});
$('.drag-upload-area').drag2upload({
onError: function() {
// Doing something once uploading fails.
}
});
$('.drag-upload-area').drag2upload({
onRefreshCSRFFail: function() {
// Doing something after the CSRF token refreshes.
}
});