How to use ajax to upload images and download images without refreshing in PHP

This article will share with you the implementation code of php ajax uploading pictures without refreshing and downloading pictures. It is very good and has reference value. Friends who need it can refer to it

php ajax uploading pictures without refreshing and downloading pictures The implementation code of the function is as follows:

<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: &#39;submit.php&#39; ,  
         type: &#39;POST&#39;,  
         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[&#39;photo&#39;][&#39;error&#39;]>0){ 
    echo "上传文件失败"; 
    die; 
  } 
  $dir=&#39;./photo/&#39;; 
  $type=substr($_FILES[&#39;photo&#39;][&#39;name&#39;],strrpos($_FILES[&#39;photo&#39;][&#39;name&#39;],&#39;.&#39;)); 
  $filename=time().rand(1000,9999).$type; 
  if(is_uploaded_file($_FILES[&#39;photo&#39;][&#39;tmp_name&#39;])){ 
    move_uploaded_file($_FILES[&#39;photo&#39;][&#39;tmp_name&#39;],$dir.$filename); 
    echo "上传成功"; 
  }else{ 
    echo "上传文件失败"; 
  }

Traverse Database data

 <?php 
  header("content-type:text/html;charset=utf-8"); 
  $link=mysql_connect("127.0.0.1",&#39;root&#39;,&#39;root&#39;); 
  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[&#39;count&#39;]; 
  //每页显示2条数据 
  $length=6; 
  //计算出多少页 
  $pages=ceil($size/$length); 
  $page=isset($_GET[&#39;page&#39;])?$_GET[&#39;page&#39;]: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"> 
    <p> 
      <?php 
      while($a=mysql_fetch_assoc($res)){ 
        ?> 
        <ul> 
          <li><?php echo $a[&#39;id&#39;] ?></li> 
          <li><?php echo $a[&#39;username&#39;] ?></li> 
          <li><a href="photo.php" rel="external nofollow" ><img src="<?php echo $a[&#39;dir&#39;] ?>" width="80px" ></a> </li> 
          <li><?php echo $a[&#39;desc1&#39;] ?></li> 
          <li> 
            <a href="photo3.php?dir=<?php echo $a[&#39;dir&#39;] ?>" rel="external nofollow" >下载</a> 
            <a href="photo4.php?id=<?php echo $a[&#39;id&#39;] ?> && dir=<?php echo $a[&#39;dir&#39;] ?>" rel="external nofollow" >删除</a> 
          </li> 
        </ul> 
      <?php 
      } 
      ?> 
    </p> 
  </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; 
    } 
    p{ 
      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>

Download code

 <?php 
  header("content-type:text/html;charset=utf-8"); 
  $dir=$_GET[&#39;dir&#39;]; 
  $filename=substr($dir,strrpos($dir,&#39;/&#39;)+1); 
  header("Content-type:image"); 
  header("content-disposition:attachment;filename=$filename"); 
  readfile($dir); 
  ?>

The above is the entire content of this article, I hope It will be helpful to everyone’s study.

Related recommendations:

php click the linkimage downloadprogram code

How to get remote image download in phpSave to local

Ajax upload image without refresh in PHP and image downloadFunction

The above is the detailed content of How to use ajax to upload images and download images without refreshing in PHP. For more information, please follow other related articles on the PHP Chinese website!