0

如何自定义文件上传，

<input type="file" />

在所有浏览器中看起来都一样？我想在单击我的自定义样式按钮时调用文件浏览器。

4

4 回答 4

1

您可以自己重载上传按钮上的样式，方法是将文件上传的不透明度设置为 0，并在顶部放置一个带有您想要的样式的 div。例如

    <input style="opacity:0; position: fixed;" onchange="openfile(event)" type="file">
    <div class="icon">Open</div>
于 2013-05-09T14:15:06.740 回答
1

一种选择是隐藏真实输入并用按钮替换它。 

$('input[type=file]').each(function(index,input){

     var button = $("<button class='file_btn'>Upload File</button>");
     $(input).before(button);
     $(input).css({position:'absolute',top:'-1000px'});

     button.click(function(){
         $(input).trigger('click');
     });

});

一个工作小提琴：http: //jsfiddle.net/KQhGR/1/

于 2013-05-09T14:15:40.013 回答
0

经过半个小时的思考，自己找到了一个解决这个问题的解决方案。（是的，我在发布这个问题时就知道答案，但想看看其他人如何解决这个问题，当然我想与其他人分享我的解决方案)

工作jsfiddle示例。

<input style="float:left; width:270px; height:25px;" id="path" name="path" disabled /> <!--disabled it, to avoid user from editing the file path-->
<input style="display:none;" type="file" id="photo-path" name="file" placeholder="" /> <!-- hide the default input type='file' coz its ugly :) -->

<button type="submit" onclick="document.getElementById('photo-path').click(); return false;">Browse</button>  <!-- but call hidden input type='file' when user clicks on your custom browse button,  -->

这是 JQuery 代码：（将文件路径复制到您的自定义字段）

<script type='text/javascript'>
    $('input[name="file"]').change(function(){
        var fileName = $(this).val();
        $('input[name="path"]').val(fileName);
    });
</script>
于 2013-05-09T14:22:29.507 回答
-1

对于这样的事情，最好的选择是使用像Uploadify这样的插件，不仅可以一致地设置上传按钮的样式，还可以添加进度条和多个文件上传。

不幸的是，没有一种可靠的方法（据我所知）在所有浏览器中一致地设置文件上传样式。这是前端开发人员不喜欢谈论的控件之一。

于 2013-05-09T14:06:21.540 回答