質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.32%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 4
  • VIEW 8,651

osamuya

score 244

お世話になります。
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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/09/06 09:24

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

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

    キャンセル

  • 2014/09/08 13:17

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

    キャンセル

0

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")  );
    
?>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/09/25 14:00

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

    キャンセル

0

プレビュー

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

関連ワード: ajax 画像 ファイルアップロード 読み込み