Heim > Artikel > Web-Frontend > So implementieren Sie einen Fortschrittsbalken für das Hochladen von Dateien mit Ajax Codular

So implementieren Sie einen Fortschrittsbalken für das Hochladen von Dateien mit Ajax Codular

php中世界最好的语言Original: 2018-03-31 16:54:341652Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie Codular als Fortschrittsbalken für das Hochladen von Dateien mit Ajax implementieren Fall, werfen wir einen Blick darauf. Heutzutage erledigen die Leute gerne andere Dinge, während sie eine Webseite durchsuchen, ohne die Webseite zu verlassen, was normalerweise durch Ajax erreicht wird. Meistens verwenden die Leute jQuery, um dies zu erreichen, aber mit der Weiterentwicklung von Browser, die dies nicht tun müssen. Hier erfahren Sie, wie Sie eine Datei auf einen Server hochladen, ohne die Seite zu verlassen. Wir werden denselben Backend-PHP-Code verwenden, den wir in unserem vorherigen Artikel verwendet haben Senden Sie die Datei an den Server, zeigen Sie den Upload-Fortschritt an und geben Sie schließlich die Linkadresse der hochgeladenen Datei zurück. In einigen Fällen möchten Sie möglicherweise die ID der hochgeladenen Datei oder andere Anwendungsinformationen zurückgeben. Hinweis: Dieser Code unterstützt keine älteren Dateien

dh Browser

, von Can I use unterstützen wir nur ie10+Let's Code

Wir beginnen mit der HTML-Struktur, dann mit JavaScript, ich werde es dann tun stellen Ihnen den PHP-Code zur Verfügung, der aus dem vorherigen Tutorial übernommen wurde – es wird nicht viele Erklärungen zum PHP-Code geben.

HTML

Wir müssen nur zwei Eingabefelder verwenden, eines ist der Dateityp Datei und das andere ist nur eine Schaltfläche, damit wir es hören können angeklickt, um eine Datei-Upload-Anfrage zu senden. Wir werden auch ein p haben, mit dem wir die Breite ändern, um den Status des Uploads hervorzuheben. Wie unten gezeigt:

Sie werden sehen, dass wir einen kleinen Fortschrittsbalkenstil geschrieben und unten eine Skriptdatei hinzugefügt haben, um

die Datei zu verarbeiten

hochzuladen und die Fortschrittsbalkenanzeige.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS File Upload with Progress</title>
  <style>
  .container {
    width: 500px;
    margin: 0 auto;
  }
  .progress_outer {
    border: 1px solid #000;
  }
  .progress {
    width: 20%;
    background: #DEDEDE;
    height: 20px; 
  }
  </style>
</head>
<body>
  <p class=&#39;container&#39;>
    <p>
      Select File: <input type=&#39;file&#39; id=&#39;_file&#39;> <input type=&#39;button&#39; id=&#39;_submit&#39; value=&#39;Upload!&#39;>
    </p>
    <p class=&#39;progress_outer&#39;>
      <p id=&#39;_progress&#39; class=&#39;progress&#39;></p>
    </p>
  </p>
  <script src=&#39;upload.js&#39;></script>
</body>
</html>

JavaScript

Zuerst müssen wir die Tags abrufen, die wir verwenden werden, sie sind bereits mit IDs markiert.

Down Fügen Sie im ersten Schritt ein Click-Ereignis zu _submit hinzu, um die von uns ausgewählte Datei hochzuladen. Dazu verwenden wir die Methode addEventListener und lassen sie nach dem Klicken auf die Schaltfläche die Upload-Methode aufrufen >

Jetzt können wir den Upload weiter verarbeiten, es gibt folgende Schritte:

var _submit = document.getElementById('_submit'), 
_file = document.getElementById('_file'), 
_progress = document.getElementById('_progress');

Überprüfen Sie die ausgewählte Datei

_submit.addEventListener('click', upload);

Überprüfen Sie die ausgewählte Datei

Da wir nun sicherstellen können, dass eine Datei ausgewählt ist, gehen wir davon aus, dass eine Datei vorhanden ist. Denken Sie an den Index des Arrays beginnt mit 0.

Dynamisch erstellte Dateidaten, die gesendet werden sollen

if(_file.files.length === 0){
  return;
}

Dazu müssen wir FormData verwenden und die Daten hinzufügen. Als nächstes können wir senden unsere FormData in der in Schritt 3 generierten Anfrage. Wir verwenden die append-Methode, der erste Parameter ähnelt dem Namensattribut des Eingabefelds und der zweite Parameter ist der Wert. Hier legen wir den Wert auf die erste von uns ausgewählte Datei fest.

Wenn wir es später angeben Wir werden es verwenden, wenn der Server Daten sendet

XMLHttpRequest per Upload-Skript erstellen

var data = new FormData();
data.append('SelectedFile', _file.files[0]);

