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

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

WBOY
Freigeben: 2016-06-13 09:04:29
Original
1467 Leute haben es durchsucht

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);

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage