几大API与对象的使用，实现复制粘贴上传，拖拽上传点击打开文件管理器上传图片，并滚轮实现大小变化

我也曾发过光

已于 2023-04-13 22:33:57 修改

阅读量154

点赞数

文章标签：前端 html javascript

于 2023-04-13 22:24:28 首次发布

本文链接：https://blog.csdn.net/weixin_63692030/article/details/130141798

版权

前言

本期是对JS的File对象、DataTransfer对象、Clipboard API，URL.createObjectURL(file) 或 FileReader.readAsDataURL(file)的了解和使用，并基于其基础上，实现实现复制粘贴上传，拖拽上传点击打开文件管理器上传图片，并滚轮实现改变图片的大小的功能。
### JS的File对象
在 HTML 文档中 `<input type="file"> `标签每出现一次，一个 FileUpload 对象就会被创建。
该元素包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。该元素的 value 属性保存了用户指定的文件的名称，但是当包含一个 file-upload 元素的表单被提交的时候，浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。

dataTransfer对象

拖放事件
拖放的过程中被拖放的对象被称为源对象，过拖放过程中间经过的其他对象被称为过程对象，最终到达的对象称作目标对象。
在所有的拖放事件中都提供了一个数据传输对象dataTransfer，主要是用于在源对象和目标对象之间传递数据。

Clipboard API

剪贴板Clipboard API提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取或更改剪贴板内容。

URL.createObjectURL()

简单来说：URL.createObjectURL()处理后生成了一个临时的链接，直接赋值给src就行。

FileReader.readAsDataURL(file)

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，
使用 File 或 Blob 对象指定要读取的文件或数据。简单来说：异步读取指定的Blob中的内容，一旦完成，会返回一个data: URL格式的字符串以表示所读取文件的内容。

这些简单了解一下即可，剩下的主要是实战，废话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传图片</title>
    <link rel="stylesheet" href="./uploadPic.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="../Task2/font2/iconfont.css">
    <link rel="stylesheet" href="./font next-pre/iconfont.css">
    <script src="./uploadPic.js"></script>
</head>
<body id="scroll">
    <div class="previewBox">
        <div id="preBtn"><span class="iconfont icon-pre"></span></div>
        <div id="nextBtn"><span class="iconfont icon-next"></span></div>
        <div class="preview">
            <div id="closeBtn"><span class="iconfont icon-close"></span></div>
            <div class="picBox">
                <img src="https://ts1.cn.mm.bing.net/th/id/R-C.a902a2666359a8cdfdb4a5073d402423?rik=%2fOAi8FFhylA5IQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191203%2f19%2f1575371671-fMmhxsnHNX.jpg&ehk=R7dew66vN%2bgvvyJL3I8BL00tsQwYL%2bv8PIqeUSKgzk4%3d&risl=&pid=ImgRaw&r=0" alt="" id="previewPic">
            </div>
            
        </div>
    </div>
    <input type="file" id="openFile">
    <div id="openBtn">点击上传图片</div>
    <div id="picWall" contenteditable="true">
      <div class="pic">
        <img class="upPic" src="https://ts1.cn.mm.bing.net/th/id/R-C.a902a2666359a8cdfdb4a5073d402423?rik=%2fOAi8FFhylA5IQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191203%2f19%2f1575371671-fMmhxsnHNX.jpg&ehk=R7dew66vN%2bgvvyJL3I8BL00tsQwYL%2bv8PIqeUSKgzk4%3d&risl=&pid=ImgRaw&r=0" alt="">
        <div class="shadowBox">
            <div class="previewBtn"><span class="iconfont icon-fangdajing1-xianxing"></span></div>
            <div class="deleteBtn"><span class="iconfont icon-lajixiang"></span></div>
        </div>
      </div>
    </div>
</body>
</html>

我也曾发过光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
几大API与对象的使用，实现复制粘贴上传，拖拽上传点击打开文件管理器上传图片，并滚轮实现大小变化

本期是对JS的File对象、DataTransfer对象、Clipboard API，URL.createObjectURL(file) 或 FileReader.readAsDataURL(file)的了解和使用，并基于其基础上，实现实现复制粘贴上传，拖拽上传点击打开文件管理器上传图片，并滚轮实现改变图片的大小的功能。拖放的过程中被拖放的对象被称为源对象，过拖放过程中间经过的其他对象被称为过程对象，最终到达的对象称作目标对象。这些简单了解一下即可，剩下的主要是实战，废话不多说，直接上代码。
复制链接

扫一扫