(61) Ajaxでファイルをアップロード(その2)

投稿者: | 2018年9月27日

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

1. やりたいこと

(60) Ajaxでファイルをアップロード
「3. 応用」-「(1) submit時には画像をアップロードしない。」-「1)案その1」
を実装してみたい。

2. やってみる

一応期待通りの動作をしている。
※garbage collectionは未実装

しかし…

もっとスマートな実現方法があるはずだ…

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

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>

<form action="./viewimg.php" method="post">
  <input type="submit" value="決定">
</form>

</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

<?
  session_start();

  $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);

  $_SESSION['UPFILE'] = $fpath_dst;
  $ret = $fpath_dst;

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

viewimg.php

<?
  session_start();

  $disp = '';
  if(TRUE === isset($_SESSION['UPFILE'])){
    $disp = "<img src='{$_SESSION['UPFILE']}'>";
  }

echo <<< EOM
<!DOCTYPE html>
<html>
  <head></head>
  <body>{$disp}</body>
</html>
EOM;

コメントを残す

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


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