Ajaxを使用してPHPで画像を更新せずに画像をアップロードおよびダウンロードする方法

この記事では、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: &#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 "上传文件失败"; 
  }

データベースデータのトラバース

 <?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>

コードをダウンロード

rrリー

上記はこの記事の全内容です。皆様の学習ヘルプに役立つことを願っています。

関連する推奨事項:

php リンクをクリック 画像ダウンロードプログラムコード

php リモートの入手方法 画像ダウンロード ローカルに保存

ajax 更新なしアップロードPHPの画像写真ダウンロード機能付き

以上がAjaxを使用してPHPで画像を更新せずに画像をアップロードおよびダウンロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。