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 相关文章推荐
多文件上传的例子
Oct 09 PHP
使用php+xslt在windows平台上
Oct 09 PHP
php shell超强免杀、减少体积工具实现代码
Oct 16 PHP
PHP中JSON的应用技巧
Oct 10 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
Dec 18 PHP
Ajax实现对静态页面的文章访问统计功能示例
Oct 10 PHP
php mysql like 实现多关键词搜索的方法
Oct 29 PHP
php防止sql注入的方法详解
Feb 20 PHP
PHP fclose函数用法总结
Feb 15 PHP
php面向对象基础详解【星际争霸游戏案例】
Jan 23 PHP
PHP设计模式之组合模式定义与应用示例
Feb 01 PHP
PHP执行普通shell命令流程解析
Aug 24 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
当海贼王变成JOJO风
2020/03/02 日漫
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
js倒计时抢购实例
2015/12/20 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
python实现学生信息管理系统源码
2021/02/22 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
暑期实践思想汇报
2014/01/06 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
我的中国心演讲稿
2014/09/04 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
高三英语教学计划
2015/01/23 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
MySQL sql模式设置引起的问题
2022/05/15 MySQL
基于redis+lua进行限流的方法
2022/07/23 Redis