a1098047203 2016-11-18 03:09 采纳率: 0%
浏览 1834

file样式修改问题,通过点击button触发file,file内容无法及时显示

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
    body{ font-size:14px;}
    input{ vertical-align:middle; margin:0; padding:0}
    .file-box{ position:relative;width:340px}

    .txt{ height:22px; border:1px solid #cdcdcd; width:180px;}

    .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}

    .file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="file-box">
    <form action="" method="post" enctype="multipart/form-data">

        <input type='text' name='textfield' id='textfield' class='txt' />  

        <input type='button' class='btn' value='浏览...' />

        <input type="file" name="fileField" class="file" id="fileField" size="28" 
         onchange="document.getElementById('textfield').value=this.value" />

        <input type="submit" name="submit" class="btn" value="上传" />

        <input type="button" value="自定义" onclick="document.getElementById('fileField').click()"/>

  </form>
</div>
</body>
</html>
//此方式能实现
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> 预算导入</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link href="../demo.css" rel="stylesheet" type="text/css" />   
    <script src="../../common/nui/nui.js" type="text/javascript"></script> 
    <style type="text/css">
        .tab{
            border:1px solid   #87CEEB;
            width:800px;height:8em;
            border-collapse:collapse;
        }
        .tab th{
            background-color:#F0F8FF;
            border:1px solid #87CEEB;
        }
        .tab td{
            border:1px solid #87CEEB;
        }
        .flBtn{width:1px;height:1px;opacity: 0;filter:alpha(opacity:0);}
    </style>
</head>
<body>
    <h3>预算导入</h3>
    <div>
        <form action="" method="post" enctype="multipart/form-data">
            <table class="tab">
                <tr>
                    <th>预算年度</th>
                    <td >
                        <select>
                            <option>2016</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>年度预算导入</th>
                    <td>
                        <input type="text"  id="fileShow"/>             

                        <input type="file" class="flBtn" id="fileBtn" onclick="document.getElementById('fileShow').value=document.getElementById('fileBtn').value;"/>
                        <input type="button" value="浏览" id="fileTrigger" onclick="document.getElementById('fileBtn').click();"/>
                        <input type="submit" value="上传" />
                        <input type="button"  value="模板下载"/>


                    </td>           
                </tr>
                <tr>
                    <th>年度预算导出</th>
                    <td ><input type="button" value="预算导出" /></td>
                </tr>
            </table>
        </form>
    </div>

</body>
</html>

//此方式出现显示不同步


  • 写回答

1条回答 默认 最新

  • Go 旅城通票 2016-11-18 03:50
    关注

    firefox测试没有问题,可以正常弹出选中框。最好的办法就是file对象浮动到你要点击的按钮上,要不其他浏览器直接fileDOM.click()不一定能弹出选择框
    自定义上传控件样式
    修改input file控件默认浏览文字
    多文件选择上传jquery插件

    评论

报告相同问题?

悬赏问题

  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥15 state显示变量是字符串形式,但是仍然红色,无法引用,并显示类型不匹配
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波