js实现文件上传表单域美化特效

下面是“js实现文件上传表单域美化特效”的完整攻略：

1. 简介

在网页中，文件上传表单域通常都比较难看，这时候我们可以用JS来美化一下。通过JS操作DOM元素，使文件上传表单域看起来更加美观。在本篇攻略中，我们将使用两个示例来说明如何用JS实现文件上传表单域美化特效。

2. 示例1

2.1 HTML结构

<div class="file-upload">
  <label for="upload-file">选择文件</label>
  <input type="file" id="upload-file" name="file" onchange="handleUploadChange(this)" />
</div>

2.2 CSS样式

.file-upload {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 1em;
  background-color: #2196F3;
  color: #fff;
  padding: 8px 15px;
  border-radius: 5px;
  transition: all .2s ease-in-out;
}

.file-upload:hover {
  background-color: #ff9800;
}

input[type="file"] {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

2.3 JS代码

function handleUploadChange(input) {
  var fileName = '';

  if(input.files && input.files.length > 1) {
    fileName = input.files.length + ' files selected';
  } else if(input.files && input.files.length == 1) {
    fileName = input.files[0].name;
  }

  var label = input.parentNode.querySelector('label');

  if(label) {
    label.innerHTML = fileName;
  }
}

2.4 示例说明

示例1中，我们使用CSS设置了文件上传表单域的样式，通过JS来实现文件上传表单域的美化。通过点击label标签，可以实现选择文件的功能。在文件上传表单域的change事件中，我们会拿到上传的文件，根据文件数量和名称去更新label标签展示的文件信息。

3. 示例2

3.1 HTML结构

<div class="upload-container">
  <img src="https://dummyimage.com/300x200/000/fff" alt="" id="upload-img" />
  <label for="upload-file">选择图片</label>
  <input type="file" id="upload-file" name="file" class="upload-file" onchange="handleUploadChange(this)" />
</div>

3.2 CSS样式

.upload-container {
  position: relative;
  width: 300px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  margin: 0 auto;
  background-color: #f5f5f5;
  border: 1px solid #eee;
  overflow: hidden;
}

.upload-container label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
  font-size: 1em;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  transition: all .2s ease-in-out;
}

.upload-container label:hover {
  background: rgba(0, 0, 0, .5);
}

.upload-container img {
  max-width: 100%;
  height: auto;
}

3.3 JS代码

function handleUploadChange(input) {
  if(input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      var img = input.parentNode.querySelector('img');

      if(img) {
        img.setAttribute('src', e.target.result);
      }
    }

    reader.readAsDataURL(input.files[0]);
  }
}

3.4 示例说明

示例2中，我们通过CSS样式设置了一个300px*200px的div容器，用于显示上传图片的预览效果，再通过JS和FileReader来实现图片的预览功能。在文件上传表单域的change事件中，获取文件并使用FileReader来读取文件。在读取完成后，更新img标签的src属性，实现图片预览。

4. 总结

通过上述两个示例，我们可以看到，用JS实现文件上传表单域美化特效并不难，只需动手写一些DOM操作的代码，就可以实现很多想象中的效果。当然，这只是很小的一部分，还有很多有趣的事情在等待你去做！