DiscuzX3.5上传截屏图片并返回图片信息

目录

1 前言

2 网页代码

3 服务器端代码

4 运行结果


1 前言

上一篇测试了图片上传函数:pic_upload,可以一行服务器端代码实现图片保存到相册文件夹,并同时生成指定宽高的缩略图,非常高效的函数。这次测试一下另外一个上传函数:pic_save。

2 网页代码

网页代码跟前一篇完全一样,不用修改。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <script type="text/javascript" src="../../../template/default/style/cat/jquery.min.js"></script>
</head>
 
<body>
<div id="Msg" contentEditable="true" style="width: 600px; height:600px;border: 1px solid pink;"></div>
<script>
	//查找 Msg 元素,检测当粘贴时候,
	document.querySelector('#Msg').addEventListener('paste', function(e) 
	{
		if (!(e.clipboardData && e.clipboardData.items)) {
		   return;
		 }
		 for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
		   var item = e.clipboardData.items[i];
		   console.log(item);
		   if (item.kind === "string") {
			 item.getAsString(function (str) {
			   console.log(str);
			   layer.msg("请粘贴图片上传", {
				 icon: 2,
				 shade: [0.3, '#000'],
				 offset: '15px',
				 time: 1000
			   })
			 })
			 $("#Msg").html(""); //jQuery方法一
		   } else if (item.kind === "file") {
			 var blob = item.getAsFile();
			 console.log('fff:');
			 console.log(blob);
			 if (blob.size === 0) {
			   return;
			 }
			 var data = new FormData();
			 data.append("image", blob);
			 $.ajax({
			   url: '/pastepic.php?ac=up_paste_img',
			   type: 'POST',
			   cache: false,
			   data: data,
			   processData: false,
			   contentType: false,
			   success: function (result) {
				 console.log(result);
				 //if (result.code == "0") {
				   console.log(result.msg)
				   //var html = "<img src=" + result.data + " width='100' height='100'>";
				   //$("#Msg").html(html);
				 //} else {
				   console.log(result.msg)
				 //}
			   }
			 });
		   }
		 }
	}, false);
</script>
 
</body>
</html>
 
 

3 服务器端代码

服务器端代码略作修改:

<?php
// mod文件只能被入口文件引用,不能直接访问
if(!defined('IN_DISCUZ')) {
	exit('Access Denied');
}
require_once libfile('function/discuzcode');
require_once libfile('function/home');
 
$ac = dhtmlspecialchars($_GET['ac']); // 获取数据动作,g1:取得某边界内,某类别的所有点
 
 
if ($ac == 'up_paste_img'){
    //服务器端生成图片
	echo 'will receive up_paste_img';
	//echo $_FILES;
	//print_r(array_values($_FILES));
 
	if(!empty($_FILES)) {
		foreach($_FILES as $varname => $file) {
			if($file['tmp_name']) {
				$result = pic_save($file, 0, 'paste_image', false);
				$pic = 'album/'.$result['picid']; // $albumid
				print_r($result);
				
			}
		}
	}
 
	exit;		
}
elseif ($ac == 'blank'){
    // 网页模板
	include_once template("ccc/pic_paste");
}
 
?>

4 运行结果

浏览器端返回了上传图片处理后的详细信息:

 看一下相册,可以看到这张图片同步保存在了默认相册里面。

 仅仅用了1行代码,非常强。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值