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 相关文章推荐
在任意字符集下正常显示网页的方法一
Apr 01 PHP
PHP5 的对象赋值机制介绍
Aug 02 PHP
PHP判断远程url是否有效的几种方法小结
Oct 08 PHP
php在线代理转向代码
May 05 PHP
php中字符集转换iconv函数使用总结
Oct 11 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
Nov 17 PHP
php获取百度收录、百度热词及百度快照的方法
Apr 02 PHP
php中header设置常见文件类型的content-type
Jun 23 PHP
深入解析PHP的Yii框架中的event事件机制
Mar 17 PHP
又拍云异步上传实例教程详解
Apr 19 PHP
php 使用curl模拟ip和来源进行访问的实现方法
May 02 PHP
php使用json-schema模块实现json校验示例
Sep 28 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 $_ENV为空的原因分析
2009/06/01 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
Javascript Object.extend
2010/05/18 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
pandas中去除指定字符的实例
2018/05/18 Python
python3实现高效的端口扫描
2019/08/31 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
公司廉洁自律承诺书
2014/03/27 职场文书
电子专业自荐信
2014/07/01 职场文书
护理实习生带教计划
2015/01/16 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server