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>