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 相关文章推荐
phpMyAdmin2.11.6安装配置方法
Aug 24 PHP
用来解析.htgroup文件的PHP类
Sep 05 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
Jul 01 PHP
Thinkphp调用Image类生成缩略图的方法
Mar 07 PHP
php生成图片缩略图的方法
Apr 07 PHP
基于命令行执行带参数的php脚本并取得参数的方法
Jan 25 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
Nov 20 PHP
Discuz不使用插件实现简单的打赏功能
Mar 21 PHP
tp5修改(实现即点即改)
Oct 18 PHP
php使用redis的几种常见操作方式和用法示例
Feb 20 PHP
Yii Framework框架开发微信公众平台示例
Apr 26 PHP
深入浅析安装PhpStorm并激活的步骤详解
Sep 17 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP的反射机制实例详解
2017/03/29 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
Prototype String对象 学习
2009/07/19 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
Python 学习笔记
2008/12/27 Python
Python中property函数用法实例分析
2018/06/04 Python
python3实现磁盘空间监控
2018/06/21 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
python类中super() 的使用解析
2019/12/19 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
建筑个人求职信范文
2014/01/25 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript