PHP实现上传多图即时显示与即时删除的方法

日期：2020-06-27 栏目：程序人生浏览：次

就像这样的，每选择一个图片就会即时显示出来，附加到右边，也可以随意删除一个元素。

其实是，当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></iframe> <div> <div> <b>写日志</b> </div> <div> <form target="" enctype="multipart/form-data" action="" method="post"> <div> <textarea></textarea> <input type="hidden" value="1" /> </div> <div> <h2>选择装修阶段</h2> <b mine="1">准备开工</b> <b mine="2" >水电</b> <b mine="3">泥木</b> <b mine="4">油漆</b> <b mine="5">竣工</b> <b mine="6">软装</b>  </div> <div> <h2><b>上传图片</b>选择装修过程中的照片，每张低于5M，支持JPG/JPEG/PNG格式，最多9张</h2> <div> <a href="javascript:;" ><img src="https://www.jb51.net/__PUBLIC__/home/images/2016-10-29_231703.png" alt=""><input onchange="submitimg()" type="file"/></a> <div></div>  </div> </div> <div><input type="botton" 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='https://www.jb51.net/+dir+path+'><i>x</i><input type="hidden" value="'+path+'"></b>'; $('#addimg').append(html); } </script> <script type="text/javascript" src="https://www.jb51.net/__PUBLIC__/home/js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/__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(); } }

更多关于PHP相关内容感兴趣的读者可查看本站专题：《php文件操作总结》、《PHP图形与图片操作技巧汇总》、《PHP网络编程技巧总结》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

转载注明出处：https://www.heiqu.com/0998488efc4136675c2be5b6dea94e05.html

PHP实现上传多图即时显示与即时删除的方法

相关推荐