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