ajaxでファイルをアップロードする方法（メモ）

たまにやるけど忘れるのでメモ

htmlフォームの内容

index.html

<form action="" method="post">
  <input type="file" name="hoge">
  <input type="submit" name="upload" value="アップロード">
</form>
<input id="hoge" type="hidden" value="hoge">

ajaxの部分

file.js

/*
inputにファイルが選択された時にアップロードする。
アップロードをクリックした時に動作させるためにはchangeをclickにする。
$(document).onはあとから追加した要素にも対応させるため。
*/
$(document).on('change','input[name="hoge"]',function(){
  var fd = new FormData();
  if ($("input[name='hoge']").val()!== '') {
    fd.append( "file", $("input[name='hoge']").prop("files")[0] );
  }
  fd.append("dir",$("#hoge").val());
  var postData = {
    type : "POST",
    dataType : "text",
    data : fd,
    processData : false,
    contentType : false
  };
  $.ajax(
    "ajax/index.php", postData
  ).done(function( text ){
    console.log(text);
  });
});

phpでの処理

index.php

$dir = $_POST["dir"];
if($_FILES["file"]["tem_name"]){
  list($file_name,$file_type) = explode(".",$_FILES['file']['name']);
  //ファイル名を日付と時刻にしている。
  $name = date("YmdHis").".".$file_type;
  $file = "img/".$dir;
  //ディレクトリを作成してその中にアップロードしている。
  if(!file_exists($file)){
    mkdir($file,0755);
  }
  if (move_uploaded_file($_FILES['file']['tmp_name'], $file."/".$name)) {
    chmod($file."/".$name, 0644);
    var_dump($dir."/".$name);
  }
}

まとめ

忘れた時に結構忘れてしまうことがある。
忘れないのが一番なんだけれども・・・

でも忘れるよね。
だって人間だもの。