> 获得复制的图片,但是并没有做到上传,所以,今天就做上传。
## 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上传