input file上传文件样式支持html5的浏览器解决方案

针对“input file上传文件样式支持html5的浏览器解决方案”的问题，我准备提供以下的攻略：

针对“input file上传文件样式支持html5的浏览器解决方案”的问题，我准备提供以下的攻略：

1. input file 元素

input file 元素是 HTML 5 提供的一种表单元素，用于让用户上传文件。在 HTML 5 中，可以使用以下的代码将 input file 元素添加到网页中：

<input type="file" name="file">

其中，name 属性是必需的，它用于设置上传文件时的参数名。

但是，HTML 5 中的 input file 元素在样式上是比较固定的，不能够像其他表单元素一样定制样式。因此，如果我们想要自定义 input file 的样式，就需要借助一些技巧和工具。

2. 通过 CSS 改变 input file 元素的样式

我们可以通过以下的 CSS 代码来改变 input file 元素的样式：

input[type="file"] {
    display: none;
}

.custom-upload-button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.custom-upload-button input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    font-size: 100px;
    cursor: pointer;
}

其中，我们将 input[type="file"] 设置为 display:none，然后通过一个自定义的 button 代替它。当这个 button 被点击时，就会触发 input[type="file"] 的 click 事件，从而弹出文件选择框。

以下是一个例子：

<div>
  <label for="upload-file" class="custom-upload-button">
    选择文件
    <input type="file" id="upload-file" name="upload-file">
  </label>
</div>

通过这种方式，我们可以自定义 input file 元素的样式。

3. 使用第三方库

除了自己写 CSS 之外，我们还可以使用一些第三方库来快速实现自定义 input file 的样式。常见的库包括 jQuery File Upload、FineUploader 和 Dropzone 等。

以 jQuery File Upload 为例，我们只需要在网页中引入相应的 JS 和 CSS 文件，然后再调用初始化函数即可：

<input id="fileupload" type="file" name="files[]" multiple>
<div id="progress"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.fileupload.js"></script>
<link rel="stylesheet" href="jquery.fileupload.css">

<script>
$(function () {
    $('#fileupload').fileupload({
        url: '/upload',
        dataType: 'json',      
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        }
    });
});
</script>

其中，url 参数是上传文件的 API 地址，done 函数是文件上传完成后的回调函数。通过这种方式，我们可以快速实现一个具有自定义样式的文件上传控件。

综上所述，我们可以通过以上两种方式来实现 input file 上传文件样式支持 html5 的浏览器解决方案，具体的选择需根据项目需求进行。