Home > php教程 > php手册 > php实现粘贴截图并完成上传功能

php实现粘贴截图并完成上传功能

WBOY
Release: 2016-06-13 09:04:29
Original
1470 people have browsed it

php实现粘贴截图并完成上传功能

   今天发现segmentfault的评论留言里面可以粘贴上传图片,于是研究了下怎么实现的!

  原理很简单其实就是监控粘贴事件,然后检测是否粘贴的东西里面有图片,有的话直接触发ajax上传

  代码可以直接运行,有兴趣你们可以试试

  ?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

header("Access-Control-Allow-Origin:*");

$url = 'http://'.$_SERVER['HTTP_HOST'];

$file = (isset($_POST["file"])) ? $_POST["file"] : '';

if($file)

{

$data = base64_decode(str_replace('data:image/png;base64,', '', $file)); //截图得到的只能是png格式图片,所以只要处理png就行了

$name = md5(time()) . '.png'; // 这里把文件名做了md5处理

file_put_contents($name, $data);

echo"$url/$name";

die;

}

?>

 

 

 

<script></script>

//查找box元素,检测当粘贴时候,

document.querySelector('#box').addEventListener('paste', function(e) {

 

//判断是否是粘贴图片

if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1)

{

var that = this,

reader = new FileReader();

file = e.clipboardData.items[0].getAsFile();

 

//ajax上传图片

reader.onload = function(e)

{

var xhr = new XMLHttpRequest(),

fd = new FormData();

 

xhr.open('POST', '', true);

xhr.onload = function ()

{

var img = new Image();

img.src = xhr.responseText;

 

// that.innerHTML = '';

document.getElementById("img_puth").value = img.src;

}

 

// this.result得到图片的base64 (可以用作即时显示)

fd.append('file', this.result);

that.innerHTML = '';

xhr.send(fd);

}

reader.readAsDataURL(file);

}

}, false);

  以上所述就是本文的全部内容了,希望大家能够喜欢。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template