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的安全策略
Oct 09 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
Jun 16 PHP
php动态实现表格跨行跨列实现代码
Nov 06 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
Nov 07 PHP
深入解析phpCB批量转换的代码示例
Jun 27 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
Jun 12 PHP
php生成随机数的三种方法
Sep 10 PHP
php+mysql结合Ajax实现点赞功能完整实例
Jan 30 PHP
PHP SPL标准库之接口(Interface)详解
May 11 PHP
php并发加锁示例
Oct 17 PHP
php使用GD2绘制几何图形示例
Feb 15 PHP
php多进程模拟并发事务产生的问题小结
Dec 07 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字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
JavaScript中的类继承
2010/11/25 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python中处理时间的几种方法小结
2015/04/09 Python
python动态性强类型用法实例
2015/05/09 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python中格式化format()方法详解
2017/04/01 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
电气自动化个人求职信范文
2014/02/03 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
小学数学教研活动总结
2014/07/01 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
销售辞职信范文
2015/03/02 职场文书