文件拖拽上传

不减20斤不改头像
198 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 20 天，点击查看活动详情

###基于拖拽事件上传

案例是在react中，html结构如下。样式暂时忽略

    <div className="item">
      <h3>拖拽上传</h3>
      <section
        onDragEnter={handleDragEnter}
        onDragLeave={handleDargLeave}
        onDragOver={handleDargOver}
        onDrop={handleDarp}
        className="upload_box"
        id="upload6">
        <input
          ref={input1}
          type="file"
          onChange={handleChange1}
          className="upload_inp"
        />
        <div className="upload_drag">
          <i className="icon"></i>
          <span className="text">
            将文件拖到此处，或
            <span
              onClick={() => input1.current.click()}
              className="upload_submit">
              点击上传
            </span>
          </span>
        </div>
        {updateIng && <div className="upload_mark">正在上传中，请稍等...</div>}
      </section>
    </div>

样式自己写，大概写成如下

image.png 虚线部分是section盒子，就是拖拽到这里就会实现上传，那就要监听它的拖拽事件了 第一个方法是handleDragEnter,当拖拽元素或者其他文件到这个容器时触发，本案例中不使用此hook, 第二个方法是和第一个方法对应的，拖拽的主体离开当前容器时触发，本案例也没有使用 第三个方法是 拖动的元素位于放置目标上方 这个方法需要阻止默认动作（不阻止就会触发浏览器下载这个文件的动作）

  const handleDargOver = (e) => {
    e.preventDefault()
  }

第四个方法是最重要的方法，不阻止这个默认动作就会触发浏览器打开这个文件的动作， 然后这个方法和其他事件一样，接收一个事件对象e,e.dataTransfer.files 就是拖拽的文件对象的集合，我们这个例子上传第一个就行了

  const handleDarp = (e) => {
    handleUploadSingle(e.dataTransfer.files[0])
    e.preventDefault()
  }

拿到了文件对象，剩下的上传文件就按正常的formdata上传就行了

拖拽事件

文件拖拽上传，之前一直觉得是个很吊的功能呢，觉得很神奇。不过今天学习了一下才知道，这很简单，简单的不想活了。

当可拖动选择被放置在目标上ondrop时发生该事件。****

拖放是 HTML 中的一项常见功能。这是当您“抓取”一个对象并将其拖到不同的位置时。

要使元素可拖动，请使用可拖动属性。

链接和图片默认是可拖动的，不需要draggable属性。

拖动事件

在可拖动元素上：

EventOccurs When
ondragAn element is being dragged
ondragstartThe user starts to drag an element
ondragendThe user has finished dragging an element

在放置目标上：

事件发生时间
ondragenter拖动的元素进入放置目标
ondragleave拖动的元素离开放置目标
ondragover拖动的元素位于放置目标上方
ondrop拖动的元素落在目标上

也可以看看：

avatar
文章
阅读
粉丝