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

时间:2022-09-12 16:48:04

php ajax无刷新上传图片与图片下载功能的实现代码如下所示:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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.zzvips.com/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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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 "上传文件失败";
  }

遍历数据库数据  

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<?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>

下载代码

?
1
2
3
4
5
6
7
8
<?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无刷新上传图片与图片下载功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持!

原文链接:http://blog.csdn.net/xkweiguang/article/details/52779382