当前位置: 首页 > 工具软件 > ZUI > 使用案例 >

解决zui-upload(ZUI: 文件上传 - v1.8.1)移动端上传组件的bug

司徒钱青
2023-12-01

zui组件不错,但是上传组件upload在移动端存在缺陷bug。
bug是:button.uploader-btn-browse移动端点击无效;div.moxie-shim点击有效,但是div.moxie-shim宽高没有,需要div.moxie-shim显现出来,button.uploader-btn-browse隐藏。

废话不多说,上代码(依赖jquery.js):

<style type="text/css">
	button.uploader-btn-browse{
	  display:none
	}
</style>
 $('#exampleId').uploader({
 ...
 onFilesAdded : function(files) {
	//zui 移动端bug
	zuiUploadBugAdapter(0)
 })
 ...
 })
 //解决zui-upload移动端上传组件的bug
zuiUploadBugAdapter(1500)
function zuiUploadBugAdapter(time){
    setTimeout(function (){
	     //$('button.uploader-btn-browse').remove()
	     //巨坑,font-size:999px
	     $(":file").css({'font-size': '10px'})
	     $('span.zui_file_text_adpater').remove()
	     $('div.uploader').css({
			    'position': 'relative',
			    'margin-bottom': '50px'
		 })
	     $('div.moxie-shim').css({
			     'position': 'static',
			     'top': '50px',
			     'left': '-1px',
			     //宽度动态获取,不要写死
			     'width': $('div.file-rename-by-click').width()+'px',
			     'height': '30px',
			     'background-color': 'rgb(50,128,252)',
			     'overflow': 'hidden',
			     'z-index': '1',
			     'text-align': 'center',
			     'padding-top': '5px',
			     'color': 'white',
			     'border-radius': '5px'
			 })
			 $('div.moxie-shim').append('<span class="zui_file_text_adpater">选择文件</span>')
	  },time)
 }
 类似资料: