Wie kann man eine Variable in einer Ajax-Antwort zurückgeben?

Question

Ich verwende ein Skript, um Bilder auf einen Server hochzuladen. Es verwendet Ajax, um das Bild in ein PHP-Skript zu posten, wo das Bild nach der Validierung einen eindeutigen Dateinamen erhält, bevor es in einem Verzeichnis gespeichert wird. Ich versuche zu verstehen, wie der neue Dateiname des Bildes wieder auf meine Formularseite als eine Variable gebracht wird, wo ich dann diese neue Variable verwenden kann, zum Beispiel echo es in <?php echo "new_file_name"?>. Jede Hilfe würde wirklich geschätzt werden.

my_form_page.php

<div id="preview"><img src="no-image.jpg" /></div> 
<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data"> 
     <input id="uploadImage" type="file" accept="image/*" name="image" /> 
     <input id="button" type="submit" value="Upload"> 
    </form> 
    <div id="err"></div> 

<h2>The new file name is: <?php echo "new_file_name"?></h2> 

Die jquery

$(document).ready(function (e) { 
    $("#form").on('submit',(function(e) { 
     e.preventDefault(); 
     $.ajax({ 
      url: "ajaxupload.php", 
      type: "POST", 
      data: new FormData(this), 
      contentType: false, 
      cache: false, 
      processData:false, 
      beforeSend : function() 
      { 
       //$("#preview").fadeOut(); 
       $("#err").fadeOut(); 
      }, 
      success: function(data) 
      { 
       if(data=='invalid') 
       { 
        // invalid file format. 
        $("#err").html("Invalid File !").fadeIn(); 
       } 
       else 
       { 
        // view uploaded file. 
        $("#preview").html(data).fadeIn(); 
             $("#file_name").html(data).fadeIn(); 
        $("#form")[0].reset(); 
       } 
      }, 
      error: function(e) 
      { 
       $("#err").html(e).fadeIn(); 
      }   
     }); 
    })); 
}); 

ajaxupoad.php

<?php 

$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions 
$path = 'uploads/'; // upload directory 

if(isset($_FILES['image'])) 
{ 
    $img = $_FILES['image']['name']; 
    $tmp = $_FILES['image']['tmp_name']; 


    // get uploaded file's extension 
    $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION)); 

    // can upload same image using rand function 
    $final_image = rand(1000,1000000).$img; 

    // check's valid format 
    if(in_array($ext, $valid_extensions)) 
    {     
     $path = $path.strtolower($final_image); 

     if(move_uploaded_file($tmp,$path)) 
     { 
      echo "<img src='$path' />"; 


     } 
    } 
    else 
    { 
     echo 'invalid'; 
    } 
} 


?> 

Answer 1

Um den Dateinamen zurück in das Skript zu bekommen, einfach in php wiederholen! Ich würde für Ihre Antwort JSON als Wrapper verwenden, so dass Sie mehrere Werte zurückschicken können, wie diese

$response = array(
    'status' => 'success', 
    'name' => $img, 
    'path' => $path 
); 

echo(json_encode($response)); 
exit(); 

Weiter :), fügen Sie unter „Datentyp“ auf Ihre Ajax-Anforderung, wie so

$.ajax({ 
     url: "ajaxupload.php", 
     type: "POST", 
     data: new FormData(this), 
     contentType: false, 
     cache: false, 
     processData:false, 
     dataType: 'json', <-- THIS RIGHT HERE 

Nun ist die Server-Antwort wird automatisch als JSON analysiert werden, so können Sie Ihre Antwort zugreifen wie so

success: function(data) 
     { 
      if(data['status']=='invalid') 
      { 
       // invalid file format. 
       $("#err").html("Invalid File !").fadeIn(); 
      } 
      else 
      { 
       var name = data['name']; 
       // view uploaded file. 
       $("#preview").html('<img src="' + data['path'] + '">').fadeIn(); 
            $("#file_name").html(data).fadeIn(); 
       $("#form")[0].reset(); 
      } 
     }, 

nur sicherstellen, dass, wann immer Sie Ihre pHP-Skript echo in, json_encode Sie die respons E zuerst, dann Ausfahrt !! Andernfalls wird das Skript weiterhin ausgeführt, und Sie erhalten mehrere Antworten und alle werden verwirrt.

PS: In ajaxupoad.php, vergessen Sie nicht

else{ 
    echo invalid; 
} 

zu

else{ 
    echo(json_encode(array(
     'status' => 'invalid' 
    ))); 
    exit(); <-- Seriously, that really is important... 
} 

Answer 2

von PHP-Skript echo nur $ Pfad und in Ajax-Antwort verwenden

$("#preview").find("img").attr("src", data); 

Hope this may help you