Dieser Teil ist Ganz einfach, wir erstellen ein neues

und legen einige Einstellungen fest. Zuerst ändern wir den Wert von

, um die -Rückruffunktion zu definieren, wenn sich der angeforderte Status ändert. Diese Methode überprüft readyState, wenn sich der Status ändert, um sicherzustellen, dass der Wert unseren Wünschen entspricht – in diesem Fall ist 4, stellt den Abschluss der Anfrage dar. Im zweiten Schritt fügen wir das Fortschrittsereignis zum Upload-Attribut hinzu. Auf diese Weise können wir den Upload-Fortschritt abrufen, um den Fortschrittsbalken zu aktualisieren 🎜>

Wenn die Anfrage erfolgreich ist, verwenden wir schließlich try...catch, um den Prozess des Parsens des Rückgabewerts zu umschließen. Wenn das Parsen fehlschlägt, erstellen wir unser eigenes Rückgabeobjekt, sodass der nachfolgende Code kein Problem meldet Fehler. Sie können entscheiden, wie mit dem Rückgabewert umgegangen werden soll, hier verwenden wir ihn einfach als Ausgabe an die Konsole.

XMLHttpRequestonreadystatechangeJetzt kümmern wir uns um den Fortschrittsbalken:

request.upload.addEventListener('progress', function(e){
  _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
}, false);

这里有一点点复杂,我们监听一个事件,该事件对象有两个我们比较关注的属性,loaded和total.loaded表示已经上传到服务器端的数值,total表示要发送的总数值,我们可以根据这两个值计算一个百分比,来设置进度条的宽度.

Note: 这里没有加入任何动画特效,但你可以根据需要自定义动画效果.

上传文件

现在我们可以发送请求，我们将通过POST请求到一个名为upload.php的文件，并使用send（）方法，参数为data，这样我们就可以发送数据:

request.open('POST', 'upload.php');
request.send(data);

下面给出完整的JavaScript代码:

var _submit = document.getElementById('_submit'), 
_file = document.getElementById('_file'), 
_progress = document.getElementById('_progress');
var upload = function(){
  if(_file.files.length === 0){
    return;
  }
  var data = new FormData();
  data.append('SelectedFile', _file.files[0]);
  var request = new XMLHttpRequest();
  request.onreadystatechange = function(){
    if(request.readyState == 4){
      try {
        var resp = JSON.parse(request.response);
      } catch (e){
        var resp = {
          status: 'error',
          data: 'Unknown error occurred: [' + request.responseText + ']'
        };
      }
      console.log(resp.status + ': ' + resp.data);
    }
  };
  request.upload.addEventListener('progress', function(e){
    _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
  }, false);
  request.open('POST', 'upload.php');
  request.send(data);
}
_submit.addEventListener('click', upload);

现在到了PHP...

PHP

这是我们使用的代码,你将注意到一些区别,主要是我们用最上面的JSON方法来返回值都作为JSON格式输出.这个PHP与之前文章中的代码相同,这也就意味着该方法只适用于小于500Kb的PNG图片.此外,成功信息将返回已上传文件的路径:

<?php
// Output JSON
function outputJSON($msg, $status = &#39;error&#39;){
  header(&#39;Content-Type: application/json&#39;);
  die(json_encode(array(
    &#39;data&#39; => $msg,
    'status' => $status
  )));
}
// Check for errors
if($_FILES['SelectedFile']['error'] > 0){
  outputJSON('An error ocurred when uploading.');
}
if(!getimagesize($_FILES['SelectedFile']['tmp_name'])){
  outputJSON('Please ensure you are uploading an image.');
}
// Check filetype
if($_FILES['SelectedFile']['type'] != 'image/png'){
  outputJSON('Unsupported filetype uploaded.');
}
// Check filesize
if($_FILES['SelectedFile']['size'] > 500000){
  outputJSON('File uploaded exceeds maximum upload size.');
}
// Check if the file exists
if(file_exists('upload/' . $_FILES['SelectedFile']['name'])){
  outputJSON('File with that name already exists.');
}
// Upload file
if(!move_uploaded_file($_FILES['SelectedFile']['tmp_name'], 'upload/' . $_FILES['SelectedFile']['name'])){
  outputJSON('Error uploading file - check destination is writeable.');
}
// Success!
outputJSON('File uploaded successfully to "' . 'upload/' . $_FILES['SelectedFile']['name'] . '".', 'success');

如果将所有内容都放在一起，您应该可以将文件上传到您期望的位置，并在浏览器的控制台内成功返回。

结束语

还有一些比较容易而又有效的方式来增强用户体验.通过将文件队列的多个文件加入到FormData,可以实现多文件上传. 有一点要说明,如果你是在本地做测试,你可能没办法看到进度条逐步变化,这取决于你本地机器的上传速度,我建议在服务器上使用较大的png文件做测试.

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

In Verbindung stehende Artikel

Mehr sehen