+
-
-
+
最多可上传九张图片
@@ -138,12 +118,13 @@
base: 'assets/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
- }).use(['index', 'form', 'laydate', 'laytpl'], function(){
+ }).use(['index', 'form', 'laydate', 'laytpl', 'upload'], function(){
var $ = layui.$;
var form = layui.form;
var laytpl = layui.laytpl;
var laydate = layui.laydate;
var wangEditor = window.wangEditor;
+ var upload = layui.upload;
var wangEditorObj = {};
var viewerObj = {};
@@ -237,55 +218,58 @@
}
// 初始化图片图片上传
- function initPhotoUploadFile() {
- var files = $('#photo').val();
- initFileList('photo', files, function(fileName) {
- var viewer = new Viewer(document.getElementById(fileName +'FileBox'), {navbar: false});
- viewerObj[fileName] = viewer;
- });
+ var photosArray = [];
- form.on('button(photoUploadFile)', function(obj) {
- var name = this.dataset.name;
- var explain = this.dataset.explain;
- top.dialog.file({
- type: 'image',
- title: '上传'+ explain,
- width: '400px',
- height: '420px',
- maxFileCount: '1',
- onClose: function() {
- var uploadFileArray = top.dialog.dialogData.uploadFileArray;
- if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
- var files = $('#'+ name).val();
- for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
- if(files.length > 0) {
- files += ',';
- }
- files += file.data;
- }
- initFileList(name, files, function(fileName) {
- viewerObj[fileName].update();
- });
- }
+ function renderPhoto() {
+ var $previewImgsFileBox = $('#photoFileBox');
+ var imgs = '';
+ $.each(photosArray, function(index, item) {
+ imgs += `
+
+ `
+ })
+ $previewImgsFileBox.empty();
+ $previewImgsFileBox.append(imgs);
+ }
+
+ function initEvent() {
+ upload.render({
+ elem: '#photoBtn',
+ url: top.restAjax.path('api/file/uploadimage', []),
+ field: 'image',
+ accept: 'images',
+ acceptMime: 'image/*',
+ done: function(res) {
+ top.dialog.msg('上传成功');
+ photosArray.push(res.data);
+ renderPhoto();
+ $('#photo').val(photosArray.join(','));
+ if(photosArray.length >= 9) {
+ this.elem.attr('disabled', 'disabled');
+ this.elem.addClass('layui-disabled')
}
- });
- });
-
- form.on('button(photoRemoveFile)', function(obj) {
- var name = this.dataset.name;
- var id = this.dataset.id;
- var files = $('#'+ name).val().replace(id, '');
- files = files.replace(/\,+/g, ',');
- if(files.charAt(0) == ',') {
- files = files.substring(1);
+ },
+ error: function(){
+ top.dialog.msg('上传异常');
}
- if(files.charAt(files.length - 1) == ',') {
- files = files.substring(0, files.length - 1);
- }
- initFileList(name, files, function(fileName) {
- viewerObj[fileName].update();
- });
});
+ $(document).on('click', '.img-remove-btn', function() {
+ var index = this.dataset.index;
+ var type = this.dataset.type;
+ if(type === 'photo') {
+ photosArray.splice(index, 1);
+ renderPhoto();
+ $('#photo').val(photosArray.join(','));
+ if(photosArray.length < 9) {
+ var $uploadLogoBtn = $('#photoBtn');
+ $uploadLogoBtn.removeAttr('disabled', 'disabled');
+ $uploadLogoBtn.removeClass('layui-disabled');
+ }
+ }
+ })
}
// 初始化视频视频上传
@@ -337,7 +321,7 @@
// 初始化内容
function initData() {
initContentRichText();
- initPhotoUploadFile();
+ initEvent();
initVideoUploadFile();
initDictIdSelect();
}
diff --git a/src/main/resources/templates/content/update.html b/src/main/resources/templates/content/update.html
index 77f4cb8..9a48700 100644
--- a/src/main/resources/templates/content/update.html
+++ b/src/main/resources/templates/content/update.html
@@ -58,34 +58,12 @@
+
-
+
-
-
+
最多可上传九张图片
@@ -138,7 +116,7 @@
base: 'assets/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
- }).use(['index', 'form', 'laydate', 'laytpl'], function(){
+ }).use(['index', 'form', 'laydate', 'laytpl', 'upload'], function(){
var $ = layui.$;
var form = layui.form;
var laytpl = layui.laytpl;
@@ -148,6 +126,7 @@
var wangEditor = window.wangEditor;
var wangEditorObj = {};
var viewerObj = {};
+ var upload = layui.upload;
function initDictIdSelect(selectValue) {
top.restAjax.get(top.restAjax.path('api/data/listallbyparentid/b6144a18-c5ea-4286-89fb-441172803d07', []), {}, null, function(code, data, args) {
@@ -243,57 +222,61 @@
}
// 初始化图片图片上传
- function initPhotoUploadFile() {
- var files = $('#photo').val();
- initFileList('photo', files, function(fileName) {
- var viewer = new Viewer(document.getElementById(fileName +'FileBox'), {navbar: false});
- viewerObj[fileName] = viewer;
- });
+ var photosArray = [];
- form.on('button(photoUploadFile)', function(obj) {
- var name = this.dataset.name;
- var explain = this.dataset.explain;
- top.dialog.file({
- type: 'image',
- title: '上传'+ explain,
- width: '400px',
- height: '420px',
- maxFileCount: '1',
- onClose: function() {
- var uploadFileArray = top.dialog.dialogData.uploadFileArray;
- if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
- var files = $('#'+ name).val();
- for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
- if(files.length > 0) {
- files += ',';
- }
- files += file.data;
- }
- initFileList(name, files, function(fileName) {
- viewerObj[fileName].update();
- });
- }
- }
- });
- });
-
- form.on('button(photoRemoveFile)', function(obj) {
- var name = this.dataset.name;
- var id = this.dataset.id;
- var files = $('#'+ name).val().replace(id, '');
- files = files.replace(/\,+/g, ',');
- if(files.charAt(0) == ',') {
- files = files.substring(1);
- }
- if(files.charAt(files.length - 1) == ',') {
- files = files.substring(0, files.length - 1);
- }
- initFileList(name, files, function(fileName) {
- viewerObj[fileName].update();
- });
- });
+ function renderPhoto() {
+ var $photoFileBox = $('#photoFileBox');
+ var imgs = '';
+ $.each(photosArray, function(index, item) {
+ imgs += `
+
+ `
+ })
+ $photoFileBox.empty();
+ $photoFileBox.append(imgs);
}
+ function initEvent() {
+ upload.render({
+ elem: '#photoBtn',
+ url: top.restAjax.path('api/file/uploadimage', []),
+ field: 'image',
+ accept: 'images',
+ acceptMime: 'image/*',
+ done: function(res) {
+ top.dialog.msg('上传成功');
+ photosArray.push(res.data);
+ renderPhoto();
+ $('#photo').val(photosArray.join(','));
+ if(photosArray.length >= 1) {
+ this.elem.attr('disabled', 'disabled');
+ this.elem.addClass('layui-disabled')
+ }
+ },
+ error: function(){
+ top.dialog.msg('上传异常');
+ }
+ });
+ $(document).on('click', '.img-remove-btn', function() {
+ var index = this.dataset.index;
+ var type = this.dataset.type;
+ if(type === 'photo') {
+ photosArray.splice(index, 1);
+ renderPhoto();
+ $('#photo').val(photosArray.join(','));
+ if(photosArray.length < 1) {
+ var $uploadLogoBtn = $('#photoBtn');
+ $uploadLogoBtn.removeAttr('disabled', 'disabled');
+ $uploadLogoBtn.removeClass('layui-disabled');
+ }
+ }
+ })
+ }
+
+
// 初始化视频视频上传
function initVideoUploadFile() {
var files = $('#video').val();
@@ -352,8 +335,11 @@
form.render(null, 'dataForm');
initContentRichText(data['content']);
initDictIdSelect(data['dictId']);
- initPhotoUploadFile();
initVideoUploadFile();
+
+ photosArray = data.photo.split(',');
+ renderPhoto();
+
}, function(code, data) {
top.dialog.msg(data.msg);
}, function() {
@@ -363,6 +349,7 @@
});
}
initData();
+ initEvent();
// 提交表单
form.on('submit(saveForm)', function(formData) {
diff --git a/src/main/resources/templates/helpdetail/save.html b/src/main/resources/templates/helpdetail/save.html
index 3938d38..03ba425 100644
--- a/src/main/resources/templates/helpdetail/save.html
+++ b/src/main/resources/templates/helpdetail/save.html
@@ -28,64 +28,25 @@
+
+
-
+ `
+ })
+ $previewImgsFileBox.empty();
+ $previewImgsFileBox.append(imgs);
+ }
+
+ function initEventVideo() {
+ upload.render({
+ elem: '#videoBtn',
+ url: top.restAjax.path('api/file/uploadvideo', []),
+ field: 'video',
+ accept: 'video',
+ acceptMime: 'video/*',
+ done: function(res) {
+ top.dialog.msg('上传成功');
+ videosArray.push(res.data);
+ renderVideo();
+ $('#video').val(videosArray.join(','));
+ if(videosArray.length >= 9) {
+ this.elem.attr('disabled', 'disabled');
+ this.elem.addClass('layui-disabled')
+ }
+ },
+ error: function(){
+ top.dialog.msg('上传异常');
+ }
+ });
+ $(document).on('click', '.img-remove-video-btn', function() {
+ var index = this.dataset.index;
+ var type = this.dataset.type;
+ if(type === 'video') {
+ videosArray.splice(index, 1);
+ renderVideo();
+ $('#video').val(videosArray.join(','));
+ if(videosArray.length < 9) {
+ var $uploadLogoBtn = $('#videoBtn');
+ $uploadLogoBtn.removeAttr('disabled', 'disabled');
+ $uploadLogoBtn.removeClass('layui-disabled');
+ }
+ }
+ })
+ }
+
+ // 初始化图片图片上传
+ var photosArray = [];
+
+ function renderPhotos() {
+ var $previewImgsFileBox = $('#photoFileBox');
+ var imgs = '';
+ $.each(photosArray, function(index, item) {
+ imgs += `
+
+ `
+ })
+ $previewImgsFileBox.empty();
+ $previewImgsFileBox.append(imgs);
+ }
+
+ function initEvent() {
+ upload.render({
+ elem: '#photoBtn',
+ url: top.restAjax.path('api/file/uploadimage', []),
+ field: 'image',
+ accept: 'images',
+ acceptMime: 'image/*',
+ done: function(res) {
+ top.dialog.msg('上传成功');
+ photosArray.push(res.data);
+ renderPhotos();
+ $('#photo').val(photosArray.join(','));
+ if(photosArray.length >= 9) {
+ this.elem.attr('disabled', 'disabled');
+ this.elem.addClass('layui-disabled')
+ }
+ },
+ error: function(){
+ top.dialog.msg('上传异常');
+ }
+ });
+ $(document).on('click', '.img-remove-btn', function() {
+ var index = this.dataset.index;
+ var type = this.dataset.type;
+ if(type === 'photo') {
+ photosArray.splice(index, 1);
+ renderPhotos();
+ $('#photo').val(photosArray.join(','));
+ if(photosArray.length < 9) {
+ var $uploadLogoBtn = $('#photoBtn');
+ $uploadLogoBtn.removeAttr('disabled', 'disabled');
+ $uploadLogoBtn.removeClass('layui-disabled');
+ }
+ }
+ })
+ }
+
function closeBox() {
parent.layer.close(parent.layer.getFrameIndex(window.name));
}
@@ -183,58 +258,6 @@
}
}
- // 初始化图片图片上传
- function initPhotoUploadFile() {
- var files = $('#photo').val();
- initFileList('photo', files, function(fileName) {
- var viewer = new Viewer(document.getElementById(fileName +'FileBox'), {navbar: false});
- viewerObj[fileName] = viewer;
- });
-
- form.on('button(photoUploadFile)', function(obj) {
- var name = this.dataset.name;
- var explain = this.dataset.explain;
- top.dialog.file({
- type: 'image',
- title: '上传'+ explain,
- width: '400px',
- height: '420px',
- maxFileCount: '1',
- onClose: function() {
- var uploadFileArray = top.dialog.dialogData.uploadFileArray;
- if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
- var files = $('#'+ name).val();
- for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
- if(files.length > 0) {
- files += ',';
- }
- files += file.data;
- }
- initFileList(name, files, function(fileName) {
- viewerObj[fileName].update();
- });
- }
- }
- });
- });
-
- form.on('button(photoRemoveFile)', function(obj) {
- var name = this.dataset.name;
- var id = this.dataset.id;
- var files = $('#'+ name).val().replace(id, '');
- files = files.replace(/\,+/g, ',');
- if(files.charAt(0) == ',') {
- files = files.substring(1);
- }
- if(files.charAt(files.length - 1) == ',') {
- files = files.substring(0, files.length - 1);
- }
- initFileList(name, files, function(fileName) {
- viewerObj[fileName].update();
- });
- });
- }
-
// 初始化视频视频上传
function initVideoUploadFile() {
var files = $('#video').val();
@@ -306,8 +329,8 @@
// 初始化内容
function initData() {
- initPhotoUploadFile();
- initVideoUploadFile();
+ initEventVideo();
+ initEvent();
initRichContentRichText();
}
initData();
diff --git a/src/main/resources/templates/helpdetail/update.html b/src/main/resources/templates/helpdetail/update.html
index 3722898..5fbfe6a 100644
--- a/src/main/resources/templates/helpdetail/update.html
+++ b/src/main/resources/templates/helpdetail/update.html
@@ -28,64 +28,24 @@
+
-
-
+
最多可上传九张图片