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下将图片以二进制存入mysql数据库中并显示的实现代码
May 27 PHP
如何用phpmyadmin设置mysql数据库用户的权限
Jan 09 PHP
学习php分页代码实例
Oct 24 PHP
PHP实现抓取HTTPS内容
Dec 01 PHP
php实现无限级分类
Dec 24 PHP
Zend Framework教程之模型Model用法简单实例
Mar 04 PHP
PHP模板引擎Smarty中变量的使用方法示例
Apr 11 PHP
php结合md5的加密解密算法实例
Sep 30 PHP
PHP文件上传处理案例分析
Oct 15 PHP
详解PHP文件的自动加载(autoloading)
Feb 04 PHP
php中字符串和整数比较的操作方法
Jun 06 PHP
PHP保存Base64图片base64_decode的问题整理
Nov 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
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
简单的PHP图片上传程序
2008/03/27 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
Symfony的安装和配置方法
2016/03/17 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
js里面的变量范围分享
2020/07/18 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
详解Python中的正则表达式的用法
2015/04/09 Python
Python实现一个简单的验证码程序
2017/11/03 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
英文简历中的自荐信范文
2013/12/14 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
2014年司法所工作总结
2014/11/22 职场文书
管理失职检讨书范文
2015/05/05 职场文书
新课程改革心得体会
2016/01/22 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
基于Go Int转string几种方式性能测试
2021/04/28 Golang
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL