阿强爱分享> 获得复制的图片，但是并没有做到上传，所以，今天就做上传。
## Start
先新建一个页面
由于粘贴上传的操作都是在JavaScript里面完成的，所以只需要写JavaScript即可
对了，由于上传需要进行Ajax所以我们导入jquery。
### 导入jquery
- <script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
复制代码
### 全局粘贴事件
先写事件：
- <body>
- // 1.导入jquery
- <script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
- //写JavaScript
- <script>
- //2.写全局粘贴事件
- $(‘html’).on(‘paste’, function () {
- });
- </script>
- </body>
复制代码
### 获取文件并打印
然后在写获取文件并打印。
- <body>
- // 1.导入jquery
- <script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
- //写JavaScript
- <script>
- //2.写全局粘贴事件
- $(‘html’).on(‘paste’, function (e) {
- //3.获取文件并打印
- var fil = event.clipboardData.items[0].getAsFile();
- console.log(fil);
- });
- </script>
- </body>
复制代码
### 新建构造函数
未出现问题，然后就是上传了，新建构造函数`FormData`并把获取到的文件放进去:
- // 1.导入jquery
- <script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
- //写JavaScript
- <script>
- //2.写全局粘贴事件
- $(‘html’).on(‘paste’, function (e) {
- //3.获取文件并打印
- var fil = event.clipboardData.items[0].getAsFile();
- console.log(fil);
- //4.新建构造函数,存到data中
- var data = new FormData();
- //4.1把 fil 放到 data 里面去
- data.append(“image”,fil);
- });
- </script>
复制代码
### 发起Ajax请求上传
然后发起Ajax请求上传文件
- // 1.导入jquery
- <script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
- //写JavaScript
- <script>
- //2.写全局粘贴事件
- $(‘html’).on(‘paste’, function (e) {
- //3.获取文件并打印
- var fil = event.clipboardData.items[0].getAsFile();
- console.log(fil);
- //4.新建构造函数,存到data中
- var data = new FormData();
- //4.1把 fil 放到 data 里面去
- data.append(“image”,fil);
- //5. 发起Ajax请求上传文件
- $.ajax({
- method: ‘POST’,// 请求类型 POST
- url: ‘https://ddp.ink/api/upload’, // api 地址
- data: data, //data是存的图片数据
- dataType: “json”,//服务器返回类型为 json
- //contentType 内容的编码类型。为 false 时将不设置 Content-Type。
- contentType: false,
- //processData 是否把传递进来的数据转换成查询字符串发送 设置false 否。
- processData: false,
- //success 成功返回
- success: function (response) {
- //打印成功后返回的数据
- console.log(response);
- }
- });
- });
- </script>
复制代码
`contentType`需要设置为`false` 因为不需要设置 `contentType`
`processData`需要设置为`false` 因为不需要转换
然后打印一下成功后返回的数据：
准确无误。
修改一下log的打印数据
顺利拿到链接。基本就结束了，下面贴上文件方便下载。
## 下载链接
[https://library.4z1.cn/Program/test.html.zip](https://library.4z1.cn/Program/test.html.zip)
在线演示地址：
https://www.4z1.cn/dp/Nice_Pic_Test.html
(F12打开控制台查看)
当然，这边还做了个美化版的Api上传
