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中实现记住密码自动登录的代码
Mar 02 PHP
php中获取远程客户端的真实ip地址的方法
Aug 03 PHP
PHP字符串长度计算 - strlen()函数使用介绍
Oct 15 PHP
php将session放入memcached的设置方法
Feb 14 PHP
PHP中通过fopen()函数访问远程文件示例
Nov 18 PHP
ThinkPHP模版中导入CSS和JS文件的方法
Nov 29 PHP
PHP 使用memcached简单示例分享
Mar 05 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
Dec 23 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
Jul 27 PHP
深入理解PHP的远程多会话调试
Sep 21 PHP
windows环境下使用Composer安装ThinkPHP5
May 18 PHP
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
Apr 01 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编程开发“虚拟域名”系统
2006/10/09 PHP
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
Javascript String.replace的妙用
2009/09/08 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python实现一个简单的验证码程序
2017/11/03 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
QML使用Python的函数过程解析
2019/09/26 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
报到证丢失证明
2014/01/11 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
大学生活感想
2015/08/10 职场文书
新学期家长寄语2016
2015/12/03 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js