用JS实现input中的file标签的样式（当要修改file标签的字体样式时使用）

实现步骤:1.创建一个input
file标签，并设置该标签为隐藏的；

eg:<input

type="file"

id="file1"

name="file1"

style="display:none"/>

2.创建一个input
text标签，来显示选中的文件路径；

eg:<input

type="text"

value="未选择文件"

id="tex"/>

3.创建一个超链接标签，通过点击该链接间接点击了文件标签；

eg:<a
onclick="$('#file1').click()>选择文件</a>

4.通过一段JavaScript代码，将选中的文件路径显示在文本框中；

eg:<script>$(function(){
$("#file1").change(function(){
$("#tex").val($("#file1").val());});});</script>

注意:该段代码必须要加jQuery框架

完整代码如下:

<input type="file" id="file1" name="file1" style="display:none"/>

        <div class="input-append">

            <input id="filePath" class="input-sm" type="text" value="未選択ファイル" style="height:30px;font-size:13px;border-radius:5px">

            <a class="easyui-linkbutton" style="height:30px" onclick="$('input[id=file1]').click();">選択ファイル</a>

        </div>    

 <script type="text/javascript">

        $(function () {

            $('input[id=file1]').change(function () {

                $('#filePath').val($(this).val());

            });

        });

        

    </script>