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)
}