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(一)
Mar 21 PHP
php中计算程序运行时间的类代码
Nov 03 PHP
使用PHP编写的SVN类
Jul 18 PHP
非常实用的php弹出错误警告函数扩展性强
Jan 17 PHP
php中3种方法删除字符串中间的空格
Mar 10 PHP
php定义数组和使用示例(php数组的定义方法)
Mar 29 PHP
php生成随机颜色的方法
Nov 13 PHP
PHP中的替代语法介绍
Jan 09 PHP
php readfile下载大文件失败的解决方法
May 22 PHP
PHP错误处理函数register_shutdown_function使用示例
Jul 03 PHP
php的优点总结 php有哪些优点
Jul 19 PHP
laravel 修改记住我功能的cookie保存时间的方法
Oct 14 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连接MongoDB示例代码
2012/09/06 PHP
PHP flush()与ob_flush()的区别详解
2013/06/03 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
限制复选框的最大可选数
2006/07/01 Javascript
arguments对象
2006/11/20 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
js中document.write的那点事
2014/12/12 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
什么是Smart Navigation?
2016/07/03 面试题
学生实习介绍信
2014/01/15 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python