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加MYSQL服务器
Oct 09 PHP
用来给图片加水印的PHP类
Apr 09 PHP
PHP合并数组+与array_merge的区别分析
Aug 01 PHP
PHP中设置时区方法小结
Jun 03 PHP
基于session_unset与session_destroy的区别详解
Jun 03 PHP
PHP之sprintf函数用法详解
Nov 12 PHP
微信支付开发发货通知实例
Jul 12 PHP
YII2 实现多语言配置的方法分享
Jan 11 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
Jul 04 PHP
PHP实现基于栈的后缀表达式求值功能
Nov 10 PHP
PHP getName()函数讲解
Feb 03 PHP
Laravel框架实现定时Task Scheduling例子
Oct 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 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
python pillow模块使用方法详解
2019/08/30 Python
python检测服务器端口代码实例
2019/08/31 Python
pygame实现非图片按钮效果
2019/10/29 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
电子商务专业推荐信范文
2013/12/02 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书
股东合作协议书范本
2014/04/14 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
课题研究阶段性总结
2015/08/13 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
字节飞书面试promise.all实现示例
2022/06/16 Javascript