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 相关文章推荐
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
Oct 09 PHP
PHP文本操作类
Nov 25 PHP
弄了个检测传输的参数是否为数字的Function
Dec 06 PHP
PHP的一个基础知识 表单提交
Jul 04 PHP
fetchAll()与mysql_fetch_array()的区别详解
Jun 05 PHP
php中filter函数验证、过滤用户输入的数据
Jan 13 PHP
PHP读取大文件的类SplFileObject使用介绍
Apr 09 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
Jun 23 PHP
php获取客户端电脑屏幕参数的方法
Jan 09 PHP
php使用iconv中文截断问题的解决方法
Feb 11 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
Mar 30 PHP
分享5个非常有用的Laravel Blade指令
May 30 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表单提交问题的解决方法
2011/04/12 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
javascript学习网址备忘
2007/05/29 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
js实现动态时钟
2020/03/12 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python telnet登陆功能实现代码
2020/04/16 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
装修致歉信
2014/01/15 职场文书
质量管理标语
2014/06/12 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
新闻报道稿范文
2015/07/23 职场文书
青年联谊会致辞
2015/07/31 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
PL350与SW11的比较
2021/04/22 无线电
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
React列表栏及购物车组件使用详解
2021/06/28 Javascript
浅析Python中的随机采样和概率分布
2021/12/06 Python
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript