PAGE TOP


ファイルをajaxで非同期アップロードする

2017年8月12日Javascript, PHP

実装概要

今回の実装は、ajaxを使って、ファイルを選択した時点で非同期でアップロードするというものです。これにより、submitせずに、即時にアップロードすることができます。用途としては、適材適所です。他のテキストデータ等があり、submitするフォームに組み込むと、submitされなかったときに、アップロードしたファイルを削除しないといけないので、逆に、面倒です。使い方次第ではありますが、個人的には、付属データのない画像のみのアップロードの際に使っています。

ajaxでアップロードといっても、サンプルを観覧しただけでは、見た感じは、選択して、レビューを表しているだけにも見えるので、アップロードしているかどうかは、自分の環境で試してみないと確認はできませんので、気になる方は試してみてください。

また、アップロード処理を行うファイルの実装に関しましては、submitではなくajaxで非同期アクセスしているだけの違いですので、通常の方法とまったく同じなので省略します。

コア部分はFormDataクラス

全体のコード
【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Sumidai.net</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

<form id='form' action="data.php" method="post" enctype="multipart/form-data">
<input type="file" id="files" name="files[]" multiple />
<button type="submit">送信</button>
</form>

<output id="list"></output>

<script>

  function handleFileSelect(evt) {
    var files = evt.target.files;

    for (var i = 0, f; f = files[i]; i++) {

      if (!f.type.match('image.*')) {
        continue;
      }


var fd = new FormData();
fd.append('img',files[i]);
$.ajax({
    type : 'POST',
    url: "data.php",
    contentType:false,
    processData: false,
    data : fd,
    success : function(res){
        console.log(res);
    }
});

      var reader = new FileReader();

      reader.onload = (function(theFile, num) {
        return function(e) {
          var span = document.createElement('span');
          span.innerHTML = ['<div class="view"><img id ="img_' + num + ' " class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/><div class="del">×</div></div>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f, i);

      reader.readAsDataURL(f);
    }
      console.log(files);
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

</body>
</html>

実装のコアな部分は、FormData クラスです。ただ、現時点では、対応ブラウザが限られています。このあたりが、ちょっと使う気になれない部分でもあります。対応ブラウザに関しては、MDN web docs のFormDataに関する記述を参照ください。

使い方は、普通のjQueryのajaxメソッドに加えて、FormDataをインスタンス化して利用しているあたりが異なるだけです。

var fd = new FormData();
fd.append('img',files[i]);
$.ajax({
    type : 'POST',
    url: "data.php",
    contentType:false,
    processData: false,
    data : fd,
    success : function(res){
        console.log(res);
    }
});

今回の実装では、FormDataの他に、FileReaderも利用していますが、このあたりは、過去にも数回登場していすので、そちらを参考ください。

感想

FormDataは未対応ブラウザがあるので、クライアントのブラウザ情報を取得して、処理をブラウザによって振り分けるということも考えました。対応以外のものなら、ajaxを使わないフォームの送信に切り替えるというものです。試しましたが、PC又は、スマフォでも、ブラウザ情報を正確に、取得できないものもあるので、こちらも、100％完全に振り分けられるというわけではなかったです。