图片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"><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'] ?>">下载</a>  
                        <a href="photo4.php?id=<?php echo $a['id'] ?> && dir=<?php echo $a['dir'] ?>">删除</a>  
                    </li>  
                </ul>  
            <?php  
            }  
            ?>  
        </div>  
    </table>  
                            <a href="photo2.php?page=1">首页</a>  
                            <a href="photo2.php?page=<?php echo $page-1  ?>">上一页</a>  
                            <a href="photo2.php?page=<?php echo $page+1  ?>">下一页</a>  
                            <a href="photo2.php?page=<?php echo $pages ?>">尾页</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);  
    ?>