查看: 1553|回复: 0

[PHP学习] PHP中ajax无刷新上传图片与图片下载功能

发表于 2017-12-13 08:00:02

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

  1. <meta charset="utf-8" >
  2. <form id= "uploadForm">
  3. <p >指定文件名: <input type="text" name="filename" value= ""/></p >
  4. <p>
  5. 上传文件:
  6. <input type="file" name="photo" onchange="showPreview(this)" class="file" />
  7. <img id="portrait" src="" width="70" height="75">
  8. </p>
  9. <input type="button" value="上传" onclick="doUpload()" />
  10. </form>
  11. <script src="http://www.haoyunyun.cn/jquery.js"></script>
  12. <script>
  13. function doUpload() {
  14. var formData = new FormData($( "#uploadForm" )[0]);
  15. $.ajax({
  16. url: 'submit.php' ,
  17. type: 'POST',
  18. data: formData,
  19. async: false,
  20. cache: false,
  21. contentType: false,
  22. processData: false,
  23. success: function (returndata) {
  24. alert(returndata);
  25. },
  26. error: function (returndata) {
  27. alert(returndata);
  28. }
  29. });
  30. }
  31. </script>
  32. <script type="text/javascript">
  33. function showPreview(source) {
  34. var file = source.files[0];
  35. if (window.FileReader) {
  36. var fr = new FileReader();
  37. fr.onloadend = function(e) {
  38. document.getElementById("portrait").src = e.target.result;
  39. };
  40. fr.readAsDataURL(file);
  41. }
  42. }
  43. </script>
复制代码

submit.php

  1. <?php
  2. if($_FILES['photo']['error']>0){
  3. echo "上传文件失败";
  4. die;
  5. }
  6. $dir='./photo/';
  7. $type=substr($_FILES['photo']['name'],strrpos($_FILES['photo']['name'],'.'));
  8. $filename=time().rand(1000,9999).$type;
  9. if(is_uploaded_file($_FILES['photo']['tmp_name'])){
  10. move_uploaded_file($_FILES['photo']['tmp_name'],$dir.$filename);
  11. echo "上传成功";
  12. }else{
  13. echo "上传文件失败";
  14. }
复制代码

遍历数据库数据

  1. <?php
  2. header("content-type:text/html;charset=utf-8");
  3. $link=mysql_connect("127.0.0.1",'root','root');
  4. mysql_select_db("php9",$link);
  5. mysql_query("set names utf8");
  6. //查询数据中的总条数
  7. $sql="select count(id) as count from upload";
  8. $arr=mysql_query($sql);
  9. $result=mysql_fetch_assoc($arr);
  10. //获得总条数
  11. $size=$result['count'];
  12. //每页显示2条数据
  13. $length=6;
  14. //计算出多少页
  15. $pages=ceil($size/$length);
  16. $page=isset($_GET['page'])?$_GET['page']:1;
  17. if($page<=0){
  18. $page=1;
  19. }
  20. if($page>$pages){
  21. $page=$pages;
  22. }
  23. //数据从第几条开始
  24. $start=($page-1)*$length;
  25. $sql="select * from upload limit $start,$length";
  26. $res=mysql_query($sql);
  27. ?>
  28. <center>
  29. <table border="1">
  30. <div>
  31. <?php
  32. while($a=mysql_fetch_assoc($res)){
  33. ?>
  34. <ul>
  35. <li><?php echo $a['id'] ?></li>
  36. <li><?php echo $a['username'] ?></li>
  37. <li><a href="photo.php" rel="external nofollow" ><img src="<?php echo $a['dir'] ?>" width="80px" ></a> </li>
  38. <li><?php echo $a['desc1'] ?></li>
  39. <li>
  40. <a href="photo3.php?dir=<?php echo $a['dir'] ?>" rel="external nofollow" >下载</a>
  41. <a href="photo4.php?id=<?php echo $a['id'] ?> && dir=<?php echo $a['dir'] ?>" rel="external nofollow" >删除</a>
  42. </li>
  43. </ul>
  44. <?php
  45. }
  46. ?>
  47. </div>
  48. </table>
  49. <a href="photo2.php?page=1" rel="external nofollow" >首页</a>
  50. <a href="photo2.php?page=<?php echo $page-1 ?>" rel="external nofollow" >上一页</a>
  51. <a href="photo2.php?page=<?php echo $page+1 ?>" rel="external nofollow" >下一页</a>
  52. <a href="photo2.php?page=<?php echo $pages ?>" rel="external nofollow" >尾页</a>
  53. </center>
  54. <style>
  55. *{
  56. margin: 0;
  57. padding: 0;
  58. }
  59. div{
  60. width:900px;
  61. height: 850px;
  62. border: 1px solid #28a4c9;
  63. margin: auto;
  64. }
  65. img{
  66. width: 200px;
  67. height: 130px;
  68. margin-left: 100px;
  69. }
  70. ul{
  71. width: 400px;
  72. height: 300px;
  73. float: left;
  74. }
  75. li{
  76. list-style: none;
  77. margin-left: 10px;
  78. }
  79. </style>
复制代码

下载代码

  1. <?php
  2. header("content-type:text/html;charset=utf-8");
  3. $dir=$_GET['dir'];
  4. $filename=substr($dir,strrpos($dir,'/')+1);
  5. header("Content-type:image");
  6. header("content-disposition:attachment;filename=$filename");
  7. readfile($dir);
  8. ?>
复制代码

以上所述是小编给大家介绍的PHP中ajax无刷新上传图片与图片下载功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对程序员之家网站的支持!



回复

使用道具 举报