Metrics
0
Watch 2.7K Star 5.6K Fork 2.8K

ThinkGem / JeeSite 4.xJavaAGPL-3.0

fileupload上传按钮错位的bug

Closed
清晨微冷  Created at

该问题是怎么引起的?

上传前
上传前,只有一个上传按钮,上传后,上传按钮会变成两个
上传后
但是1位置会受到前面内容多少的影响,比如
图片附件中上传图片后
这里只是举个例子,当前面的内容变化比较大的时候,1位置的上传按钮会错位很严重,影响用户正常使用,希望你们能尽快修复这个问题
@ThinkGem

重现步骤

报错信息

573655_kingwashes 6732_thinkgem total 3 participants

Comments (16)

wangxiongying 2019-06-14 17:44

页面resize事件调用下
if (typeof window.webuploaderRefresh == 'function'){ window.webuploaderRefresh(); }

573655_kingwashes
清晨微冷 2019-06-17 20:52

@wangxiongying

$(window).resize(function () {
    if (typeof window.webuploaderRefresh == 'function') {
        window.webuploaderRefresh();
    }
});

加上去之后,按钮还是错位在原来的位置上,没有恢复正常

wangxiongying 2019-06-18 08:51

第一个按钮在上传完第一份文件后就被隐藏了,再上传要点继续上传。有啥问题。。

573655_kingwashes
清晨微冷 2019-06-18 09:18

@wangxiongying
虽然隐藏了,但是按钮的上传功能还在,如果点到了这个按钮,还是会弹出上传的窗口的,而且由于页面内容的调整,这个隐藏后的按钮的位置会错位出现在其他地方,这样就会影响用户正常使用了

573655_kingwashes
清晨微冷 2019-06-18 09:21

你可以重现一下我上面图片中的内容,按钮1的位置是可以点击的,会弹出上传窗口;
(ps:建议把图片上传换成附件上传,多上传几个文件,效果更明显)

wangxiongying 2019-06-20 11:09

$(function(){
var uploader = window.webuploader[0];
uploader.on('all', function(type, file) {
log(type)
log(file)
});
});
你可以试试看在uploader 的上传事件之后调用初始化组件的方法,我的多文件上传没有出现你那个问题。

573655_kingwashes
清晨微冷 2019-06-20 11:58

可能我的表述不是很清楚,我给你示例,你再看看吧。
初始化sql如下:

