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新手上路(十四)
Oct 09 PHP
逐步提升php框架的性能
Jan 10 PHP
php MySQL与分页效率
Jun 04 PHP
学习discuz php 引入文件的方法DISCUZ_ROOT
Jun 21 PHP
PHP+MySQL 制作简单的留言本
Nov 02 PHP
PHP 调试工具Debug Tools
Apr 30 PHP
PHP+MySQL实现的简单投票系统实例
Feb 24 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
Mar 07 PHP
php使用escapeshellarg时中文被过滤的解决方法
Jul 10 PHP
Nginx环境下PHP flush失效的解决方法
Oct 19 PHP
PHP递归实现汉诺塔问题的方法示例
Nov 25 PHP
PHP验证类的封装与使用方法详解
Jan 10 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 win下Socket方式发邮件类
2009/08/21 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
JS实现li标签的删除
2019/04/12 Javascript
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
Python类的动态绑定实现原理
2020/03/21 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
工作失误检讨书(3篇)
2014/10/11 职场文书
扬州个园导游词
2015/02/06 职场文书
春季运动会加油词
2015/07/18 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers