baoshuo/S2OJ
baoshuo/S2OJ
1
1
Fork 0
mirror of https://github.com/renbaoshuo/S2OJ.git synced 2024-11-29 18:26:20 +00:00
Code Issues Actions Packages Releases Activity

feat(web/image_hosting): drag and drop images

Browse Source
This commit is contained in:
Baoshuo Ren 2022-10-13 16:13:36 +08:00
parent 65864dd1d2
commit 755199a32a
Signed by: baoshuo
GPG Key ID: 00CB9680AB29F51A
1 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -130,7 +130,7 @@
<path fill="#89d1f5" d="M528 32H144a48 48 0 0 0-48 48v256a48 48 0 0 0 48 48h384a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48zM208 80a48 48 0 1 1-48 48 48 48 0 0 1 48-48zm304 240H160v-48l55.52-55.52a12 12 0 0 1 17 0L272 256l135.52-135.52a12 12 0 0 1 17 0L512 208z"></path> <path fill="#89d1f5" d="M528 32H144a48 48 0 0 0-48 48v256a48 48 0 0 0 48 48h384a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48zM208 80a48 48 0 1 1-48 48 48 48 0 0 1 48-48zm304 240H160v-48l55.52-55.52a12 12 0 0 1 17 0L272 256l135.52-135.52a12 12 0 0 1 17 0L512 208z"></path>
</g> </g>
</svg> </svg>
<span class="small">点击此处选择图片</span> <span id="select-image-text" class="small">点击此处选择图片</span>
</div> </div>
<input id="image_upload_file" name="image_upload_file" type="file" accept="image/*" style="display: none;" /> <input id="image_upload_file" name="image_upload_file" type="file" accept="image/*" style="display: none;" />
<div class="modal fade" id="image-upload-modal" tabindex="-1" aria-hidden="true"> <div class="modal fade" id="image-upload-modal" tabindex="-1" aria-hidden="true">
@ -154,7 +154,7 @@
<div class="mt-3" id="modal-help-message" style="display: none"></div> <div class="mt-3" id="modal-help-message" style="display: none"></div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="cancel-upload">取消</button>
<button type="submit" class="btn btn-primary">确定</button> <button type="submit" class="btn btn-primary">确定</button>
</div> </div>
</div> </div>
@ -207,6 +207,7 @@
</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 droppedFiles = false;
function refreshCaptcha() { function refreshCaptcha() {
var timestamp = new Date().getTime(); var timestamp = new Date().getTime();
@ -266,6 +267,20 @@ $('#image-upload-form').submit(function(event) {
$('#image-upload-form-drop').click(function() { $('#image-upload-form-drop').click(function() {
$('#image_upload_file').click(); $('#image_upload_file').click();
}); });
$('#image-upload-form-drop').on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
e.preventDefault();
e.stopPropagation();
}).on('dragover dragenter', function() {
$('#select-image-text').html('松开以上传');
}).on('dragleave dragend drop', function() {
$('#select-image-text').html('点击此处选择图片');
}).on('drop', function(e) {
$('#image_upload_file').prop('files', e.originalEvent.dataTransfer.files);
$('#image_upload_file').trigger('change');
});
$('#image-upload-modal').on('hide.bs.modal', function() {
$('#image-upload-form').trigger('reset');
});
$('#image_upload_file').change(function() { $('#image_upload_file').change(function() {
if ($(this).prop('files')) { if ($(this).prop('files')) {
refreshCaptcha(); refreshCaptcha();