[PHP pro留言板相关②]
第三站：为留言板添加表情功能
本来想的是要不就直接用现成的HTML编辑器：可视化HTML编辑器开源软件
连图片上传都可以不用做……但是，算了还是自己做吧。
各种搜发现了一个很符合要求的代码：jquery实现文本框插入表情的特效代码
一直做jquery就像前端的感觉= =。index.html真的很简洁。css布局也超棒，应该学着点吧……
<body> <h3>文本框表情插件,转载于互联网</h3> <h4>整理网站http://www.ablanxue.com</h4> <!--DEMO--> <!--表情盒子--> <div id="Smohan_FaceBox"> <textarea name="text" id="Smohan_text" class="smohan_text"></textarea> <p> <a href="javascript:void(0)" class="face" title="表情"></a> <button class="button" id="Smohan_Showface">显示表情</button> </p> </div> <!--/表情盒子--> <!--解析表情--> <div id="Zones"></div> <!--/DEMO--> <script type="text/javascript"> $(function (){ $("a.face").smohanfacebox({ Event : "click", //触发事件 divid : "Smohan_FaceBox", //外层DIV ID textid : "Smohan_text" //文本框 ID }); //解析表情 $('#Zones').replaceface($('#Zones').html()); }); //Demo测试 $('#Smohan_Showface').click(function() { $('#Zones').fadeIn(360); $('#Zones').html($('#Smohan_text').val()); $('#Zones').replaceface($('#Zones').html());//替换表情 }); </script> </body>整个body就这么点……好好。
CSS note:border-collapse:collapse;
合并边框
<blockquote>HTML5标签：
标签定义块引用。<blockquote> 标签定义块引用。
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
2015/10/30 17:43
不行，妈妈妈妈，我要记住这个函数：htmlspecialchars() 耗费了我一下午的时光！！！
好吧现在的难点如何实现文本的替换。原来是通过JS，但是现在行不通……
那就用php替换，选中了preg_relace函数，要用正则表达式了，有点怕。。
然后果然失败了，又换成str_replace函数，还是失败，很疑惑。
后来果然，替换的时候还有把$pattern换成htmlspecialchars($pattern)………………
好吧好吧，<etm>总是被当成标签直接执行了…………
然后依然报错……
Warning: preg_replace(): Unknown modifier 't'
搜索错误，每次都能在stack overflow里找到差不多的情况，逼我学习英语……
link
总之regex里面不可以再出现“/”，要么就再在前面加个\变成“\ /”
/<emt>(d+)<\/emt>/
regex长这样，问题是，还是没有替换，这么简单的regex我不能出错吧……
后来，问题还是在htmlspecialchars上吧，因为d+无法解析为数字了啊被单纯的理解为了字符串……
好吧那就用str_replace!
七拼八凑，终于成功了妈妈。
哭了好吗
$strcon = str_replace(htmlspecialchars("<emt>"),"<img src='images/face/",$strcon);
$strcon = str_replace(htmlspecialchars("</emt>"),".gif'>",$strcon);
echo $strcon;
凌晨3点，虽然2点才开始弄，睡了睡了
表情虽然好了，但是删除功能不知为何又用不了了，调用语句：
<button onclick="delete_message(this)">删除</button>
看到接受是$_POST，大概知道了了怎么回事在前面加上了一句：
<?=$v['time']?><input type="hidden" id ="hidden" class="message_id" value="<?=$v['id']?>" />
能用，删除value后没效果，所以是这句？
this应该是JS里比较重要的概念了，但是还是= =嗯嗯：link
A function's
thiskeyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.In most cases, the value of
thisis determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called. ES5 introduced thebindmethod to set the value of a function'sthisregardless of how it's called.
第四站：留言板插入本地图片
心累，本来已经上传到数据库了，奈何显示不出来（泪
只好又改成上传到服务器，把路径保存在数据库。
困住难点之一：子窗口控制父窗口的值！
<a style=" margin-left:20px;width:20px; height:20px; background:url(images/imgup.png) no-repeat; float:left;" href="javascript:void(0)" id="imgupload" onclick="openwin()"></a>
function openwin() {
OpenWindow = window.open("", "newwin", "height=100, width=400, top=200em, left=500em,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
//写成一行
OpenWindow.document.write("<TITLE>图片上传</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
// OpenWindow.document.write("<h1>Hello!</h1>")
OpenWindow.document.write(" <form method='POST' action='upload.php' enctype='multipart/form-data'>File: <input type='file' name='file' id='file'/><br><br><input type='submit' value='上传' name='submit' style='width:100px;height:23px'/></form>")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()
}
这里弹出一个上传图片的窗口。
然后是upload.php
<?php
header("content-type:text/html;charset=utf-8");
require 'model.php';
$upTypes = array('image/jpeg','image/pjpeg','image/gif');
$fileSize = $_FILES['file']['size']/1024;
$tmpFile= $_FILES['file']['tmp_name'];
date_default_timezone_set('Asia/Shanghai'); //改变时区
$fileName = date("ymd").mt_rand(10,90)."-".$_FILES['file']['name'];
// print_r ($_FILES);
if (! in_array($_FILES['file']['type'], $upTypes)){
echo "dicrepancies file!";
exit;
}
if ($fileSize > 500) {
echo "file must be less than 500k";
exit;
}else{
$folder = "images/uploads";
if (! file_exists($folder)) {
mkdir($folder);
}
$img_dir = "$folder/$fileName";
}
if(move_uploaded_file($tmpFile, $img_dir)){
echo $fileName,"<p>uploaded successfully!</p>";
}else{
echo "fail to upload";
}
?>
<html>
<head>
</head>
<body>
<script>
function getValue() {
window.opener.document.getElementById('title').value = document.getElementById('picPath').value // 赋值
window.close(); // 关闭窗口
}
</script>
<input type="hidden" id="picPath" value="<?php echo $img_dir;?>"/>
<input type="button" value="插入图片" onclick="getValue()" />
</body>
</html>
赋值的这句很重要啊很重要啊很重要
window.opener.document.getElementById('title').value = document.getElementById('picPath').value
利用input的value属性把图片的路径传到父窗口中。
然后和其他信息一起提交。最后再在index.html中显示！
可以显示又出问题了
echo ' <img src="$picpath" height='200'/>';
没错又是单、双引号的问题！！！！
echo " <img src='$picpath' height='200'/>";
同事说是因为路径中有/，所以会转义？嗯嗯好吧…………
但是echo“”是路径，echo''就是[$picpath]
双引号会经过服务器翻译………………所以是，还是不是很懂。。。。究竟为什么。
然后我把引号去掉了就是src=$picpath，也可以显示！
所以$picpath本身就是字符串。然后外面的echo“”就可以直接执行。试过echo ''是执行不了的。