修改 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 */
}

Answer 2

执行此操作的最简单且最漂亮的方法是简单地隐藏文件输入字段并从另一个按钮触发对该字段的单击，您可以完全按照自己的意愿设置样式。这是我的做法：

基本 HTML 和 Javascript 示例

<input id="csv" type="file" style="display:none;" />
<a href="javascript:void(0);" onclick="document.getElementById('csv').click();">Select</a>

基本 HTML 和 jQuery 示例

<input id="csv" type="file" style="display:none;" />
<a href="javascript:void(0);" onclick="$('#csv').click();">Select</a>

Answer 3

我在这方面取得了一些成功。我尝试让 jQuery 移动按钮执行 $('#id_of_file_input').click()，但这不起作用 - 我使用的是 Chrome。

所以，我发现文件输入的标签也可以接受点击。

所以，这里有一个解决方案：

<input id="upload_media" class="hidden" type="file" onchange="index.handle_upload_media();"/>
<div class="btn-group" role="group">
    <label for="upload_media" type="button" class="btn btn-primary">
        <span class="glyphicon glyphicon-floppy-open"></span> Upload Media
    </label>
</div>

注意：输入本身是隐藏的，但标签引用了它的 id。为了使按钮看起来正确，我必须在标签中设置按钮类型和类 - 鼠标悬停也可以。我的处理程序是 index.handle_upload_media()...

希望这会有所帮助 - 安迪