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

老狼8848

已于 2023-05-10 15:57:06 修改

阅读量170

点赞数

分类专栏： discuz 文章标签： discuzX3.5 粘贴图片上传

于 2023-05-10 09:13:48 首次发布

本文链接：https://blog.csdn.net/bq_cui/article/details/130593228

版权

discuz 专栏收录该内容

93 篇文章 1 订阅

订阅专栏

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行代码，非常强。

老狼8848

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DiscuzX3.5上传截屏图片并返回图片信息

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

扫一扫