拖拽上传文件

原创已于 2024-06-24 16:47:22 修改 · 270 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2024-04-10 17:09:43 首次发布

本文详细介绍了如何在HTML和CSS的基础上，结合JavaScript实现文件拖拽上传功能，包括使用`<inputtype=file>`标签，自定义样式，以及处理拖放事件的代码示例。

文件拖拽上传

1.可以直接将文件拖拽到 input 标签上,这样样式比较简单

2.使用拖拽API实现，可以自定义样式，以下为相关代码：

在这里插入图片描述

  .upload {
        width: 120px;
        height: 120px;
        border: 1px solid #ddd;
        margin: 50px auto;
        position: relative;
        border-radius: 4px;
      }
      .upload::before,
      .upload::after {
        content: "";
        background: #ccc;
        position: absolute;
        left: 50%;
        top: 50%;
      }
      .upload::after {
        height: 40px;
        width: 2px;
        transform: translate(-1px, -20px);
      }
      .upload::before {
        height: 2px;
        width: 40px;
        transform: translate(-20px, -1px);
      }
      .upload:hover {
        border: 1px dashed lightblue;
      }
      .file {
        /* width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer; */
        display: none;
      }
      .draging {
        background: #dbf3fb;
        border: 1px dashed lightblue;
      }

	<div class="upload" id="upload">
      <input type="file" class="file" id="file" />
    </div>

	//   const file = document.getElementById("file");
      //   file.onchange = function () {
      //     alert("文件上传中");
      //   };
      const upload = document.getElementById("upload");
      upload.onclick = function () {
        file.click();
      };
      upload.ondragenter = function (e) {
        e.preventDefault();
        e.target.classList.add("draging");
      };
      upload.ondragover = function (e) {
        //div 默认不允许退拽到它上面，需要阻止默认行为
        e.preventDefault();
      };
      upload.ondrop = function (e) {
        //默认退拽文件到div上回打开该文件，需要阻止默认行为
        e.preventDefault();
        e.target.classList.remove("draging");
        const types = e.dataTransfer.types; //拖拽的内容 类型
        //拖拽的不是文件
        if (!types || !types.includes("Files")) {
          return;
        }        
       const fileArr = e.dataTransfer.files; //可以拖拽多个文件      
        if (fileArr && fileArr.length) {
          const reader = new FileReader();
          const curFile = fileArr.item(0);
          if (curFile.type === "text/plain") {
            reader.onload = function (event) {
              console.log(event.target.result);
            };
            //文本文件
            reader.readAsText(curFile);
          } else if (curFile.type === "image/jpeg") {
            reader.onload = function (event) {
              //console.log(event.target.result);
              document.querySelector("#imgView").src = event.target.result;
            };
            reader.readAsDataURL(curFile);
          }
        }
      };
      upload.ondragleave = function (e) {
        e.preventDefault();
        e.target.classList.remove("draging");
      };