Ajaxで画像をアップロードする

Question

お世話になります。
Ajaxで画像ファイルをPHPに送信するというプログラム書いております。今現在、Ajaxでファイル自体の転送が出来ている感じで、PHP側では$_FIlESを受け取ることができていて、
name=>3e6ffb8b55ca034fc29f49fba2906xxxx.jpg
type=>image/jpeg
tmp_name=>/tmp/phpvSmIDl
error=>0
size=>208500
といういつもの配列の内容を表示するところまではできています。
Ajaxは以下のように書いています。

[Javascript]
var files = $("#image_file").prop('files')[0];
filedata = new FormData();
filedata.append("files", files)

$.ajax({ 
	type:"post",
	url:"./img.php",
	data:filedata,
	contentType: false,
	processData: false

}).done(function(message) { console.log( "Data Saved: " + message ); });

この$_FILESをフォームからPHP（img.php）で受け取って保存しようとする時に私はいつも教科書通りに、

[PHP]
if (is_uploaded_file($_FILES["files"]["tmp_name"])) {
	if (move_uploaded_file($_FILES["files"]["tmp_name"], "files/" . $_FILES["files"]["name"])) {
		echo $_FILES["files"]["name"] . " Success Upload.";
	} else {
		echo "can not upload !";
	}
} else {
		echo "failure !";
}

という風に保存しております。
しかしAjaxで送信した場合にis_uploaded_file()関数ですでにコケていて、php側でアップロードファイルであるかどうかの判断ができないようです。同様にmove_uploaded_file()関数も使えないようでした。
Ajaxで画像ファイルを送信する際にPHP側ではどのような処理をすれば保存できるでしょうか。
（あるいは、何かしら根本的に間違っているのかもしれません。。。$_FILESには文字列しか取得できていないとか。。。）
詳しい方いましたらご教授おねがいいたします。

よろしくおねがいいたします。

Answer 1

Answer 2

NIAさん

お世話になります。
いろいろやって実際に動いたものはこんな感じになりました。かなりミニマルなところまでコードをそぎ落としてあるので、エラーなんかの機能は取り除いていますが、肝は、

$form = $('#upload-form');
fd = new FormData($form[0]);

ですね。
これがわからなかったので、全然動かなかった感じです。
一応動いたソースあげておきました。
uploadというディレクトリだけ作って適切なパーミッションあたえれば動くかと思います。

送信元javascript (index.html)

<script>
function upload(form) {
	$form = $('#upload-form');
	fd = new FormData($form[0]);
	$.ajax(
		'http://example.com/uploader.php',
		{
			type: 'post',
			processData: false,
			contentType: false,
			data: fd,
			dataType: "json",
			success: function(data) {
			alert( data.message );
			console.log(data);
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			alert( "ERROR" );
			alert( textStatus );
			alert( errorThrown );
		}
	});
	return false;
}
</script>

<form id="upload-form" method="post" enctype="multipart/form-data" onSubmit="return upload(this);">
 <input id="upload-form-file" name="userfile" size="27" type="file" accept="image/*;capture=camera"/>

送信先 uploader.php

<?php
  $textUpload = "";
 
  if ($_FILES['userfile']):
      $uploadfile = __DIR__ . '/uploads/image.jpg';
    if (move_uploaded_file($_FILES['userfile']['tmp_name'],$uploadfile)) {
      $textUpload = "File is uploaded";
    } else {
      $textUplaod = "Upload fail";
    }
  endif;
 
	header( 'Content-Type: application/json; charset=utf-8', true ); 
	echo json_encode( array("message" => "Upload is OK")  );
	
?>

Comments

[NIA]

動くようになって何よりです。
実用段階にはセキュリティの対策等が、
少々面倒ですが頑張ってください。
スマホ対応の場合とかでも動画をやられると
処理が止まるか落ちるかしそうですね（笑）

Answer 3

画像をアップロードするだけなら以下の方法が参考になればと、、、

./img_upload.php
※./img/フォルダは、パーティションを777にする
[PHP]
<?php
	$img_tmp  = $_FILES["dataFile"]["tmp_name"];
	$img_name = $_FILES["dataFile"]["name"];
	$img_size = $_FILES["dataFile"]["size"];
	if($_FILES){
		if($img_tmp != "" and $img_size <= 3000000){
			$FilePath = "./img/".date("Ymdhis").".".GetExt($img_name);
			move_uploaded_file($img_tmp,$FilePath);
		}else{
			$size_error = "選択なし。または、ファイルサイズが3メガバイト以上です。";
		}
	}
	// GetExt
	// ファイルの拡張子を取得します。
	function GetExt($FilePath){
		$f=strrev($FilePath);
		$ext=substr($f,0,strpos($f,"."));
		return strrev($ext);
	}
?>

./imglist.php
[PHP]
<?php
	$lst = "./img"; // 表示するリストの名前(パス)

	$dir = dir($lst);

	while($fl=$dir->read()) {
		$timelist[] = filemtime($lst."/".$fl);
		$array_dir[] = $lst."/".$fl;
	}
	array_multisort($timelist,SORT_DESC,$array_dir);
	foreach($array_dir as $fl){
	  if($fl!="./img/.." && $fl!="./img/." ) {
	    echo "<img src='{$fl}' class='img_list' title='クリックして追加' />";
	  }
	}
	$dir->close();
?>

./add.js
[Javascript]
$(function(){
	/*IE対策メソッド--------------------------*/
	$.ajaxSetup({
	    cache: false //キャッシュをさせないようにする
	});
	/*画像の読み込み機能--------------------------*/
	function img_read(){
		$.ajax({
			url: "./imglist.php",
			dataType:"html"
		}).done(function(data){
			if(data!="")
				$("#img_list").html(data);
			else
				$("#img_list").html("追加された画像が表示されます<br />");
		});
	}
	img_read();
	/*画像アップロード機能--------------------------*/
	$("#imgForm").submit(function(){
		var $form, fd;
		$form = $("#imgForm");
		fd = new FormData($form[0]);
			$.ajax($form.attr("action"), {
			type: 'post',
			processData: false,
			contentType: false,
			data:fd,
			dataType:'html'
	    	}).done(function(){
	    		if($("#sendFile").val()!="")
					$("#img_message").html("送信完了");
	    		else
	    			$("#img_message").html("選択してください");
				img_read();
	    	}).fail(function(){
				$("#img_message").html("送信失敗");
	        });
		return false;
	});
});

[HTML]
<script type="text/javascript" src="./jquery-2.0.3.js"></script><!--ダウンロードしてくる-->
<script type="text/javascript" src="./add.js"></script>
<!-- img -->
<div id="contents_image">
IMAGE&nbsp;
<span id="img_message"></span>
<form id="imgForm" method="post" action="./img_upload.php" enctype="multipart/form-data" encoding="multipart/form-data">
<input name="dataFile" id="sendFile" type="file" size="22" /><br />
<input id="imgSubmit" type="submit" value="送信">
</form>
<br />
</div>
<div id="img_list">
追加された画像が表示されます<br />
</div>

即席で作ったので動かなかったら適当に流してもらって構いません！

Comments

[osamuya]

ありがとうございます。とても参考になりました。
実際に何とかAjaxを使ってシームレスに画像のアップロードができるようになりました。仕組み的には理解できているのですが、何らかのコードでひかかっていたみたいです。
また以下のサイトさん参考になりました。
http://blog.asial.co.jp/1260

動くようにはなったのですが、解析がまだ全然できていなくて細かいカスタマイズがまだできない状況でありますので、またご報告いたします。
ありがとうございます。

[NIA]

参考になって良かったです。
解析の方も頑張ってください。