css3文件上传

CSS3文件上传是一种利用CSS3技术实现的文件上传功能，以往的文件上传往往依靠Flash或者Java等插件来实现，但是这些插件需要额外的安装和支持，而且兼容性不够稳定，难以支持移动端设备的上传，而CSS3文件上传则可以在所有现代浏览器上良好地支持文件上传功能。

/* 普通状态样式 */.upload-box {
    width: 100%;
    height: 60px;
    border: 2px dashed #ddd;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    color: #666;
    line-height: 60px;
    cursor: pointer;
}
.upload-box:hover {
    border: 2px dashed #4d90fe;
    color: #4d90fe;
}
/* 拖拽状态样式 */.upload-box.drag-over {
    border: 2px dashed #4d90fe;
    color: #4d90fe;
}
/* 隐藏input标签 */.upload-input {
    display: none;
}
    

CSS3文件上传的样式效果是通过CSS3的伪类和属性选择器来实现的，在上传框的基础上，加上拖拽状态的样式和隐藏input标签来实现。

文件上传的JavaScript代码也非常简单：

const uploadBox = document.querySelector('.upload-box')const uploadInput = document.querySelector('.upload-input')uploadBox.addEventListener('click', () =>
{
uploadInput.click()}
    )uploadBox.addEventListener('dragover', (e) =>
{
e.preventDefault()uploadBox.classList.add('drag-over')}
    )uploadBox.addEventListener('dragleave', () =>
{
uploadBox.classList.remove('drag-over')}
    )uploadBox.addEventListener('drop', (e) =>
{
e.preventDefault()uploadBox.classList.remove('drag-over')console.log(e.dataTransfer.files[0])}
    )

上述JavaScript代码实现了文件上传框的点击和拖拽上传功能，并可以将上传的文件信息打印在控制台上。

综上所述，CSS3文件上传技术的出现不仅大大简化了文件上传的实现过程，还可以通过CSS3的样式效果来提高用户体验，从而提高网站的用户满意度和使用率，是一种非常值得推广的技术。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！