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 21 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
Nov 10 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
Oct 15 PHP
隐性调用php程序的方法
Jun 13 PHP
使用PHP生成二维码的方法汇总
Jul 22 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
Oct 20 PHP
php简单复制文件的方法
May 09 PHP
ThinkPHP实现分页功能
Apr 28 PHP
PHP中Notice错误常见解决方法
Apr 28 PHP
php魔法函数与魔法常量使用介绍
Jul 23 PHP
PHP简单实现解析xml为数组的方法
May 02 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
Oct 03 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代码
2008/04/09 PHP
微信支付开发发货通知实例
2016/07/12 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
python交互式图形编程实例(一)
2017/11/17 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
光电信息专业应届生求职信
2013/10/07 职场文书
竞选班长演讲稿
2013/12/30 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
班级读书活动总结
2014/06/30 职场文书
就业协议书
2014/09/12 职场文书
部门主管竞聘书
2015/09/15 职场文书
mysql创建存储过程及函数详解
2021/12/04 MySQL
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server