CSS交互式上传动画界面

一款CSS交互性上传多文件的动画特效，支持拖放文件和点击浏览文件，逐个显示文件的上传进度和状态，整个过程的动画显示比较流畅，交互体验还是相当不错的哦！

分类：表单代码 > 图片上传难易：初级

查看演示下载资源下载积分： 30 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分需要引入字体样式库font-awesome.4.6.0.css和jquery库，页面各元素的CSS样式也需要设置好，各种CSS选择器、动画效果等等，部分代码如下：

.upload {
  position: relative;
  width: 400px;
  min-height: 445px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding-bottom: 20px;
  background: #fff;
  -webkit-animation: fadeup .5s .5s ease both;
          animation: fadeup .5s .5s ease both;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
}
.upload .upload-files header {
  background: #4db6ac;
  text-align: center;
}
.upload .upload-files header p {
  color: #fff;
  font-size: 30px;
  margin: 0;
  padding: 50px 0;
}
.upload .upload-files header p i {
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
  font-size: 30px;
  -webkit-animation: fadeup .5s 1s ease both;
          animation: fadeup .5s 1s ease both;
}
.upload .upload-files header p .up {
  /*font-weight: bold;*/
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  display: inline-block;
  opacity: 0;
  -webkit-animation: faderight .5s 1.5s ease both;
          animation: faderight .5s 1.5s ease both;
}
.upload .upload-files header p .load {
  display: inline-block;
  font-weight: 100;
  /*margin-left: -8px;*/
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  opacity: 0;
  -webkit-animation: faderight 1s 1.5s ease both;
          animation: faderight 1s 1.5s ease both;
}
.upload .upload-files .body {
  text-align: center;
  padding: 50px 0;
  padding-bottom: 30px;
}
.upload .upload-files .body.hidden {
  display: none;
}
.upload .upload-files .body input {
  visibility: hidden;
}
.upload .upload-files .body i {
  font-size: 65px;
  color: lightgray;
}
.upload .upload-files .body p {
  font-size: 14px;
  padding-top: 15px;
  line-height: 1.6;
}
.upload .upload-files .body p b,
.upload .upload-files .body p a {
  color: #4db6ac;
  text-decoration: none;
}
.upload .upload-files .body.active {
  border: dashed 2px #4db6ac;
}
.upload .upload-files .body.active i {
  box-shadow: 0 0 0 -3px #fff, 0 0 0 lightgray, 0 0 0 -3px #fff, 0 0 0 lightgray;
  -webkit-animation: file .5s ease both;
          animation: file .5s ease both;
}
@-webkit-keyframes file {
  50% {
    box-shadow: -8px 8px 0 -3px #fff, -8px 8px 0 lightgray, -8px 8px 0 -3px #fff, -8px 8px 0 lightgray;
  }
  75%,
          100% {
    box-shadow: -8px 8px 0 -3px #fff, -8px 8px 0 lightgray, -16px 16px 0 -3px #fff, -16px 16px 0 lightgray;
  }
}
@keyframes file {
  50% {
    box-shadow: -8px 8px 0 -3px #fff, -8px 8px 0 lightgray, -8px 8px 0 -3px #fff, -8px 8px 0 lightgray;
  }
  75%,
          100% {
    box-shadow: -8px 8px 0 -3px #fff, -8px 8px 0 lightgray, -16px 16px 0 -3px #fff, -16px 16px 0 lightgray;
  }
}

页面的body部分也并不复杂，分别设置好header和footer里的各元素，其余的就交给javascript吧，代码如下：

<div class="upload">
 <div class="upload-files">
  <header>
   <p>
    <i class="fa fa-cloud-upload" aria-hidden="true"></i>
    <span class="up"></span>
    <span class="load">文件上传</span>
   </p>
  </header>
  <div class="body" id="drop">
   <i class="fa fa-file-text-o pointer-none" aria-hidden="true"></i>
   <p class="pointer-none"><b>拖放文件到这里</b><br> 或 <a href="" id="triggerFile">点此选择文件</a></p>
			<input type="file" multiple="multiple" />
  </div>
  <footer>
   <div class="divider">
    <span><AR>文件列表</AR></span>
   </div>
   <div class="list-files">
    <!--   template   -->
   </div>
			<button class="importar">继续上传</button>
  </footer>
 </div>
</div>

底部的javascript代码主要是遍历显示多文件的名称、进度条和完成状态，对click、change等事件做出响应，不需要太好的javascript基础都能读懂的，部分代码如下：

// trigger input
	$("#triggerFile").addEventListener("click", evt => {
		evt.preventDefault();
		$("input[type=file]").click();
	});

	// drop events
	$("#drop").ondragleave = evt => {
		$("#drop").classList.remove("active");
		evt.preventDefault();
	};
	$("#drop").ondragover = $("#drop").ondragenter = evt => {
		$("#drop").classList.add("active");
		evt.preventDefault();
	};
	$("#drop").ondrop = evt => {
		$("input[type=file]").files = evt.dataTransfer.files;
		$("footer").classList.add("hasFiles");
		$("#drop").classList.remove("active");
		evt.preventDefault();
	};

	//upload more
	$(".importar").addEventListener("click", () => {
		$(".list-files").innerHTML = "";
		$("footer").classList.remove("hasFiles");
		$(".importar").classList.remove("active");
		setTimeout(() => {
			$("#drop").classList.remove("hidden");
		}, 500);
	});

	// input change
	$("input[type=file]").addEventListener("change", handleFileSelect);