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 相关文章推荐
php下判断数组中是否存在相同的值array_unique
Mar 25 PHP
php set_time_limit(0) 设置程序执行时间的函数
May 26 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
Oct 31 PHP
php中global和$GLOBALS[]的分析之一
Feb 02 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
May 31 PHP
调整PHP的性能
Oct 30 PHP
ThinkPHP3.1之D方法实例详解
Jun 20 PHP
php中adodbzip类实例
Dec 08 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
Dec 16 PHP
用PHP代码给图片加水印
Jul 01 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
Mar 28 PHP
PHP实现的超长文本分页显示功能示例
Jun 04 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中的UNICODE 编码与解码
2013/06/29 PHP
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
js微信分享接口调用详解
2019/07/23 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
在Python的Django框架中编写编译函数
2015/07/20 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
python判断元素是否存在的实例方法
2020/09/24 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
军训学生自我鉴定
2014/02/12 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
三严三实对照检查材料
2014/09/22 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
高中家长意见怎么写
2015/06/03 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电