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


Posted in PHP onMay 09, 2017

本文实例讲述了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();
     }
}

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
实用函数10
Nov 08 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
Jul 01 PHP
PHP求最大子序列和的算法实现
Jun 24 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
Nov 26 PHP
php中根据变量的类型 选择echo或dump
Jul 05 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
Oct 06 PHP
基于PHP生成静态页的实现方法
May 10 PHP
PHP分页类集锦
Nov 18 PHP
laravel容器延迟加载以及auth扩展详解
Mar 02 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
Sep 23 PHP
Laravel中前端js上传图片到七牛云的示例代码
Sep 04 PHP
PHP 99乘法表的几种实现代码
Oct 13 PHP
Laravel中如何增加自定义全局函数详解
May 09 #PHP
laravel 5.3中自定义加密服务的方案详解
May 09 #PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
May 09 #PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
May 08 #PHP
ThinkPHP实现图片上传操作的方法详解
May 08 #PHP
PHP开发中csrf攻击的简单演示和防范
May 07 #PHP
ThinkPHP框架实现数据增删改
May 07 #PHP
You might like
Php注入点构造代码
2008/06/14 PHP
php发送post请求函数分享
2014/03/06 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
JS &amp; JQuery 动态添加 select option
2016/06/08 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
详解python的四种内置数据结构
2019/03/19 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Python for i in range ()用法详解
2020/09/18 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
当当网软件测试笔试题
2015/11/24 面试题
应届专科生个人的自我评价
2014/01/05 职场文书
《老山界》教学反思
2014/04/08 职场文书
家长会学生演讲稿
2014/04/26 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis