Javascript CSS和<；输入类型='；文件'>；-讨论

我想改变我的输入和浏览按钮的风格，以便在我的网站上上传文件，我一直在阅读这几乎是不可能做到的。很明显，有一些黑客可能有效（未经测试），但在我浪费时间之前，我想问一下为什么专业网站似乎没有问题

当我说“专业”时，我指的是可以上传简历的求职网站、可以上传脚本的编程网站、可以上传试卷的大学网站、政府网站、医生网站等等

我看不到他们使用的黑客来自于一些随机的程序员，这些程序员可能会工作，也可能不会工作，所以他们在做什么，因为他们的网站似乎工作正常，看起来不错

如对此有任何意见，将不胜感激

谢谢

博福特

---

跟进：

谢谢你的输入，但只需给易江一个便条——你贴的那些东西在某种程度上看起来确实很时尚。我在我的网站上有一个，我在5个浏览器中查看了它，我得到的是基本的方形灰色浏览按钮和方形输入字段，两者之间没有空格，而浏览按钮比输入字段稍微高一点，所以它看起来非常破旧。如果我能让它看起来像你的例子，我会欣喜若狂

---

谢谢

首先，这些黑客不仅仅来自任何一个随机程序员，例如，它来自一个受人尊敬的来源，据我所知，它被广泛使用（这里用于图像上传对话框）。另一个示例是为创建的。完全忽略Javascript，您可以看到按钮纯粹是一个

input type=“file”

卡在

div

中

然而，值得注意的是，那里没有你不能忍受的东西。即使是大型站点也使用普通的、未设置样式的文件输入。这是Hotmail的

这是GMail的

---

文件上载字段不能（非常）用CSS设置样式，也不能从JS编写脚本（足以使代理控件实际工作）。虽然您可能会说这些理由有点过分，但这种情况还是有一些合理的安全理由的

更一般地说，无论如何都很难设置文件上传字段的样式，因为您不知道文件上传字段是什么样子。这一切都取决于浏览器。也许您会在左侧看到一个文本字段，在右侧看到一个“浏览”按钮/弹出窗口（在这种情况下，

边框应用于哪个部分？或者两者都适用于哪个部分？）；也许你会在左边看到一个弹出窗口，在右边看到一个状态图标/标签（就像在Safari中一样）；也许你会得到一个拖放字段。或者别的什么。这完全超出你的控制

大多数“专业”网站做两件事之一：

不必在意，只需使用一个普通的非样式文件上传字段。当您请求上传时，可能会出现在弹出的div中（这样至少不会在屏幕上始终不一致）

使用渐进增强技术，以基于Flash的替代上传程序（或者不太常见的Java或Silverlight；将来我们将有更多支持HTML5拖放的浏览器）取代HTML文件上传

有一个详细的黑客，通过使真正的文件上传控件不可见并将其放置在可设置样式的显示控件的顶部来工作。但它确实非常不可靠，这取决于对浏览器文件上传控件大小的猜测，以及对点击的响应位。它不利于可访问性（不能正确响应键盘），不利于可用性（它甚至不能在我完全正常的Firefox上运行），而且我不建议使用它
在这个帖子中发帖，因为它太旧、过时，还有其他人（比如我）可能会在谷歌上找到它，想知道他们能做些什么来创建外观更好的输入[类型=文件]框

简单的回答仍然是：你不能

但是，如果您准备使用一点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>

更重要的是，如果您希望更改样式化文件输入的外观，或者在用户选择文件时让页面以任何方式做出反应，那么可以使用更改事件来实现。以下示例将在id为
图像预览
的img标签中显示用户将要上传的图像（这在IE低于10的情况下不起作用）：

如果要使用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) {
           //Put the file name into a div with the id of 'filename'
           $('#filename').html(file.name);
        }

    }
});

使用所有这些，你可以制作一个非常好的上传按钮，它看起来非常漂亮并且仍然可以工作。我还建议在不支持文件上传的浏览器上使用功能检测并隐藏所有这些内容（看看你，老IOS！）

文件上传功能检测示例：

function checkForInputFile() {
    var elem = document.createElement("input");
    elem.type = "file";
    if (elem.disabled) return false;
    try {
        elem.value = "Test"; // Throws error if type=file is implemented
        return elem.value != "Test";
    } catch(e) {
        return elem.type == "file";
    }
}

if(checkForInputFile()){
    console.log('i support file input type!');
} else {
    console.log('i dont :(');
}

（以上基于此处的正确答案：）

最后，如果我们需要一个按钮来清除文件类型输入，该怎么办？嗯，同样，出于安全考虑，这并不容易。但这是可能的！这个解决方案是我最喜欢的：

如果你懒得打开链接，这里有一个例子，使用我的示例html，假设我们在页面的某个地方添加一个id为
remove file
的链接：

function resetFormInputElement(e){
    e.wrap('<form>').closest('form').get(0).reset();
    e.unwrap();
}
$('a#remove-file').click(function () {
    //Clear input file
    resetFormInputElement($('.fileupload input'));
    return false;
});

函数resetFormInputElement（e）{
e、 换行（“”）.closest（'form'）.get（0.reset（）；
e、 展开（）；
}
$（'a#删除文件'）。单击（函数（）{
//清除输入文件
resetFormInputElement（$（'.fileupload input'））；
返回false；
});
他们也在使用黑客，没什么特别的。步骤1。使用自定义输入文件类型查找所述站点。第二步。检查源代码。如果你不明白，就把网站的链接贴在SO上，问问是怎么做到的。一般来说，任何解决方案都是“肮脏的”。很多网站使用flash上传文件，所以他们可以
function checkForInputFile() {
    var elem = document.createElement("input");
    elem.type = "file";
    if (elem.disabled) return false;
    try {
        elem.value = "Test"; // Throws error if type=file is implemented
        return elem.value != "Test";
    } catch(e) {
        return elem.type == "file";
    }
}

if(checkForInputFile()){
    console.log('i support file input type!');
} else {
    console.log('i dont :(');
}

function resetFormInputElement(e){
    e.wrap('<form>').closest('form').get(0).reset();
    e.unwrap();
}
$('a#remove-file').click(function () {
    //Clear input file
    resetFormInputElement($('.fileupload input'));
    return false;
});