input file自定义按钮美化(演示)

自定义input type="file"按钮的美化可以帮助提升用户在网站或应用中的体验，下面详细介绍一下具体实现过程。

步骤一：隐藏原生input请选择文件按钮

我们需要先将原生的input type="file"按钮隐藏掉，但是保留它的点击事件，这样才能实现自定义按钮后可以正常选择本地文件。可以通过以下CSS代码来实现：

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

这段代码会将所有的input type="file"元素隐藏掉。

步骤二：创建自定义按钮元素

接下来，我们需要创建一个自定义的按钮元素，用于替代原生的input type="file"按钮。这个按钮可以是一个普通的按钮，也可以是一个a标签、span标签等等。

以一个普通的按钮为例，代码如下：

<button id="custom-file-upload">选择文件</button>

步骤三：绑定点击事件和实现选择文件功能

我们需要为自定义按钮绑定一个点击事件，这个事件需要触发真正的input type="file"按钮选择文件的功能。

document.getElementById('custom-file-upload').addEventListener('click', function() {
  document.querySelector('input[type="file"]').click();
});

这段代码会在自定义按钮被点击时触发input type="file"按钮的click事件，从而弹出文件选择窗口。

步骤四：实现文件选中后的界面显示

当用户选择了一个文件后，我们需要将该文件的路径显示出来，用于提醒用户当前选择的文件。我们可以使用一个带有id的span标签来显示文件路径，同时通过JavaScript获取input type="file"按钮的value值来更新span标签的显示内容。

<button id="custom-file-upload">选择文件</button>
<span id="file-path"></span>

document.getElementById('custom-file-upload').addEventListener('click', function() {
  document.querySelector('input[type="file"]').click();
});

document.querySelector('input[type="file"]').addEventListener('change', function() {
  var filePath = this.value;
  document.getElementById('file-path').innerHTML = filePath;
});

这段代码会在input type="file"按钮的值发生变化时触发change事件，然后获取该按钮的value值，用于更新span标签的内容。

示例一：自定义上传图片按钮

<button id="custom-image-upload">上传图片</button>
<span id="image-preview"></span>
<input type="file" id="image-input" accept="image/*">

<script>
document.getElementById('custom-image-upload').addEventListener('click', function() {
  document.getElementById('image-input').click();
});

document.getElementById('image-input').addEventListener('change', function() {
  var file = this.files[0];
  if (file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
      var dataURL = reader.result;
      var imgPreview = document.getElementById('image-preview');
      imgPreview.innerHTML = '<img src="' + dataURL + '" alt="图片预览">';
    };
  }
});
</script>

这段代码会创建一个自定义的上传图片按钮，当用户选择了一张图片后，会将该图片在页面上进行简单的预览。

示例二：自定义上传音频按钮

<button id="custom-audio-upload">上传音频</button>
<span id="audio-preview"></span>
<input type="file" id="audio-input" accept="audio/*">

<script>
document.getElementById('custom-audio-upload').addEventListener('click', function() {
  document.getElementById('audio-input').click();
});

document.getElementById('audio-input').addEventListener('change', function() {
  var file = this.files[0];
  if (file) {
    var audioPreview = document.getElementById('audio-preview');
    audioPreview.innerHTML = '<audio src="' + URL.createObjectURL(file) + '" controls></audio>';
  }
});
</script>

这段代码会创建一个自定义的上传音频按钮，当用户选择了一个音频文件后，会将该音频在页面上进行简单的预览。