PHP实现上传多图即时显示与即时删除的方法

更新时间：2017年05月09日 15:38:26 作者：许伟强

这篇文章主要介绍了PHP实现上传多图即时显示与即时删除的方法,结合实例形式分析了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图形与图片操作技巧汇总》、《PHP网络编程技巧总结》、《php面向对象程序设计入门教程》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

您可能感兴趣的文章:

在ThinkPHP中实现文件上传的实用示例
文件上传是现代 Web 应用程序中常见的需求,在 ThinkPHP 框架中,实现文件上传功能相对简单,但仍需注意一些细节,本文将详细介绍如何在 ThinkPHP 中实现文件上传,并提供实用示例,帮助开发者快速上手,需要的朋友可以参考下
2025-01-01
基于PHP实现微博热搜实时监控平台
在学习、“脱发”之余，便是去微博看看有没有发生什么有趣的事情，或是了解一下正在发生着哪些“大事”，亦或是某些让我久久不能平复的事…本文将用PHP实现微博热搜实时监控平台，需要的可以参考一下
2022-06-06
PHP中的函数嵌套层数限制分析
PHP本身的函数嵌套是没有限制的，如果说有限制，也是内存的限制。这是因为PHP的函数嵌套是以栈的形式实现的。对于每个函数都会分配一段内存来存储函数局部的内容。
2011-06-06
PHP的explode和implode的使用说明
下里说道php中的explode 和implode的用法,芭蕾舞鞋,盼望对于友朋们有所辅助!
2011-07-07
PHP中iconv函数知识汇总
iconv函数库能够完成各种字符集间的转换，是php编程中不可缺少的基础函数库。本文内容是参考了网上的其他资源，然后结合自己的实践，有需要的小伙伴可以参考下。
2015-07-07
php park、unpark、ord 函数使用方法（二进制流接口应用实例）
在工作中，我也逐渐了解到park,unpark,ord对于二进制字节处理的强大。下面我逐一介绍它们。
2010-10-10
php将mysql数据库整库导出生成sql文件的具体实现
下面是php将mysql数据库整库导出生成sql文件的详细代码，希望对大家在用php编程时备份数据有一定帮助
2014-01-01
php实现的仿阿里巴巴实现同类产品翻页
当前页左边的页码为最新的产品，按更新时间呈升序排列；右边的页码为早期的产品，按更新时间呈降序排列。
2009-12-12
thinkphp中U方法按路由规则生成url的方法
下面小编就为大家分享一篇thinkphp中U方法按路由规则生成url的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
php 正则表达式小结
正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。
2009-08-08

PHP实现上传多图即时显示与即时删除的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具