AJAXでPHPデータを返す

Question

完全にカスタムのCMSシステムを構築し、現在Image Uploaderを構築する方法をゆっくりと学んでいます。 Iveは私のPHPフォームを動作させましたが、AJAXを使用してupload.phpファイルにデータを送信して返します。これまでのところ、私はフォームデータをPHPに正常に送ることができ、イメージはmy uploadsフォルダにアップロードされています。私が抱えている問題は、それが成功したかどうか私に教えてくれるものは何も返されないということです。私はそれが成功した場合、そしてエラーメッセージが表示されない場合、イメージを表示したいと思います。私はJavascriptやAJAXを使った経験がないので、誰かが私のコードを見て、どこに間違っているのか教えてください。

HTMLアップロードフォーム

<div class="container-main"> 
    <form action="" method="post" id="myForm" enctype="multipart/form-data"> 
    <input type="file" name="file" id="file"><br> 
    <input type="submit" id="upload-img" name="submit" class="btn btn-success" value="Upload Image"> 
    </form> 

    <div class="progress progress-striped active"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 
     <span class="sr-only">0% Complete</span> 
    </div> 
    </div> 
    <div class="image"> 
    <!-- uploaded image goes here --> 
    </div> 
</div> 

<script type="text/javascript" src="js/custom.js"></script> 

JS

$('#upload-img').on('click', function() { 
    var file_data = $('#file').prop('files')[0]; 
    var form_data = new FormData();     
    form_data.append('file', file_data); 
    alert(form_data);        
    $.ajax({ 
       url: 'upload.php', // point to server-side PHP script 
       dataType: 'text', // what to expect back from the PHP script, if anything 
       cache: false, 
       contentType: false, 
       processData: false, 
       data: form_data,       
       type: 'post', 
       success: function(){ 
        $(".image").html("<img src='"+response.responseText+"' width='100%'/>"); 

       } 
    }); 
}); 

$allowedExts = array("gif", "jpeg", "jpg", "png","GIF","JPEG","JPG","PNG"); 

$temp = explode(".", $_FILES["file"]["name"]); 

$extension = end($temp); 

if ((($_FILES["file"]["type"] == "image/gif") 
|| ($_FILES["file"]["type"] == "image/jpeg") 
|| ($_FILES["file"]["type"] == "image/jpg") 
|| ($_FILES["file"]["type"] == "image/pjpeg") 
|| ($_FILES["file"]["type"] == "image/x-png") 
|| ($_FILES["file"]["type"] == "image/png")) 
&& in_array($extension, $allowedExts)) { 

    if ($_FILES["file"]["error"] > 0) { 
    echo "Invalid File Type"; 
    } else { 
    $target = "../upload/"; 
    move_uploaded_file($_FILES["file"]["tmp_name"], $target. $_FILES["file"]["name"]); 
    echo "../upload/" . $_FILES["file"]["name"]; 

    } 
} else { 
    echo "Error uploading image"; 
    die(); 
} 

upload.php多くの感謝！

Answer 1

あなたは

（それはとにかく存在しない）.responseTextプロパティを使用する必要はありませんし、あなたの関数はそうのようにする必要があります：私は周りのあなたの単一/二重引用符を変更

success: function(response){ 
        $(".image").html('<img src="'+response+'" width="100%"/>'); 

       } 

注意。