jquery - 修改 jQuery Mobile (jqm) 文件上传按钮

Question

我正在寻找修改标准文件上传按钮provided by JQuery Mobile自定义文件上传按钮。 (见下文)尝试了多种方法来覆盖样式，但没有取得多大成功。有人可以建议我如何实现这一目标吗？

标准文件上传按钮

自定义文件上传按钮

<style>
div.fileinputs {
            position: relative;
        }

        div.fakefile {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }

        div.fakefile input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
            width: 426px;
        }

        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
</style>


<script>
$(document).on('pageinit','#address_form',function (event){     
   $('#upload_button').parent('.ui-btn').css('width','334%');
})
</script>

<div data-role="page" id="address_form">
    <div data-role="content">
      <div class='container_12'>
        <div class='grid_12 fileinputs' >
        <input type="file"  class="file" style='opacity:0;' />
        <div class="fakefile" style='padding: 1.8%;' >
            <input id='upload_button' type="button" value="Upload" style='' />
        </div>
        </div>
      </div> 
   </div>
</div>

Answer 1

我最近在一个元素中使用了它，这应该对你有用 - 也可以跨浏览器。

html

<div id="UGC_sign_up">
<form id="form" name="frmUpload" action="" enctype="multipart/form-data" method="post">
<input type="file" name="myFile" id="browse">
<!-- your button image below id image -->
<img id="image" src="upload.png" onclick="HandleFileButtonClick();" />
</form>
</div>

CSS您可以根据需要定位，但我在下面使用的示例:

#UGC_sign_up{
display: none;
position: relative;
}
#form{
position:relative; display: block;
width:200px; height:200px;
}
#image{
position: absolute;
top: 10px; left:20px;
display: block;
width:200px; height:150px;
}

jquery 用于将文件按钮中的单击事件添加到图像

/* associate click of browse button to image */
function HandleFileButtonClick(){ /* this click event is in the image */
    document.frmUpload.myFile.click(); /* "myFile" is name field for the browse input button */
}