45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:怎么样在Php中通过Ajax无刷新上传图片?

怎么样在Php中通过Ajax无刷新上传图片?

2017-06-21 21:09:47 来源:www.45fan.com 【

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


本文地址:http://www.45fan.com/bcdm/88999.html
Tags: 刷新 PHP ajax
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部