PHP Ajaxを使用して添付ファイルを更新せずにアップロードする方法-PHPチュートリアル-php.cn

PHP Ajaxを使用して添付ファイルを更新せずにアップロードする方法

墨辰丷

リリース： 2023-03-29 08:48:01

オリジナル

1360 人が閲覧しました

この記事では、更新せずに添付ファイルをアップロードする機能を実装するための PHP Ajax の具体的なコードを詳しく紹介します。興味のある方は参考にしてください。

Web サイトにとって欠落している機能が 1 つあります。アップロード中。 PHP 事前圧縮を使用してファイルをアップロードすることには独自の利点があるため、今日は更新せずにファイルをアップロードしてみましょう。

------------------------------------------------ --------------------------------

通常フォーム

フロントエンドページ

<form action="./fileupload.php" method="POST">
<p>Username<input type="text" name="username" /></p>
<p>Password<input type="password" name="password" /></p>
<p>E-mail<input type="text" name="email" /></p>
<input type="submit" value="Register" />

</form>

ログイン後にコピー

バックグラウンド処理

print_r($_POST);
$username = $_POSY[&#39;username&#39;];
$password = $_POST[&#39;password&#39;];
$email = $_POST[&#39;email&#39;];

// 在服务器上和数据库内容信息对比即可，实现相关的业务逻辑。

ログイン後にコピー

???

ファイルを含むフォームと通常のフォームには大きな違いがあります。まず、属性の宣言を追加する必要があります。次のように:

を使用して、アップロードしたフォームにファイル情報が含まれていることをサーバーに伝えます。

リフレッシュモード

リフレッシュモードについて言えば、送信をクリックした後、ページはビジネス処理インターフェースにジャンプします。これも通常の方法で実装するフォームのデータ送信です。

フロントエンドインターフェース

<form action="./fileupload.php" enctype="multipart/form-data" method="post">
<p>Username<input type="text" name="username" /></p>
<p>Password<input type="password" name="password" /></p>
<p>E-mail<input type="text" name="email" /></p>
<p>Photo<input type="file" name="photo" /></p>

<input type="submit" value="Register" />

ログイン後にコピー

バックエンドページバックエンド処理で最も重要なことは、通常のフォームデータに加えて、ファイル情報の処理です。 PHP には、アップロードされたファイルを一時データ領域からターゲットフォルダーに簡単に転送して、アップロードビジネスロジックを実装できる組み込み関数があります。

move_uploaded_file('一時ファイルパス','ターゲットファイルパス');

リフレッシュメソッドなし

非リフレッシュメソッドを使用する場合、リフレッシュメソッドを使用する場合との唯一の違いは、ページのジャンプを防ぐことです。通常、これを行うには 2 つの方法があります。

•フォーム送信イベントの最後に return false を追加します。

<script>
var form = document.getElementsByTagName(&#39;form&#39;)[0];
form.onsubmit = function(){
  // to do something
  ···
  // 阻止页面跳转
  return false;
}

</script>

ログイン後にコピー

•h5関連のメソッドを使用します。

<script>
var form = document.getElementsByTagName(&#39;form&#39;)[0];
form.onsubmit = function(event){
  // to do something
  ···
  // 阻止页面跳转
  event.preventDefault();
}

</script>

ログイン後にコピー

その他の演算処理はジャンプを伴うものと整合性が取れます。

大きなファイルのアップロード

PHP はファイルのアップロードを実装していますが、非常に便利で高速です。ただし、アップロードされるファイルのサイズは無制限ではありません。デフォルトでは、アップロードするファイルのサイズを制限する要因が 2 つあります。

•投稿の極限値

•アップロードの極限値
php.iniの設定情報を手動で変更することで、アップロードファイルのサイズを制御できます。

POST極値post_max_size = 200M

極値をアップロードupload_max_filesize=200M

アップロード詳細

aj ax オブジェクトには、upload という属性があり、upload も機能しますオブジェクトとして存在します。 onprogress というメソッドがあり、このメソッドを監視してファイルのアップロードプロセスの割合を確認できます。

フロントエンドページ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件上传示例</title>
<script>
  window.onload = function(){
    var form = document.getElementsByTagName("form")[0];

    form.onsubmit = function(evt){
      // 收集表单信息
      var fd = new FormData(form);
      var ajax = new XMLHttpRequest();

      // 给Ajax设置文件上传的感知事件
      ajax.upload.onprogress = function(evt){
        var loaded = evt.loaded;
        var total = evt.total;
        document.getElementById("progress").value =(loaded/total)*100;
      }



      ajax.onreadystatechange = function() {
        if(ajax.readyState==4){
          alert(ajax.responseText);
        }
      }
      ajax.open(&#39;post&#39;,&#39;./fileupload.php&#39;);
      ajax.send(fd);
      // 阻止浏览器的跳转
      evt.preventDefault();
      //return false;
    }    
  }
</script>
</head>

<body>
<h2>无刷新方式上传附件</h2>
<form action="./fileupload.php">
<p>Username<input type="text" name="username" /></p>
<p>Password<input type="password" name="password" /></p>
<p>E-mail<input type="text" name="email" /></p>
<p>Photo<input type="file" name="photo" /></p>
<!--设置进度条-->
<style>
  #parent {width:300px;height:34px;border:1px solid #033;}
  #son {width:100%;height:10%;background-color:green}
  progress {width:100%;height:34px;}
</style>
<p id="parent">
  <p id="son">
    <progress id="progress">
  </p>

</p>


<input type="submit" value="Register" />

</form>

</body>
</html>

ログイン後にコピー

バックエンド処理

<?php
//print_r($_POST);
//echo "---------------------"."<BR>";
//print_r($_FILES);


// 附件的存储位置、附件的名字，记得一定要存在upload文件夹
$path = "../upload/";

// 获取文件的原始名称
$origin_name = $_FILES[&#39;photo&#39;][&#39;name&#39;];
// 拼接成该文件在服务器上的名称
$server_name = $path.$origin_name;

if($_FILES[&#39;photo&#39;][&#39;error&#39;]>0) {
  die("出错了！".$_FILES[&#39;photo&#39;][&#39;error&#39;]); 
}
if(move_uploaded_file($_FILES[&#39;photo&#39;][&#39;tmp_name&#39;],$server_name)){
  echo "<BR>"."Upload Success!";
}else{
  echo "<BR>"."Upload Failed!".$_FILES[&#39;photo&#39;][&#39;error&#39;];  
}
?>

ログイン後にコピー

アップロードフォルダーとパスの問題が存在することを必ず確認してください。

概要

ファイルのアップロードは非常に基本的な機能であり、実装はそれほど複雑ではありません。しかし、この機能は非常に重要であり、ファイルのアップロードを通じてユーザーのアバターやその他のファイル情報を簡単に変更できます。

以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです。