PHP中ajax无刷新上传图片与图片下载功能

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无刷新上传图片与图片下载功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！