先上代码
- 1.前台图片上传代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>发表话题</title>
<link href="__PUBLIC__/Home/css/topic.css" rel="stylesheet">
<script src="__PUBLIC__/Home/js/jquery.min.js"></script>
</head>
<style media="screen">
.say{
width: 100%;
font-size: 2.2rem;
text-align: center;
line-height: 7rem;
text-decoration: none;
color: white;
display: block;
background-color: #ff5711;
border-radius: 40px;
}
</style>
<script type="text/javascript">
function up(){
var num=$('input').size();
if(num==7){
alert('最多上传6张图片~');
return ;
} else if(num == 1) {
var input = document.createElement("input");
var num=$('input').size();
alert(num);
input.type = 'file';
input.name = 'photo[]';
input.style.display ='none';
// input.setAttribute("onchange",PreviewImage);
var picInut = document.getElementById('picInput');
picInut.appendChild(input);
$('input:last').on('change',function(){
PreviewImage(this);
});
$('input:first').click();
}else{
$('input:last').click();
var input = document.createElement("input");
input.type = 'file';
input.name = 'photo[]';
input.style.display ='none';
// input.setAttribute("onchange",PreviewImage);
var picInut = document.getElementById('picInput');
picInut.appendChild(input);
$('input:last').on('change',function(){
PreviewImage(this);
});
}
}
// 预览图片js
function PreviewImage(imgFile)
{
var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
filextension=filextension.toLowerCase();
if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
{
alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
imgFile.focus();
}
else
{
var path;
if(document.all)//IE
{
imgFile.select();
path = document.selection.createRange().text;
document.getElementById("imgPreview").innerHTML="";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果
}
else//FF
{
path=window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上
//path = imgFile.files[0].getAsDataURL();// FF 3.0
$('#imgPreview').append("<img id='img1' width='160px' height='130px' src='"+path+"'/>");
//document.getElementById("img1").src = path;
}
}
}
function IsNull(str) {
return (Trim(str) == "") ? false : true;
}
function Trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
function replaceHTML(str){
str = str.replace(/<[^>].*?>/g,"");
str = str.replace(/ /g,"");
return str;
}
function sm(){
var content = document.getElementById("send_content").value;
if(!IsNull(replaceHTML(content))){
alert('请填写内容');
return false;
}
}
</script>
<body>
<div id="all">
<div id="title">
<div id="zuojianjiao">
<p style="line-height:8rem;">
<a href="{:U('Comment/index')}">
<img src="__PUBLIC__/Home/img/qietu/secondphonerecover/second_01.jpg" style="margin-left:1rem;">
</a>
</p>
</div>
<div>
<p style="line-height:8rem;">
发布
</p>
</div>
</div>
<!---------------------------------->
<form id="form" method="post" enctype="multipart/form-data" >
<div class="textarea">
<textarea id="send_content" name="content" placeholder="你想说点什么..."></textarea>
</div>
<!-- 图片上传 -->
<div class="pick_img" id="picInput">
<input id="upimg" type="file" name="photo[]" value="" style="display:none;" onchange="PreviewImage(this);" multiple="multiple">
<div id="imgPreview" style='float: left;'>
</div>
<img src="__PUBLIC__/Home/img/qietu/comment/add.png" alt="" onclick="up();">
</div>
<div class="line">
</div>
<div class="bottom">
<button onclick="sm();" name="button" class="say">确认发表</button>
</div>
</form>
</div>
<!-- 图片预览js -->
<script>
function addPic1(){
var addBtn = document.getElementById('addBtn');
var input = document.createElement("input");
input.type = 'file';
input.name = 'myfile[]';
var picInut = document.getElementById('picInput');
picInut.appendChild(input);
if(picInut.children.length == 3){
addBtn.disabled = 'disabled';
}
}
</script>
</body>
</html>
- 2.css代码
*{ list-style: none; }
body{ margin: 0; padding: 0; }
#all{ min-height:108rem; _min-height:108rem; }
p{ margin: 0; padding: 0; }
#title{
width: 100%;
height: 8rem;
background-color: #f8f8f8;
color: #e95011;
font-size: 42px;
text-align: center;
line-height: 9rem;
}
#zuojianjiao{
width: 10%;
float: left;
height: 100%;
}
#title div:nth-child(2){
width: 80%;
height: 8rem;
float: left;
color: #e95011;
margin: 0 auto;
font-weight: bold;
}
/*-------------------------------*/
.textarea{
width: 91%;
min-height:20rem;
/*border: 0.1rem solid #dcdcdc;*/
margin: 0 auto;
margin-top: 5rem;
}
.textarea textarea{
width: 100%;
min-height: 20rem;
font-size: 3.2rem;
border: 0.1rem solid white;
}
.bottom{
width: 85%;
height: 7rem;
margin: 0 auto;
margin-top:46rem;
}
.bottom a{
width: 100%;
font-size: 2.2rem;
text-align: center;
line-height: 7rem;
text-decoration: none;
color: white;
display: block;
}
/*图片样式*/
.pick_img{
width: 91%;
margin: 0 auto;
padding-bottom: 2rem;
}
.line{
border-bottom: 1px solid grey;
}
3.php后台存储代码
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->savePath = 'comment/'; // 设置附件上传目录
$info=array();
foreach ($_FILES['photo']['name'] as $key=>$value){ //photo 为前端name字段名称
$file1=array();
$file1["photo"]['name']=$value;
$file1["photo"]['type']=$_FILES['photo']["type"][$key];
$file1["photo"]['tmp_name']=$_FILES['photo']["tmp_name"][$key];
$file1["photo"]['error']=$_FILES['photo']["error"][$key];
$file1["photo"]['size']=$_FILES['photo']["size"][$key];
$info = $upload->upload();
foreach ($info as $key=>$value)
{
$a.="#"."/yikuai/Uploads/".$value['savepath'].$value['savename'];//我用符号把图片路径拼起来
}
}
$data["intro_pic"]=substr($a,1);
$info1 = $upload->upload();
foreach ($info1 as $key=>$value)
{
$data["$key"]=$value['savepath'].$value['savename'];
}
$imgurl = $data["intro_pic"];
4.php前台模板输出
foreach ($list as $key => $value) {
$v=explode('#',$value['cimg']);
$list[$key]['cimg']=$v; //重写字段很重要~~~ $list[$key]['cimg] 不能写成 $value['cimg'];
}
5.前台模板输出图片
<foreach name="la['cimg']" item="ccimg">
<img class="c_img_detail" src="{$ccimg}" alt="">
</foreach>
ps:图片输出样式注意在没有图片输出的情况下 —-为了去掉无图片下的边框
img[src=""]{
opacity: 0;
height: 0rem;
}
- 后台代码(未完成)
- 先创建出节点。
- 为节点绑定onchange函数,执行previewImg()函数。
- 特别注意传入this对象(当前所执行节点的对象)。
- 限制只能传入6张图片。
- 还未完成~明天继续~
- 有同行的菜鸟一起吗~