Ajaxで画像をアップロードする
解決済
回答 3
投稿
- 評価
- クリップ 4
- VIEW 10K+
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には文字列しか取得できていないとか。。。)
詳しい方いましたらご教授おねがいいたします。
よろしくおねがいいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
./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
<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>
即席で作ったので動かなかったら適当に流してもらって構いません!
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
お世話になります。
いろいろやって実際に動いたものはこんな感じになりました。かなりミニマルなところまでコードをそぎ落としてあるので、エラーなんかの機能は取り除いていますが、肝は、
$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") );
?>
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.10%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
同じタグがついた質問を見る
関連ワード: ajax 画像 ファイルアップロード 読み込み
2014/09/06 09:24
実際に何とかAjaxを使ってシームレスに画像のアップロードができるようになりました。仕組み的には理解できているのですが、何らかのコードでひかかっていたみたいです。
また以下のサイトさん参考になりました。
http://blog.asial.co.jp/1260
動くようにはなったのですが、解析がまだ全然できていなくて細かいカスタマイズがまだできない状況でありますので、またご報告いたします。
ありがとうございます。
2014/09/08 13:17
解析の方も頑張ってください。