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 模拟登陆MSN并获得用户信息
May 16 PHP
解析php curl_setopt 函数的相关应用及介绍
Jun 17 PHP
深入解析PHP中逗号与点号的区别
Aug 05 PHP
php+js实现图片的上传、裁剪、预览、提交示例
Aug 27 PHP
使用PHPMailer实现邮件发送代码分享
Oct 23 PHP
Linux下安装PHP MSSQL扩展教程
Oct 24 PHP
Smarty使用自定义资源的方法
Aug 08 PHP
php二维码生成
Oct 19 PHP
PHP实现递归无限级分类
Oct 22 PHP
php实现购物车功能(以大苹果购物网为例)
Mar 09 PHP
PHP简单实现欧拉函数Euler功能示例
Nov 06 PHP
laravel 验证错误信息到 blade模板的方法
Sep 29 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去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
隐性调用php程序的方法
2015/06/13 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
python文件写入write()的操作
2019/05/14 Python
解决yum对python依赖版本问题
2019/07/05 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
利用Python优雅的登录校园网
2020/10/21 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
公务员年总结的自我评价
2013/10/25 职场文书
优秀护士演讲稿
2014/04/30 职场文书
班级旅游计划书
2014/05/03 职场文书
师范生求职自荐信
2014/06/14 职场文书
邀请函格式范文
2015/02/02 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS