[test009] バックグラウンドでファイルをアップロード

# バックグラウンドでファイルをアップロード

## 仕様
- input type=fileタグでファイルを選択したら、バックグラウンドにファイルを送信する
- ドラッグアンドドロップでもよいよ

## 事前準備

### PHP
とりあえず受け側をつくっておく

```PHP:test_009_send.php
<?php
print_r($_FILES);
print_r($_POST);
?>

```


## 基本パターン

ひとつのファイルを送る

### HTML

```HTML:test_009_1.htm
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test_009_1.js"></script>
<title>test_9_1 バックグラウンドでファイルをアップロード(基本)</title>
</head>
<body>
<form method="post" action="test_009_send.php" enctype="multipart/form-data">
<input type="file" name="myimg" accept="image/*"><br>
<input type="submit" value="go"><br>
</form>
</body>
</html>
```
### javascript

```javascript:test_009_1.js
$(function() {
  $('input[type=file]').on('change',function(){
    var fd = new FormData();
    var file=$(this).prop('files')[0];
    var name=$(this).attr('name');
    var fr = new FileReader();
    fr.addEventListener("load", function(e){
      fd.append(name, new Blob([e.target.result],{"type":file.type}),file.name );
      $.ajax({
        "url":"test_009_send.php",
        "type":"post",
        "data":fd,
        "cache":false,
        "processData": false,
        "contentType": false,
      }).done(function(data){
        /* 結果表示 */
        console.log(data);
      });
    });
    fr.readAsArrayBuffer(file);
  });
});
```

## 拡張パターン

複数のファイルを送る

### HTML

```HTML:test_009_2.htm
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test_009_2.js"></script>
<title>test_9_2 バックグラウンドでファイルをアップロード(拡張)</title>
</head>
<body>
<form method="post" action="test_009_send.php" enctype="multipart/form-data">
<input type="file" name="myimg[]" accept="image/*" multiple><br>
<input type="submit" value="go"><br>
</form>
</body>
</html>
```

### javascript

```javascript:test_009_2.js
$(function() {
  $('input[type=file]').on('change',function(){
    var fd = new FormData();
    var files=$(this).prop('files');
    var len=files.length;
    if(len>3) len=3; /*上限設定してもよい*/
    var name=$(this).attr('name');
    var defarr = [];
    var def = new $.Deferred();
    for(var i=0;i<len;i++){
      defarr.push(setfile(files[i],name));
    };
    $.when.apply(null,defarr).done(function(){
      $.ajax({
          "url":"test_009_send.php",
          "type":"post",
          "data":fd,
          "cache":false,
          "processData": false,
          "contentType": false,
        }).done(function(data){
          /* 結果表示 */
          console.log(data);
        });
      });
    function setfile(file,name){
      var def=$.Deferred();
      if(!file) return def.resolve();
      var fr = new FileReader();
      fr.addEventListener("load", function(e){
        fd.append(name, new Blob([e.target.result],{"type":file.type}),file.name );
        return def.resolve();
      });
      fr.readAsArrayBuffer(file);
      return def.promise();
    }
  });
});
```

## 拡張パターン2

ドラッグアンドドロップで

### HTML

```HTML:test_009_3.htm
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test_009_3.js"></script>
<title>バックグラウンドでファイルを複数アップロード その2</title>
</head>
<body>
<div id="droppable" style="border: gray solid 1em; padding: 2em;">
ファイルをドロップしてください。
</div>
<div id="view"></div></body>
</html>
```

### javascript

```javascript:test_009_3.js
$(function() {
  $("#droppable").on({
    "dragenter dragover":function(e){
      e.preventDefault();
      return false;
    },
    "drop":function(e){
      e.preventDefault();
      $('#view').text("");
      var ret="";
      var defs=[];
      var files = e.originalEvent.dataTransfer.files;
      $.each(files,function(index,file){
        var fr = new FileReader();
        var def=$.Deferred();
        fr.addEventListener("load", function(e){
          var fd = new FormData();
          fd.append("myfile", new Blob([e.target.result],{"type":file.type}),file.name );
          $.ajax({
            "url":"test_009_send.php",
            "type":"post",
            "data":fd,
            "cache":false,
            "processData": false,
            "contentType": false,
          }).done(function(data){
            console.log(data);//一応戻り値みておく
            ret+="<li>"+file.name+"</li>";
            return def.resolve();
          });
        });
        fr.readAsArrayBuffer(file);
        defs.push(def.promise());
      });
      $.when.apply(null,defs).done(function(){
        $('#view').html("以下アップロードしました<ul>"+ret+"</ul>");
      });
      return false;
    },
  });
});
```

## その他

### 動作確認
- Win Edge
- Win IE11(古いIEはmultipleで選べない)
- Win Firefox56
- Win Chrome