[分享]css写qq的图片上传效果

在网页开发中，经常需要实现图片上传的功能。而QQ的图片上传效果是比较人性化的，当鼠标移动到上传区域时，会有一个灰色的区域出现，提示用户将图片拖拽到该区域上传。这个效果的实现可以使用CSS3的一些新特性...

在网页开发中，经常需要实现图片上传的功能。而QQ的图片上传效果是比较人性化的，当鼠标移动到上传区域时，会有一个灰色的区域出现，提示用户将图片拖拽到该区域上传。这个效果的实现可以使用CSS3的一些新特性来完成。

/*定义上传区域的样式*/
.upload-area {
  border: 2px dashed #ccc;
  width: 300px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  font-size: 20px;
  font-weight: bold;
  color: #999;
  cursor: pointer;
}

/*定义上传区域拖拽时的样式*/
.upload-area.dragover {
  border-color: #333;
  background: rgba(255, 255, 255, 0.2);
} 

以上是上传区域的CSS样式，其中使用了border、width和height属性定义了上传区域的大小和样式，text-align和line-height属性实现了文本在上传区域的居中对齐、大小为200px的行高，font-size和font-weight属性用于设置文字大小和加粗，color属性设置了文字颜色，最后使用了cursor: pointer属性将鼠标指针设为手形。

接下来，我们需要使用JavaScript来实现拖拽上传的效果：

var uploadArea = document.querySelector('.upload-area');

uploadArea.addEventListener('dragover', function(e) {
  e.preventDefault();
  uploadArea.classList.add('dragover');
});

uploadArea.addEventListener('dragleave', function(e) {
  uploadArea.classList.remove('dragover');
});

uploadArea.addEventListener('drop', function(e) {
  e.preventDefault();
  uploadArea.classList.remove('dragover');

  //实现上传文件的逻辑
}); 

以上代码定义了三个事件监听器，分别监听上传区域的拖拽进入、拖拽离开和拖拽放置事件。其中，在拖拽进入事件中我们给上传区域设置一个类名为'dragover'，用于在CSS中定义拖拽时的样式。在拖拽离开事件中，我们将'dragover'类名移除，以便后续操作。最后，在拖拽放置事件中，我们需要实现上传文件的逻辑。

通过使用CSS和JavaScript，我们就可以实现类似QQ的图片上传效果，提高用户的上传体验。