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 at(@)符号的用法简介
Jul 11 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
Jan 03 PHP
PHP漏洞全解(详细介绍)
Nov 13 PHP
php获取操作系统语言代码
Nov 04 PHP
thinkphp的静态缓存用法分析
Nov 29 PHP
Zend Framework入门知识点小结
Mar 19 PHP
PHP的全局错误处理详解
Apr 25 PHP
PHP未登录自动跳转到登录页面
Dec 21 PHP
php实现与python进行socket通信的方法示例
Aug 30 PHP
php中青蛙跳台阶的问题解决方法
Oct 14 PHP
Laravel5.1框架注册中间件的三种场景详解
Jul 09 PHP
Laravel5.1 框架响应基本用法实例分析
Jan 04 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
几种显示数据的方法的比较
2006/10/09 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
重新认识php array_merge函数
2014/08/31 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python实现的jpg格式图片修复代码
2015/04/21 Python
使用python绘制二维图形示例
2019/11/22 Python
Python识别html主要文本框过程解析
2020/02/18 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
如何查看python关键字
2021/01/17 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
HTML5文档结构标签
2017/04/21 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
迟到检讨书900字
2014/01/14 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android