So laden Sie Anhänge ohne Aktualisierung mit PHP Ajax hoch-PHP-Tutorial-php.cn

So laden Sie Anhänge ohne Aktualisierung mit PHP Ajax hoch

墨辰丷

Freigeben： 2023-03-29 08:48:01

Original

1403 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich den spezifischen Code von PHP Ajax vor, um die Funktion zum Hochladen von Anhängen ohne Aktualisierung zu implementieren. Er hat einen gewissen Referenzwert.

Für eine Website gibt es eine grundlegende unverzichtbare Funktion, nämlich das Hochladen von Dateien. Die Verwendung der PHP-Vorkomprimierung zum Hochladen von Dateien bietet einzigartige Vorteile. Lassen Sie uns heute einen Datei-Upload ohne Aktualisierung durchführen.

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

Normale Form

Vorderseite

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

Nach dem Login kopieren

Backend-Verarbeitung

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

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

Nach dem Login kopieren

···

Formular mit Datei

Formular mit Datei und normales Formular Es gibt einen großen Unterschied. Zuerst müssen wir ein Attribut im Formular deklarieren, wie folgt:

Um dem Server mitzuteilen, dass das von uns hochgeladene Formular Dateiinformationen enthält.

Aktualisierungsmodus

Im Aktualisierungsmodus springt die Seite nach dem Klicken auf „Senden“ zur Geschäftsverarbeitungsoberfläche. Dies ist auch die Datenübermittlung des Formulars, die wir auf normale Weise umsetzen.

Front-End-Schnittstelle

<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" />

Nach dem Login kopieren

Backend-Seite

Neben den gewöhnlichen Formulardaten kommt es bei der Hintergrundverarbeitung vor allem auf die Verarbeitung von Dateiinformationen an. PHP verfügt über eine integrierte Funktion, die hochgeladene Dateien einfach aus dem temporären Datenbereich in unseren Zielordner übertragen kann, um die Upload-Geschäftslogik zu implementieren.

move_uploaded_file('temporärer Dateipfad','Zieldateipfad');

Keine Aktualisierungsmethode

Keine Aktualisierungsmethode zu verwenden ist dasselbe wie Verwenden von „refresh“ Der einzige Unterschied in der Methode besteht darin, das Springen der Seite zu verhindern. Normalerweise haben wir zwei Möglichkeiten, dies zu erreichen.
•Fügen Sie „return false“ am Ende des Formularübermittlungsereignisses hinzu.

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

</script>

Nach dem Login kopieren

•Verwenden Sie h5-bezogene Methoden.

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

</script>

Nach dem Login kopieren

Andere Operationsverarbeitung kann mit der mit Sprung konsistent sein.

Hochladen großer Dateien

Obwohl PHP den Datei-Upload implementiert, ist er sehr bequem und schnell. Die Größe der hochgeladenen Dateien ist jedoch nicht unbegrenzt. Standardmäßig gibt es zwei Faktoren, die die Größe der von uns hochgeladenen Dateien begrenzen.
•Extremer Wert des Beitrags
•Extremer Wert des Uploads
Wir können die Größe der Upload-Datei steuern, indem wir die Konfigurationsinformationen der php.ini manuell ändern.

POST-Extremwert

post_max_size = 200M

Extremwert hochladen

upload_max_filesize=200M

Details hochladen

Das Ajax-Objekt verfügt über ein Attribut namens „upload“, und „upload“ existiert auch als Objekt. Es gibt eine Methode namens onprogress. Wir können diese Methode überwachen, um den Prozentsatz des Datei-Upload-Prozesses zu sehen.

Frontend-Seite

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

Nach dem Login kopieren

Backend-Verarbeitung

<?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;];  
}
?>

Nach dem Login kopieren

Denken Sie daran, sicherzustellen, dass die Existenz und der Pfad des Upload-Ordners problematisch sind.

Zusammenfassung

Das Hochladen von Dateien ist eine sehr grundlegende Funktion und nicht sehr kompliziert zu implementieren. Aber diese Funktion ist so wichtig, dass wir den Avatar des Benutzers und andere Dateiinformationen einfach durch Datei-Upload ändern können.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Verwandte Empfehlungen:

phpDetaillierte Grafik- und Texterklärung, wie man die Anzahl der Tage im aktuellen Monats- und Datumsarray entsprechend dem Jahr und erhält Monat

PHP-Implementierung des Multi-Image-Uploads kombiniert mit Uploadify-Plug-in-Ideenanalyse

Erwerb der PHP-Implementierung So geben Sie den Wochentag an

Das obige ist der detaillierte Inhalt vonSo laden Sie Anhänge ohne Aktualisierung mit PHP Ajax hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!