baoshuo/S2OJ
baoshuo/S2OJ
1
1
Fork 0
mirror of https://github.com/renbaoshuo/S2OJ.git synced 2024-11-23 04:38:42 +00:00
Code Issues Actions Packages Releases Activity

feat(web/image_hosting): upload from clipboard
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Baoshuo Ren 2022-10-16 11:08:41 +08:00
parent d5a4721a20
commit c31f24cbb3
Signed by: baoshuo
GPG Key ID: 00CB9680AB29F51A
1 changed files with 35 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/app/controllers/image_hosting/index.php
View File

@ -233,8 +233,19 @@
</form> </form>
</div> </div>
</div> </div>
<div class="toast-container position-fixed bottom-0 start-0 ms-3 mb-4" style="z-index: 999999">
<div id="image-upload-toast" class="toast text-bg-danger align-items-center border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
文件非法：不是有效的图片格式。
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<script> <script>
var image_upload_modal = new bootstrap.Modal('#image-upload-modal'); var image_upload_modal = new bootstrap.Modal('#image-upload-modal');
var image_upload_toast = new bootstrap.Toast('#image-upload-toast', { delay: 2000 });
var droppedFiles = false; var droppedFiles = false;
function refreshCaptcha() { function refreshCaptcha() {
@ -309,17 +320,36 @@ $('#image-upload-form-drop').on('drag dragstart dragend dragover dragenter dragl
$('#image_upload_file').prop('files', e.originalEvent.dataTransfer.files); $('#image_upload_file').prop('files', e.originalEvent.dataTransfer.files);
$('#image_upload_file').trigger('change'); $('#image_upload_file').trigger('change');
}); });
$(document).on('paste', function(e) {
if (e.originalEvent.clipboardData) {
$('#image_upload_file').prop('files', e.originalEvent.clipboardData.files);
}
$('#image_upload_file').trigger('change');
});
$('#image-upload-modal').on('hide.bs.modal', function() { $('#image-upload-modal').on('hide.bs.modal', function() {
$('#image-upload-form').trigger('reset'); $('#image-upload-form').trigger('reset');
}); });
$('#image_upload_file').change(function() { $('#image_upload_file').change(function() {
if ($(this).prop('files')) { var items = $(this).prop('files');
var file = null;
if (items && items.length) {
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i];
break;
}
}
}
if (file) {
refreshCaptcha(); refreshCaptcha();
var watermark_type = $('input[name=watermark]:checked', '#image-upload-form').data('value'); var watermark_type = $('input[name=watermark]:checked', '#image-upload-form').data('value');
var html = ''; var html = '';
html += '<p><img src="'+ URL.createObjectURL($(this).prop('files')[0]) +'" height="150" style="object-fit: contain"></p>'; html += '<p><img src="'+ URL.createObjectURL(file) +'" height="150" style="object-fit: contain"></p>';
html += '<p class="small">大小：<b>'+($(this).prop('files')[0].size / 1024).toFixed(2)+'</b> KB。'; html += '<p class="small">大小：<b>'+(file.size / 1024).toFixed(2)+'</b> KB。';
if (watermark_type === 'no_watermark') { if (watermark_type === 'no_watermark') {
html += '不添加水印。'; html += '不添加水印。';
@ -334,6 +364,8 @@ $('#image_upload_file').change(function() {
$('#modal-file-info').html(html); $('#modal-file-info').html(html);
$('#modal-help-message').html('').hide(); $('#modal-help-message').html('').hide();
image_upload_modal.show(); image_upload_modal.show();
} else {
image_upload_toast.show();
} }
}); });
</script> </script>