PHP中ajax无刷新上传图片与图片下载功能


Posted in PHP onFebruary 21, 2017

php ajax无刷新上传图片与图片下载功能的实现代码如下所示:

<meta charset="utf-8" > 
    <form id= "uploadForm">  
       <p >指定文件名: <input type="text" name="filename" value= ""/></p >  
        <p> 
         上传文件:  
         <input type="file" name="photo" onchange="showPreview(this)" class="file" /> 
         <img id="portrait" src="" width="70" height="75"> 
       </p>  
       <input type="button" value="上传" onclick="doUpload()" />  
    </form>  
    <script src="http://www.haoyunyun.cn/jquery.js"></script> 
    <script> 
    function doUpload() {  
       var formData = new FormData($( "#uploadForm" )[0]);  
       $.ajax({  
         url: 'submit.php' ,  
         type: 'POST',  
         data: formData,  
         async: false,  
         cache: false,  
         contentType: false,  
         processData: false,  
         success: function (returndata) {  
           alert(returndata);  
         },  
         error: function (returndata) {  
           alert(returndata);  
         }  
       });  
    }  
    </script> 
    <script type="text/javascript"> 
    function showPreview(source) { 
      var file = source.files[0]; 
      if (window.FileReader) { 
        var fr = new FileReader(); 
        fr.onloadend = function(e) { 
          document.getElementById("portrait").src = e.target.result; 
        }; 
        fr.readAsDataURL(file); 
      } 
    } 
   </script>

submit.php

<?php 
  if($_FILES['photo']['error']>0){ 
    echo "上传文件失败"; 
    die; 
  } 
  $dir='./photo/'; 
  $type=substr($_FILES['photo']['name'],strrpos($_FILES['photo']['name'],'.')); 
  $filename=time().rand(1000,9999).$type; 
  if(is_uploaded_file($_FILES['photo']['tmp_name'])){ 
    move_uploaded_file($_FILES['photo']['tmp_name'],$dir.$filename); 
    echo "上传成功"; 
  }else{ 
    echo "上传文件失败"; 
  }

遍历数据库数据  

<?php 
  header("content-type:text/html;charset=utf-8"); 
  $link=mysql_connect("127.0.0.1",'root','root'); 
  mysql_select_db("php9",$link); 
  mysql_query("set names utf8"); 
  //查询数据中的总条数 
  $sql="select count(id) as count from upload"; 
  $arr=mysql_query($sql); 
  $result=mysql_fetch_assoc($arr); 
  //获得总条数 
  $size=$result['count']; 
  //每页显示2条数据 
  $length=6; 
  //计算出多少页 
  $pages=ceil($size/$length); 
  $page=isset($_GET['page'])?$_GET['page']:1; 
  if($page<=0){ 
    $page=1; 
  } 
  if($page>$pages){ 
    $page=$pages; 
  } 
  //数据从第几条开始 
  $start=($page-1)*$length; 
  $sql="select * from upload limit $start,$length"; 
  $res=mysql_query($sql); 
  ?> 
  <center> 
  <table border="1"> 
    <div> 
      <?php 
      while($a=mysql_fetch_assoc($res)){ 
        ?> 
        <ul> 
          <li><?php echo $a['id'] ?></li> 
          <li><?php echo $a['username'] ?></li> 
          <li><a href="photo.php" rel="external nofollow" ><img src="<?php echo $a['dir'] ?>" width="80px" ></a> </li> 
          <li><?php echo $a['desc1'] ?></li> 
          <li> 
            <a href="photo3.php?dir=<?php echo $a['dir'] ?>" rel="external nofollow" >下载</a> 
            <a href="photo4.php?id=<?php echo $a['id'] ?> && dir=<?php echo $a['dir'] ?>" rel="external nofollow" >删除</a> 
          </li> 
        </ul> 
      <?php 
      } 
      ?> 
    </div> 
  </table> 
              <a href="photo2.php?page=1" rel="external nofollow" >首页</a> 
              <a href="photo2.php?page=<?php echo $page-1 ?>" rel="external nofollow" >上一页</a> 
              <a href="photo2.php?page=<?php echo $page+1 ?>" rel="external nofollow" >下一页</a> 
              <a href="photo2.php?page=<?php echo $pages ?>" rel="external nofollow" >尾页</a> 
  </center> 
  <style> 
    *{ 
      margin: 0; 
      padding: 0; 
    } 
    div{ 
      width:900px; 
      height: 850px; 
      border: 1px solid #28a4c9; 
      margin: auto; 
    } 
    img{ 
      width: 200px; 
      height: 130px; 
      margin-left: 100px; 
    } 
    ul{ 
      width: 400px; 
      height: 300px; 
      float: left; 
    } 
    li{ 
      list-style: none; 
      margin-left: 10px; 
    } 
  </style>

下载代码

<?php 
  header("content-type:text/html;charset=utf-8"); 
  $dir=$_GET['dir']; 
  $filename=substr($dir,strrpos($dir,'/')+1); 
  header("Content-type:image"); 
  header("content-disposition:attachment;filename=$filename"); 
  readfile($dir); 
  ?>

以上所述是小编给大家介绍的PHP中ajax无刷新上传图片与图片下载功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

PHP 相关文章推荐
PHP执行速率优化技巧小结
Mar 15 PHP
php flush类输出缓冲剖析
Oct 19 PHP
php将fileterms函数返回的结果变成可读的形式
Apr 21 PHP
Session保存到数据库的php类分享
Oct 24 PHP
php 获取页面中指定内容的实现类
Jan 23 PHP
分享自定义的几个PHP功能函数
Apr 15 PHP
深入php内核之php in array
Nov 10 PHP
Yii2配置Nginx伪静态的方法
May 05 PHP
PHP实现登录注册之BootStrap表单功能
Sep 03 PHP
kindeditor 加入七牛云上传的实例讲解
Nov 12 PHP
Laravel 集成 Geetest验证码的方法
May 14 PHP
Yii2框架自定义验证规则操作示例
Feb 08 PHP
PHP+JavaScript实现无刷新上传图片
Feb 21 #PHP
PHP编辑器PhpStrom运行缓慢问题
Feb 21 #PHP
如何离线执行php任务
Feb 21 #PHP
PHP实现上传多文件示例代码
Feb 20 #PHP
微信公众号开发之通过接口删除菜单
Feb 20 #PHP
thinkphp项目如何自定义微信分享描述内容
Feb 20 #PHP
php防止sql注入的方法详解
Feb 20 #PHP
You might like
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python实现的读写json文件功能示例
2018/06/05 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
python Xpath语法的使用
2020/11/26 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
岳父生日宴会答谢词
2014/01/13 职场文书
逃课上网检讨书
2014/02/20 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
投诉书格式范本
2015/07/02 职场文书
python flask框架快速入门
2021/05/14 Python