(60) Ajaxでファイルをアップロード

投稿者: | 2018年9月26日

この記事は最終更新から 1124日 が経過しています。

1. やりたいこと

入力フォームで画像ファイルを選択したとき、submit前にサムネイル画像化して表示したい。

2. やってみる

実装例はこちら。
https://www.dogrow.net/hp/sample/00060/

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./script.js"></script>
</head>
<body>

<input type="file" name="upfile">
<div id="upimg"></div>

</body>
</html>

style.css

@charset "utf-8";

div#upimg img{
	width: 200px;
}

script.js

$(function(){
  $.ajaxSetup({
      cache: false
  });

  // ファイル選択時に起動
  $(document).on('change','input[name="upfile"]',function(){
    // 選択されたファイル名を取得
    var fpath = $(this).val();
    if(fpath !== ''){
      var formData = new FormData();
      formData.append('file', $(this).prop('files')[0]);
      // Ajax起動
      $.ajax({
          type: "POST",
          url: "./putfile.php",
          cache : false,
          dataType : "text",
          data : formData,
          processData : false,
          contentType : false,
          timeout: 10000
      }).done(function(data) {
        // 成功時の処理
        var disp = "<b>ERROR</b>";
        if(data != ''){
          disp = '<img src="' + data + '">';
        }
        $('#upimg').html(disp);
      }).fail(function(){
        // 失敗時の処理
        window.alert("ERROR: Can't upload data.");
      });
    }
  });
});

putfile.php

<?
  $ret = '';

  // ファイルアップロードあり?
  if(FALSE === isset($_FILES['file']['tmp_name'])){
    goto tagEND;
  }
  // ファイル名あり?
  if('' == $_FILES['file']['tmp_name']){
    goto tagEND;
  }
  $fpath_src = $_FILES['file']['tmp_name'];
  // 画像ファイル?(PNG or JPEG)
  $imgInfo = getImageSize($fpath_src);
  if(FALSE === $imgInfo){
    goto tagEND;
  }
  switch($imgInfo[2]){
  case IMAGETYPE_JPEG:
  case IMAGETYPE_PNG:
    break;
  default:
    goto tagEND;
  }
  // カレントディレクトリに画像をコピー
  $fpath_dst = $_FILES['file']['name'];
  move_uploaded_file($fpath_src, $fpath_dst);
  $ret = $fpath_dst;

tagEND:
  // 結果出力
  echo $ret;

3. 応用

(1) submit時には画像をアップロードしない。

1) 案その1

・<input type=”file”> を <form> ~ </form> の外に書く。
・事前にアップロード済みのファイル名は Session情報に保存しておく。
・Submitされずに残ってしまった画像に対して要garbage collection

2) 案その2

・<form> で enctype=”multipart/form-data” を指定しない。→ ファイルは送信されず。

どうするのが正しいのだろうか…


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)