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

Posted 2023-05-08

【中文标题】修改 jQuery Mobile (jqm) 文件上传按钮

【英文标题】：Modify jQuery Mobile (jqm) file upload button

【发布时间】：2014-01-12 08:49:25

【问题描述】：

我希望将标准文件上传按钮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>

【问题讨论】：

你尝试过什么？我认为不使用其他 jquery 代码是不可能的。

我在此链接上尝试了建议，但在设置按钮大小以适应响应式网页设计时遇到问题。 （我会将代码添加到我的问题中）***.com/questions/4532733/styling-input-type-file

您是否尝试为上传字段添加标签，然后隐藏该字段？单击标签会激活 Safari 和 Chrome 中的字段。

【参考方案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 */

【讨论】：

不是 jQuery Mobile 解决方案 - 抱歉

警告 - click() 在 Chrome（或 Safari - 我相信）中不起作用 - cmets 中描述的原始问题的标签解决方案确实适用于 Chrome - 我没有尝试过其他浏览器。

【参考方案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>

【讨论】：

再说一遍 - 不是 jQuery Mobile 解决方案 - 抱歉

【参考方案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()...

希望这会有所帮助 - 安迪

【讨论】：

虽然您的解决方案中没有太多细节 - 只不过是其他 cmets。

我不确定您期望什么细节 - 这是问题的答案。这是一个 jQuery Mobile 解决方案 - 根据要求 - 与其他答案不同。与关于标签的注释不同 - 这也可用作 jQuery Mobile 按钮。我有更多关于处理上传的细节 - 但这并不能回答问题......