INSERT INTO `jeesite`.`test_data` (`id`, `test_input`, `test_textarea`, `test_select`, `test_select_multiple`, `test_radio`, `test_checkbox`, `test_date`, `test_datetime`, `test_user_code`, `test_office_code`, `test_area_code`, `test_area_name`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141552542096637952', '', '', '', '', NULL, '', NULL, NULL, '', '', '', '', '0', 'system', '2019-06-20 11:45:10', 'system', '2019-06-20 11:47:55', '');
INSERT INTO `jeesite`.`test_data_child` (`id`, `test_sort`, `test_data_id`, `test_input`, `test_textarea`, `test_select`, `test_select_multiple`, `test_radio`, `test_checkbox`, `test_date`, `test_datetime`, `test_user_code`, `test_office_code`, `test_area_code`, `test_area_name`) VALUES ('1141552542193106944', NULL, '1141552542096637952', '', '', '', '', '', '', NULL, NULL, '', '', '', '');
INSERT INTO `jeesite`.`js_sys_file_entity` (`file_id`, `file_md5`, `file_path`, `file_content_type`, `file_extension`, `file_size`, `file_meta`) VALUES ('1141553209736388610', '076e3caed758a1c18c91a0e9cae3368f', '201906/', 'image/jpeg', 'jpg', '879394', '{\"width\":1024,\"height\":768}');
INSERT INTO `jeesite`.`js_sys_file_entity` (`file_id`, `file_md5`, `file_path`, `file_content_type`, `file_extension`, `file_size`, `file_meta`) VALUES ('1141553212991168514', 'ba45c8f60456a672e003a875e469d0eb', '201906/', 'image/jpeg', 'jpg', '845941', '{\"width\":1024,\"height\":768}');
INSERT INTO `jeesite`.`js_sys_file_entity` (`file_id`, `file_md5`, `file_path`, `file_content_type`, `file_extension`, `file_size`, `file_meta`) VALUES ('1141553214211710978', 'bdf3bf1da3405725be763540d6601144', '201906/', 'image/jpeg', 'jpg', '595284', '{\"width\":1024,\"height\":768}');
INSERT INTO `jeesite`.`js_sys_file_entity` (`file_id`, `file_md5`, `file_path`, `file_content_type`, `file_extension`, `file_size`, `file_meta`) VALUES ('1141553216308862978', '5a44c7ba5bbe4ec867233d67e4806848', '201906/', 'image/jpeg', 'jpg', '775702', '{\"width\":1024,\"height\":768}');
INSERT INTO `jeesite`.`js_sys_file_entity` (`file_id`, `file_md5`, `file_path`, `file_content_type`, `file_extension`, `file_size`, `file_meta`) VALUES ('1141553217512628226', '2b04df3ecc1d94afddff082d139c6f15', '201906/', 'image/jpeg', 'jpg', '780831', '{\"width\":1024,\"height\":768}');
INSERT INTO `jeesite`.`js_sys_file_entity` (`file_id`, `file_md5`, `file_path`, `file_content_type`, `file_extension`, `file_size`, `file_meta`) VALUES ('1141553218498289666', '8969288f4245120e7c3870287cce0ff3', '201906/', 'image/jpeg', 'jpg', '561276', '{\"width\":1024,\"height\":768}');
INSERT INTO `jeesite`.`js_sys_file_entity` (`file_id`, `file_md5`, `file_path`, `file_content_type`, `file_extension`, `file_size`, `file_meta`) VALUES ('1141553219580420098', '9d377b10ce778c4938b3c7e2c63a229a', '201906/', 'image/jpeg', 'jpg', '777835', '{\"width\":1024,\"height\":768}');
INSERT INTO `jeesite`.`js_sys_file_entity` (`file_id`, `file_md5`, `file_path`, `file_content_type`, `file_extension`, `file_size`, `file_meta`) VALUES ('1141553220817739778', 'fafa5efeaf3cbe3b23b2748d13e629a1', '201906/', 'image/jpeg', 'jpg', '620888', '{\"width\":1024,\"height\":768}');
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553209736388609', '1141553209736388610', 'Chrysanthemum.jpg', 'image', '1141552542096637952', 'testData_image', '0', 'system', '2019-06-20 11:47:49', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553212991168513', '1141553212991168514', 'Desert.jpg', 'image', '1141552542096637952', 'testData_image', '0', 'system', '2019-06-20 11:47:50', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553214211710977', '1141553214211710978', 'Hydrangeas.jpg', 'image', '1141552542096637952', 'testData_image', '0', 'system', '2019-06-20 11:47:50', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553216308862977', '1141553216308862978', 'Jellyfish.jpg', 'image', '1141552542096637952', 'testData_image', '0', 'system', '2019-06-20 11:47:51', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553217512628225', '1141553217512628226', 'Koala.jpg', 'image', '1141552542096637952', 'testData_image', '0', 'system', '2019-06-20 11:47:51', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553218498289665', '1141553218498289666', 'Lighthouse.jpg', 'image', '1141552542096637952', 'testData_image', '0', 'system', '2019-06-20 11:47:51', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553219580420097', '1141553219580420098', 'Penguins.jpg', 'image', '1141552542096637952', 'testData_image', '0', 'system', '2019-06-20 11:47:51', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553220817739777', '1141553220817739778', 'Tulips.jpg', 'image', '1141552542096637952', 'testData_image', '0', 'system', '2019-06-20 11:47:52', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553222990389248', '1141553209736388610', 'Chrysanthemum.jpg', 'file', '1141552542096637952', 'testData_file', '0', 'system', '2019-06-20 11:47:52', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553223682449408', '1141553212991168514', 'Desert.jpg', 'file', '1141552542096637952', 'testData_file', '0', 'system', '2019-06-20 11:47:52', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553224328372224', '1141553214211710978', 'Hydrangeas.jpg', 'file', '1141552542096637952', 'testData_file', '0', 'system', '2019-06-20 11:47:52', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553224781357056', '1141553216308862978', 'Jellyfish.jpg', 'file', '1141552542096637952', 'testData_file', '0', 'system', '2019-06-20 11:47:52', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553225544720384', '1141553217512628226', 'Koala.jpg', 'file', '1141552542096637952', 'testData_file', '0', 'system', '2019-06-20 11:47:53', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553226069008384', '1141553218498289666', 'Lighthouse.jpg', 'file', '1141552542096637952', 'testData_file', '0', 'system', '2019-06-20 11:47:53', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553226828177408', '1141553219580420098', 'Penguins.jpg', 'file', '1141552542096637952', 'testData_file', '0', 'system', '2019-06-20 11:47:53', 'system', '2019-06-20 11:47:55', NULL);
INSERT INTO `jeesite`.`js_sys_file_upload` (`id`, `file_id`, `file_name`, `file_type`, `biz_key`, `biz_type`, `status`, `create_by`, `create_date`, `update_by`, `update_date`, `remarks`) VALUES ('1141553227306328064', '1141553220817739778', 'Tulips.jpg', 'file', '1141552542096637952', 'testData_file', '0', 'system', '2019-06-20 11:47:53', 'system', '2019-06-20 11:47:55', NULL);

打开浏览器输入

http://192.168.125.222:8980/js/a/test/testData/form?id=1141552542096637952

你可以看到下图页面
输入图片说明

点击图片红框位置,将会打开文件上传窗口,这就是问题所在了。
因为红框的位置会移动的,如果刚好出现在用户需要输入或者点击的位置,就会影响用户使用了
@wangxiongying

wangxiongying 2019-06-20 13:22

输入图片说明
这是我的实际使用的多文件上传。
输入图片说明
这是按钮部分的div触发层,请注意红框部分每个div的width和height属性,你只需要确保除了"继续上传"这个按钮以外的其它按钮width和height都是1px。就不会存在按钮触发层错位的问题了。

而解决这个问题,需要在每次upload组件内容有变动时调用之前提到的组件刷新方法。

573655_kingwashes
清晨微冷 2019-06-20 14:13

具体要怎么写呢?我尝试着把你提供的两种写法结合起来,但是没有出现你说的效果 @wangxiongying

$(function () {
        console.log(window.webuploader);
        $(window.webuploader).each(function (k, v) {
            v.on('all', function (type, file) {
                log(type);
                log(file);
                if (typeof window.webuploaderRefresh == 'function') {
                    window.webuploaderRefresh();
                }
            });
        });
    });
wangxiongying 2019-06-20 17:39

输入图片说明
组件的核心是webuploader,回调事件要选对。

	//初始化uploader组件,解决上传按钮触发层定位失败问题
	$(".webuploader-element-invisible").each(function(){
		if($(this).parent().width()>1){
			$(this).parent().css("top","0px");
			$(this).parent().css("left","0px");
			$(this).parent().css("width","1px");
			$(this).parent().css("height","1px");
		};
	});
	if (typeof window.webuploaderRefresh == 'function'){
		window.webuploaderRefresh();
	}

然后在确认你的上传组件页面变化完成之后的事件里调用上述代码。还不行我就没的办法了~

573655_kingwashes
清晨微冷 2019-06-20 18:01

可以了,谢谢,同时也希望你们能在下一个版本中修复这个问题。

wangxiongying 2019-06-20 18:45

我也是用户 :joy: ,遇到过类似的问题而已

573655_kingwashes
清晨微冷 2019-06-20 18:47

:sweat_smile: 那真是谢谢了,本来想等jeesite的人来处理的,结果都过去10天了,还没动静

6732_thinkgem
ThinkGem 2019-06-24 11:40 owner

谢谢反馈。这个改进过了,试下4.1.5,隐藏后,浮动层的按钮移出了可视窗口外。

573655_kingwashes
清晨微冷 2019-06-24 20:04

确定改好了吗?我用的就是4.1.5的版本啊 @ThinkGem

6732_thinkgem
ThinkGem 2019-06-26 22:01 owner

@清晨微冷 对,看看是不是浏览器缓存问题

Sign in and comment

Assignee
Labels
Not set
Project
Milestone
Branch
Scheduled start
Not set
Scheduled end
Not set
Top level
Priority

Help Search

Gitee_you_jiang_zheng_wen Zheng_wen_close