Ajaxアップロードファイルの進捗バーCodular

7803 ワード
ajax アップロード プログレスバー
現在、人々はウェブページを閲覧する時に他のことをするのが好きで、このウェブページを離れないで、これは通常ajaxを通じて実現します。多くの場合、jQueryを使って実現しますが、ブラウザの進歩に従って、人々はこのようにする必要がありません。ここではどのようにしてページを離れないで、ファイルをサーバーにアップロードするかを紹介します。私たちは前の文章と同じバックエンドのPHPコードを使います。このスクリプトはファイルをサーバーにアップロードし、アップロードの進捗を表示します。最終的にアップロードファイルのリンクアドレスに戻ります。場合によってはアップロードファイルのIDまたはそのアプリケーション情報に戻りたいかもしれません。Note:このコードは古いieブラウザをサポートしません。Can I useを通じてie 10+だけサポートします。
Let Code
私たちはHTML構造からスタートします。その後、JavaScriptからPHPコードを提供します。この部分は前の教程にアレンジしました。PHPコードについてはあまり説明がありません。
HTML
私たちは二つの入力ボックスを使うだけで、一つはファイルタイプfileで、もう一つはボタンbuttonだけで、ファイルのアップロード要求を送信するのを傍受できます。私たちはまた、アップロードの状態を強調するために幅を変更するdivを持っています。
以下の通りです

<!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>
  <div class='container'>
    <p>
      Select File: <input type='file' id='_file'> <input type='button' id='_submit' value='Upload!'>
    </p>
    <div class='progress_outer'>
      <div id='_progress' class='progress'></div>
    </div>
  </div>
  <script src='upload.js'></script>
</body>
</html>
進捗バーのパターンを少し書きました。下にスクリプトファイルを入れてファイルのアップロードと進捗バーの展示を処理します。
JavaScript
まず、私達は私達が使うラベルを持ってきます。彼らはすでにidでマークしています。

var _submit = document.getElementById('_submit'), 
_file = document.getElementById('_file'), 
_progress = document.getElementById('_progress');
次、くださいsubmitはクリックイベントを追加して、私達が選んだファイルをアップロードします。そのために、addEventListener方法を使って、ボタンをクリックしてから、upload方法を呼び出させます。

_submit.addEventListener('click', upload);
今はアップロードの処理を続けられます。次のステップがあります。
  • 選択されたファイルを確認する
  • 送信するファイルデータを動的に作成する
  • は、jsによってXMLtpRequest
    • を作成する。
  • アップロードファイル
    • 選択されたファイルをチェック
    私たちのファイル入力ボックスfileには選択されたファイルの列のパラメータfilesがあります。multipleパラメータを設定すると複数のファイルを選択できます。単純なチェックをします。この配列の長さが0より大きい場合はそのまま戻ります。
    
if(_file.files.length === 0){
  return;
}
    現在、ファイルが選択されていることを確認します。ファイルがあると仮定します。配列の索引を0で始めてください。
    送信するファイルデータを動的に作成します。
    そのためにはFormDataを使用してデータを追加する必要があります。次のステップは、第3段階で生成されたrequestでFormDataを送ることができます。私たちが使っているappedメソッドは、最初のパラメータは入力ボックスのname属性と似ています。第2パラメータは値valueです。ここでは、valueを最初のファイルに設定します。
    
var data = new FormData();
data.append('SelectedFile', _file.files[0]);
    後でサービスにデータを送る時、それを使います。
    アップロードスクリプトでXMLHttpRequestを作成します。
    この部分は非常に基礎的であり、XMLHttpRequestを新たに作成し、いくつかの設定を設定します。まず、onreadystatechangeの値を修正して、状態変更を要求する際のコールバック関数を定義します。この方法は、状態変更時にreadyStateをチェックします。この値が私たちが望むものであることを確認します。この例では4です。要求の完了を表します。
    第二ステップは、私たちはプログレスイベントをアップロードのプロパティに追加します。アップロードの進捗状況を得ることができます。
    
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);
  }
};
    要求が成功したら、私達はtry...catchで解析して値を返します。もし解析が失敗したら、私達は自分の戻り先を作成して、後のコードを間違えないようにします。戻り値は自分で決められます。ここではただ制御台に出力します。
    進行状況を処理します。
    
request.upload.addEventListener('progress', function(e){
  _progress.style.width = Math.ceil(e.loaded/e.total) * 100 + '%';
}, false);
    ここにはちょっと複雑な事件があります。私達は一つのイベントを監督しています。このイベントの対象は二つの私達が比較的に関心を持っている属性があります。
    ノート:ここにはアニメーション効果がありませんが、必要に応じてカスタマイズできます。
    ファイルをアップロード
    今私たちは要求を送ることができます。POSTを通じて、upoload.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は前の記事のコードと同じです。これはこの方法が500 Kb以下のPNG画像にしか適用されないことを意味します。また、成功情報は既にアップロードされたファイルのパスに戻ります。
    
<?php
// Output JSON
function outputJSON($msg, $status = 'error'){
  header('Content-Type: application/json');
  die(json_encode(array(
    'data' => $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ファイルを使ってテストを行うことを提案します。
    以上述べたのは小编が皆さんに绍介したAjaxアップロードファイルの进捗状のCodularです。皆さんに何かお聞きしたいことがあれば、メッセージをください。ここでも私たちのサイトを応援してくれてありがとうございます。
    sql serverが起動できません。MSSQL 18052エラー：9003、深刻度：20、状態：1.
    spring mvcを解決してjsonデータに帰ってajaxまで誤りのparseerror問題を報告します。