Question

如何自定义文件上传，

<input type="file" />

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

Answer 1

您可以通过将文件上传的不透明度设置为0并将div放在您想要的样式的顶部来自行重载上传按钮上的样式。 e.g。

    <input style="opacity:0; position: fixed;" onchange="openfile(event)" type="file">
    <div class="icon">Open</div>

Answer 2

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

$('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/

Answer 3

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

工作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>

Answer 4

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

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

自定义文件上传在所有浏览器中看起来都一样

4 个答案: