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 相关文章推荐
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
Jan 15 PHP
php 接口类与抽象类的实际作用
Nov 26 PHP
使用Apache的htaccess防止图片被盗链的解决方法
Apr 27 PHP
PHP生成等比缩略图类和自定义函数分享
Jun 25 PHP
php使用curl简单抓取远程url的方法
Mar 13 PHP
PHP中常见的缓存技术实例分析
Sep 23 PHP
php Session无效分析资料整理
Nov 29 PHP
PHP与SQL语句常用大全
Dec 10 PHP
YII框架中搜索分页jQuery写法详解
Dec 19 PHP
php实现和c#一致的DES加密解密实例
Jul 24 PHP
php生成条形码的图片的实例详解
Sep 13 PHP
PHP实现笛卡尔积算法的实例讲解
Dec 22 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实现删除非站内外部链接实例代码
2014/06/17 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
JS实现简单日历特效
2020/01/03 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
Python实现二分法算法实例
2015/02/02 Python
详解python分布式进程
2018/10/08 Python
django 将model转换为字典的方法示例
2018/10/16 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
迪拜航空官方网站:flydubai
2017/04/20 全球购物
Order by的几种用法
2013/06/16 面试题
斯福泰克软件测试面试题
2015/02/16 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
致100米运动员广播稿
2014/02/14 职场文书
安全演讲稿开场白
2014/08/25 职场文书
欢迎新生标语
2014/10/06 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
2014年加油站工作总结
2014/12/04 职场文书
个人委托函范文
2015/01/29 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
2015年高中语文教学总结
2015/08/18 职场文书