目录
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行代码,非常强。