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边学边教》(04.编写简易的通讯录――视频教程1)
Dec 13 PHP
PHP安全性漫谈
Jun 28 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
Jan 13 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
Nov 13 PHP
php 字符串压缩方法比较示例
Jan 23 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
Sep 10 PHP
php一维二维数组键排序方法实例总结
Nov 13 PHP
php实现通用的信用卡验证类
Mar 24 PHP
php微信公众号开发(4)php实现自定义关键字回复
Dec 15 PHP
php cli模式下获取参数的方法
May 05 PHP
PHP微信H5支付开发实例
Jul 25 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
Mar 24 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
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
发布你的Python模块详解
2016/09/15 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
python绘制条形图方法代码详解
2017/12/19 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
python中树与树的表示知识点总结
2019/09/14 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
Django如何实现防止XSS攻击
2020/10/13 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
2019年.net常见面试问题
2012/02/12 面试题
25岁生日感言
2014/01/13 职场文书
社会调查研究计划书
2014/05/01 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
务虚会发言材料
2014/12/25 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
python画条形图的具体代码
2022/04/20 Python