PHP实现上传多图即时显示与即时删除的方法
本文实例讲述了PHP实现上传多图即时显示与即时删除的方法。分享给大家供大家参考,具体如下:
就像这样的,每选择一个图片就会即时显示出来,附加到右边,也可以随意删除一个元素。
其实是,当type=file的input框框的onchange事件===》》》post数据提交到隐藏的ifram(form表单的target指定)===》》》接收到post数据的直接 echo script标签来返回数据到前端页面并且赋值,然后存储图片路径也是用隐藏域实现:
HTML:
<!doctype html> <html lang="cn"> <include file="Public/head"/> <body> <include file="Public/nav"/> <iframe name="upload_url" style="display:none"></iframe> <div class="wlog"> <div class="wlog_t cf"> <b>写日志</b> </div> <div class="wlog_c"> <form class="cf" id="myform" target="" enctype="multipart/form-data" action="" method="post"> <div class="wlog_l"> <textarea id="content" name="data[content]"></textarea> <input type="hidden" id="step" value="1" name="data[step]" /> </div> <div class="wlog_r"> <h2>选择装修阶段</h2> <b class="cur" mine="1" style="line-height:20px;">准备开工</b> <b mine="2" >水电</b> <b mine="3">泥木</b> <b mine="4">油漆</b> <b mine="5">竣工</b> <b mine="6">软装</b> <!-- <input type="hidden" value="准备开工"> --> </div> <div class="wlog_f cf"> <h2><b>上传图片</b>选择装修过程中的照片,每张低于5M,支持JPG/JPEG/PNG格式,最多9张</h2> <div class="wlog_p cf"> <a href="javascript:;" rel="external nofollow" ><img src="__PUBLIC__/home/images/2016-10-29_231703.png" alt=""><input onchange="submitimg()" type="file" name="thumb"/></a> <div id="addimg"></div> <!-- <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> <b><img src="__PUBLIC__/home/images/2016-10-18_094906.png" alt=""><i>x</i></b> --> </div> </div> <div class="wlog_sm"><input type="botton" onclick="return goods_form_submit()" readonly="readonly" value="发布日志"></div> </form> </div> </div> <include file="Public/footer"/> <script type="text/javascript"> function submitimg(){ $("#myform").attr('target','upload_url'); $("#myform").attr('action',"{:U('Journal/submitimg')}"); $("#myform").submit(); } function goods_form_submit() { if(!$('#content').val()){ alert('请填写日志'); return false; } $('#myform').attr('target',''); $('#myform').attr('action',''); $('#myform').submit(); } function callblack_img(path,uid) { var html=""; var dir = "{:C(FILE_PATH)}"; var html ='<b><img src='+dir+path+'><i>x</i><input type="hidden" value="'+path+'" name="thumb['+uid+']"></b>'; $('#addimg').append(html); } </script> <script type="text/javascript" src="__PUBLIC__/home/js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="__PUBLIC__/home/js/basis.js"></script> <script> $(function(){ $('.wlog_r b').click(function(event) { $(this).addClass('cur').siblings('b').removeClass('cur'); $('.wlog_r input[type=hidden]').val($(this).text()); }); $("#addimg").delegate("i","click",function () { $(this).parent("b").remove(); }) }) $("b").click(function(){ var value =$(this).attr('mine'); $("#step").val(value); }) </script> </body> </html>
控制器(返回被选中的图片(已经上传)在服务器之中的路径):
public function submitimg(){ if(IS_POST){ $data = I('post.data');//获取post数据 $res = fab_upload($_FILES);//上传文件 $uid=uniqid(); $res=$res['thumb']; if($res){ echo "<script>parent.callblack_img('{$res}','{$uid}');</script>"; } } }
真正的最后接收表单数据并且存入数据库的函数:
public function add_journal(){ if(IS_POST){ var_dump($_POST);die; }else{ $this->display(); } }
(资源库 www.zyku.net)
您可能感兴趣的文章
- 01-11巴啦啦学英语游戏-巴啦啦学英语游戏应
- 05-09Linux 判断文件修改时间和系统时间差
- 07-18小米手环7pro息屏时长更改方法
- 01-12小米手机开启查找手机教程
- 01-08vivos12怎样设置双击亮屏
- 02-18vivos7设置经典桌面教程
- 11-29一行代码实现网页直接跳转抖音APP
- 01-12大美青海-大美青海应用软件功能介绍
- 02-19ecshop商品页面提示Warning: Division
- 09-23微信读书阅读笔记如何查找
- 02-14华为mate40待机耗电快解决方法
- 07-05Linux uuto命令
- 03-29红米k40单手模式设置步骤教程
- 12-21百度地图怎么关闭导航语音
- 06-25华为云
- 04-06oppofindx3阻拦广告推销电话方法
- 02-08opporeno5更换默认输入法教程
- 07-15帝国仿站教程发布于10秒前 1周前 1个
- 07-05Linux pwconv命令
- 03-20真我gtneo手机5G网络设置步骤
最近更新
阅读排行
猜你喜欢
- 11-29微信设置群待办
- 01-11神行WiFi-神行WiFi应用软件功能介绍
- 09-11qq音乐如何分享歌单
- 01-24华为手机屏幕管理开启方法
- 01-12长空智慧家园-长空智慧家园应用软件功
- 12-27朝牛咖啡-朝牛咖啡应用软件功能介绍
- 02-14华为手机文字识别功能开启方法
- 05-14CKEditor 5 编辑器设置语言高度以及项
- 04-24Python 字符串中的字符倒转
- 09-13vivox60怎么更换微信铃声