Skip to content

Commit

Permalink
feat: upload images function use FileManger
Browse files Browse the repository at this point in the history
  • Loading branch information
@qxsclass
qxsclass committed Jan 25, 2025
1 parent 2f40e7a commit 9519fd3
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 129 deletions.
88 changes: 26 additions & 62 deletions innopacks/panel/resources/views/components/form/image.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,74 +36,38 @@

<script>
$('.is-up-file .img-upload-item').click(function () {
const _self = $(this);
$('#form-upload').remove();
$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" accept="image/*" name="file" /></form>');
$('#form-upload input[name=\'file\']').trigger('click');
$('#form-upload input[name=\'file\']').change(function () {
let file = $(this).prop('files')[0];
imgUploadAjax(file, _self);
});
})
const _self = $(this);
// 允许拖拽上传
$('.is-up-file .img-upload-item').on('dragover', function (e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass('border-primary');
});
// dragleave
$('.is-up-file .img-upload-item').on('dragleave', function (e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass('border-primary');
});
$('.is-up-file .img-upload-item').on('drop', function (e) {
e.stopPropagation();
let file = e.originalEvent.dataTransfer.files[0];
imgUploadAjax(file, $(this));
$(this).removeClass('border-primary');
// 调用文件管理器
window.inno.fileManagerIframe((file) => {
// 处理选中的文件
let val = file.path;
let url = file.url;
_self.find('input').val(val);
_self.find('.tool-wrap').removeClass('d-none');
_self.find('.img-info').html('<img src="' + url + '" class="img-fluid" data-origin-img="' + url + '">');
}, {
multiple: false,
type: 'image'
});
});
// 删除图片
$('.is-up-file .delete-img').on('click', function (e) {
e.stopPropagation();
let _self = $(this).parent().parent();
_self.find('input').val('');
_self.find('.tool-wrap').addClass('d-none');
_self.find('.img-info').html('<i class="bi bi-plus-lg fs-3 text-secondary"></i>');
e.stopPropagation();
let _self = $(this).parent().parent();
_self.find('input').val('');
_self.find('.tool-wrap').addClass('d-none');
_self.find('.img-info').html('<i class="bi bi-plus fs-1 text-secondary opacity-75"></i>');
});
// 预览图片
$('.is-up-file .show-img').on('click', function (e) {
e.stopPropagation();
let src = $(this).parent().siblings('.img-info').find('img').data('origin-img');
let img = '<img src="' + src + '" class="img-fluid">';
$('#modal-show-img .modal-body').html(img);
$('#modal-show-img').modal('show');
e.stopPropagation();
let src = $(this).parent().siblings('.img-info').find('img').data('origin-img');
let img = '<img src="' + src + '" class="img-fluid">';
$('#modal-show-img .modal-body').html(img);
$('#modal-show-img').modal('show');
});
function imgUploadAjax(file, _self) {
if (file.type.indexOf('image') === -1) {
alert('请上传图片文件');
return;
}
let formData = new FormData();
formData.append('image', file);
formData.append('type', _self.parents('.is-up-file').data('type'));
_self.find('.img-loading').removeClass('d-none');
axios.post(urls.upload_images, formData, {}).then(function (res) {
let val = res.data.value;
let url = res.data.url;
_self.find('input').val(val);
_self.find('.tool-wrap').removeClass('d-none');
_self.find('.img-info').html('<img src="' + url + '" class="img-fluid" data-origin-img="' + url + '">');
}).catch(function (err) {
inno.msg(err.response.data.message);
}).finally(function () {
_self.find('.img-loading').addClass('d-none');
});
}
</script>
@endPushOnce
@endPushOnce
102 changes: 35 additions & 67 deletions innopacks/panel/resources/views/components/form/images.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,88 +53,56 @@ class="img-upload-item wh-80 img-upload-trigger d-flex overflow-hidden justify-c
<script>
$('.img-upload-trigger').click(function () {
const _self = $(this);
$('#form-upload').remove();
$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" accept="image/*" multiple name="file" /></form>');
$('#form-upload input[name=\'file\']').trigger('click');
$('#form-upload input[name=\'file\']').change(function () {
let file = $(this).prop('files');
imgsUploadAjax(file, _self);
});
})
const upFile = _self.parents('.is-up-file');
const imgMax = upFile.data('img-max');
const currentCount = upFile.find('.img-upload-item').length - 1; // 减去触发器本身
// 允许拖拽上传
$('.is-up-file').on('dragover', function (e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass('border-primary');
});
// 调用文件管理器
window.inno.fileManagerIframe((files) => {
// 确保files是数组
const fileArray = Array.isArray(files) ? files : [files];
// dragleave
$('.is-up-file').on('dragleave', function (e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass('border-primary');
});
// 处理选中的文件
fileArray.forEach((file, index) => {
if (imgMax && (currentCount + index) >= imgMax) {
return;
}
let val = file.path;
let url = file.url;
let item = '<div class="img-upload-item wh-80 position-relative d-flex justify-content-center rounded overflow-hidden align-items-center border border-1 mb-1 me-1">';
item += '<div class="position-absolute tool-wrap d-flex top-0 start-0 w-100 bg-primary bg-opacity-75"><div class="show-img w-100 text-center"><i class="bi bi-eye text-white"></i></div><div class="w-100 delete-img text-center"><i class="bi bi-trash text-white"></i></div></div>';
item += '<div class="img-info d-flex justify-content-center align-items-center h-100 w-80 bg-white">';
item += '<img src="' + url + '" class="img-fluid" data-origin-img="' + url + '">';
item += '</div>';
item += '<input class="d-none" name="{{ $name }}[]" value="' + val + '">';
item += '</div>';
$('.is-up-file').on('drop', function (e) {
e.preventDefault();
e.stopPropagation();
let file = e.originalEvent.dataTransfer.files;
imgsUploadAjax(file, $(this));
$(this).removeClass('border-primary');
_self.before(item);
});
// 更新计数
upFile.find('.imgs-count').text(upFile.find('.img-upload-item').length - 1);
}, {
multiple: true,
type: 'image'
});
});
// 删除图片
$('.is-up-file').on('click', '.delete-img', function () {
let count = $(this).parents('.is-up-file').find('.imgs-count');
count.text(count.text() * 1 - 1);
$(this).parent().parent().remove();
});
// 预览图片
$('.is-up-file').on('click', '.show-img', function () {
let src = $(this).parent().next().find('img').data('origin-img');
let img = '<img src="' + src + '" class="img-fluid">';
$('#modal-show-imgs .modal-body').html(img);
$('#modal-show-imgs').modal('show');
});
function imgsUploadAjax(file, _self) {
let imgsCount = _self.parents('.is-up-file').find('.imgs-count').text() * 1;
let imgMax = _self.parents('.is-up-file').data('img-max');
for (let i = 0; i < file.length; i++) {
if (file[i].type.indexOf('image') === -1) {
continue;
}
if (imgMax && imgsCount >= imgMax) {
return;
}
let formData = new FormData();
formData.append('image', file[i]);
formData.append('type', _self.parents('.is-up-file').data('type'));
_self.find('.img-loading').removeClass('d-none');
axios.post(urls.upload_images, formData, {}).then(function (res) {
let val = res.data.value;
let url = res.data.url;
let item = '<div class="img-upload-item wh-80 position-relative d-flex justify-content-center rounded overflow-hidden align-items-center border border-1 mb-1 me-1">';
item += '<div class="position-absolute tool-wrap d-flex top-0 start-0 w-100 bg-primary bg-opacity-75"><div class="show-img w-100 text-center"><i class="bi bi-eye text-white"></i></div><div class="w-100 delete-img text-center"><i class="bi bi-trash text-white"></i></div></div>';
item += '<div class="img-info d-flex justify-content-center align-items-center h-100 w-80 bg-white">';
item += '<img src="' + url + '" class="img-fluid" data-origin-img="' + url + '">';
item += '</div>';
item += '<input class="d-none" name="{{ $name }}[]" value="' + val + '">';
item += '</div>';
_self.before(item);
_self.parents('.is-up-file').find('.imgs-count').text(_self.parents('.is-up-file').find('.img-upload-item').length - 1);
}).catch(function (err) {
inno.msg(err.response.data.message);
}).finally(function () {
_self.find('.img-loading').addClass('d-none');
});
imgsCount++
}
}
</script>
@endPushOnce
@endPushOnce

0 comments on commit 9519fd3

Please sign in to comment.