在这个帖子中发帖，因为它已经过时了，而且其他人（像我一样）可能会从谷歌上找到它，并想知道他们可以做些什么来创建外观更好的input[type=file]框！
简短的答案仍然是：你不能。
但是，如果你愿意使用一点JavaScript，你实际上可以制作出一个相当不错的样式，并适当地控制文件输入。
首先，HTML大致如下：
<a href="#" class="btn btn-upload">Choose your photo</a>
<div class="fileupload">
<label for="picture">Your Image:</label>
<input type='file' name="picture" id="picture" enctype = "multipart/form-data" runat="server" required />
</div>
这允许您使用fileupload div来“隐藏”真正的控件 - 但是，您不应该使用display:none - 许多浏览器将其视为安全风险。相反，尝试使用position:relative和left:-99999px，或者height:0px和overflow:hidden。如果您需要出于任何原因关闭此功能（例如需要支持非常旧的IE），则可以使用IE样式表或Modernizr并反转CSS以显示正常上传并隐藏您的“伪造”。
现在，适当地为您的btn-upload设置样式。无论您想要什么样式。
使用JavaScript为您单击输入文件，当有人单击您的“伪造”时（以下假定您使用jQuery）：
$(".btn-upload").click(function () {
$(".fileupload input").trigger('click');
return false;
});
此外，如果您想要更改已样式化的文件输入伪造的外观，或者在用户选择文件时让您的页面以任何方式做出反应，可以使用change事件来实现。以下示例将在带有ID为
image-preview的img标签中显示用户即将上传的图像（这在IE 10以下的浏览器中不起作用）：
$('input[type=file]').change(function () {
var input = $(this);
if (input[0].files && input[0].files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image-preview')
.attr('src', e.target.result);
};
reader.readAsDataURL(input[0].files[0]);
}
});
如果您想使用JavaScript在某个地方显示文件名，您也可以访问该文件名：
$('input[type=file]').change(function () {
var input = $(this);
if (input[0].files && input[0].files[0]) {
var file = input[0].files[0]
if (file) {
$('#filename').html(file.name);
}
}
});
使用这些，您可以制作一个非常漂亮且功能正常的上传按钮。我还建议在不支持文件上传的浏览器上使用特征检测并隐藏所有内容（看着你，旧版IOS！）
文件上传功能检测示例：
function checkForInputFile() {
var elem = document.createElement("input");
elem.type = "file";
if (elem.disabled) return false;
try {
elem.value = "Test";
return elem.value != "Test";
} catch(e) {
return elem.type == "file";
}
}
if(checkForInputFile()){
console.log('i support file input type!');
} else {
console.log('i dont :(');
}
（以上内容基于此正确答案：检测是否支持<input type="file" />）
最后，如果我们想要一个按钮来清除文件类型输入怎么办？出于安全原因，这并不容易。但是这是可能的！这个解决方案是我最喜欢的：使用jQuery清除<input type='file' />
如果您懒得打开链接，这里有一个示例，使用我的示例HTML，假设我们在页面上添加了一个ID为remove-file的链接：
function resetFormInputElement(e){
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
}
$('a#remove-file').click(function () {
resetFormInputElement($('.fileupload input'));
return false;
});
以下是GMail的示例：
