Ajax Codular を使用してファイルをアップロードするためのプログレスバーを実装する方法-jsチュートリアル-php.cn

今回は、Ajax でファイルをアップロードするためのプログレスバーとして Codular を実装する方法を説明します。 Ajax でファイルをアップロードするためのプログレスバーとして Codular を実装するための注意事項とは何ですか。実際のケースを見てみましょう。。

現在、人々は Web ページを閲覧しながら、Web ページから離れることなく他のことを行うことを好みます。これは、通常、Ajax を使用して実現されますが、ブラウザーの進歩により、それを使用する人も増えています。ここでは、ページを離れることなく

ファイルをサーバーにアップロードする方法について説明します。このスクリプトは、前の記事で使用したのと同じバックエンド PHP コードを使用します。アップロードの進行状況を表示し、最後にアップロードされたファイルのリンクアドレスを返したい場合があります。注: このコードは古い ie ブラウザをサポートしていません。 by 使用できますか? ie10+ のみサポートします

コードを作成しましょう

HTML 構造から始めて、次に JavaScript、次に PHP コードを示します。この部分は前のチュートリアルから適応されています。 PHP コードに多大な説明がありすぎます。

HTML

2 つの入力ボックスを使用するだけで済みます。1 つはファイルタイプファイルで、もう 1 つは単なるボタンボタンであり、ファイルアップロードリクエストを送信するためにクリックされるのをリッスンできます。また、アップロードのステータスを強調表示するために幅を変更する p もあります。

以下に示すように:

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

まず、使用するタグに移動する必要があります。タグには ID が付けられています

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

ログイン後にコピー

次に、クリックイベントを _submit に追加して、選択したファイルをアップロードします。これを行うには、addEventListener メソッドを使用します。ボタンがクリックされたときにアップロードメソッドが呼び出されるようにしてください。

_submit.addEventListener('click', upload);

ログイン後にコピー

これでアップロードの処理を続行できます。次の手順があります:

選択したファイルを確認します
送信するファイルデータを動的に作成します
js を介して XMLHttpRequest を作成します
ファイルをアップロードします

選択したファイルを確認します

ファイル入力ボックス _file には、選択したファイルキューをクエリするパラメータファイルがあります - 複数のパラメータを設定すると、複数のファイルを選択できます。単純なチェックを行って、配列の長さが 0 より大きい場合は続行し、それ以外の場合は直接戻ります。

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

ログイン後にコピー

これで、ファイルが選択されていることを確認できます。ファイルの場合、配列のインデックスは 0 から始まることに注意してください。

送信するファイルデータを動的に作成します

このためには、FormData を使用してそれにデータを追加する必要があります。次に、FormData を送信します。ステップ 3 で生成されたリクエストで使用します。最初のパラメーターは入力ボックスの name 属性に似ており、2 番目のパラメーターは値を選択した最初のファイルに設定します。

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

ログイン後にコピー

後でサーバーにデータを送信するときに使用します。

アップロードスクリプトを通じて XMLHttpRequest を作成します

この部分は非常に基本的なもので、リクエストのステータスが変化したときに

コールバック関数

を定義するための新しいXMLHttpRequest，并设置一些设置。首先我们将修改onreadystatechange値を作成しますこのメソッドはステータスが変化したときにreadyStateをチェックし、値が希望どおりであることを確認します - この場合は4です。これはリクエストが完了したことを意味します 2番目のステップでは、アップロードに進行状況イベントを追加します。このようにして、アップロードの進行状況を取得して進行状況バーを更新できます。リクエストが成功したら、try...catch を使用して戻り値を解析するプロセスをラップします。解析が失敗した場合は、後続のコードがエラーを報告しないように、独自の戻り値オブジェクトを作成します。ここでは、戻り値をコンソールに出力するだけです。

次に、プログレスバーを扱います。

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中文网其它相关文章！