JQuery Beitrag Bild mit Ajax

Question

im jQuery mobilen app zu machen, die ein Bild hochgeladen

ich diesen Code verwendet, aber ohne Ajax kippt Sie das Echo vom Server erfassen (dies hat perfekt funktioniert)

<form action="http://tipsnow.altervista.org/upload.php" method="post" enctype="multipart/form-data"> 
      Title: <input type="text" name="title" id="title" /> 
      Question Text: <input type="text" name="text" id="text" /> 
      <input type="hidden" id="idUtente" name="idUtente" value=""> 
      Select image to upload: 
      <input type="file" name="fileToUpload" id="fileToUpload"> 
      <input type="submit" value="Upload Image" name="submit"> 
     </form> 

so i implementiert, um die ajax-Post

html

<form action=""> 
        Title: <input type="text" name="title" id="title" /> 
        Question Text: <input type="text" name="text" id="text" /> 
        <input type="hidden" id="idUtente" name="idUtente" value=""> 
        Select image to upload: 
        <input type="file" name="fileToUpload" id="fileToUpload"> 
        <input type="submit" value="Upload Image" name="submit"> 
       </form> 

jquery

$(document).ready(function() { 

      $('form').submit(function() { 
       var title = document.getElementById('title').value; 
       var idUtente = sessionStorage.getItem('autenticato').toString(); 
       var text = document.getElementById('text').value; 
       var fileToUpload = document.getElementById('fileToUpload').files[0]; 

       var formData = new FormData(); 
       formData.append('title', title); 
       formData.append('text', text); 
       formData.append('idUtente', idUtente); 
       formData.append('fileToUpload', fileToUpload); 
       $.ajax({ 
        url: 'http://tipsnow.altervista.org/upload.php', 
        data: formData, 
        type: 'post', 
        dataType: 'text', 
        contentType: false, 
        enctype: 'multipart/form-data', 
        processData: false, 
        success: function (data) { 
         alert(data); 
         return false; 
        } 
       }) 
      }); 

php

<?php 
$target_dir = "uploads/"; 
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]); 
$uploadOk = 1; 
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); 
// Check if image file is a actual image or fake image 
if(isset($_POST["submit"])) { 
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]); 
    if($check !== false) { 
     echo "File is an image - " . $check["mime"] . "."; 
     $uploadOk = 1; 
    } else { 
     echo "File is not an image."; 
     $uploadOk = 0; 
    } 
} 
// Check file size 
if ($_FILES["fileToUpload"]["size"] > 500000) { 
    echo "Sorry, your file is too large."; 
    $uploadOk = 0; 
} 
// Allow certain file formats 
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" 
&& $imageFileType != "gif") { 
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; 
    $uploadOk = 0; 
} 
// Check if $uploadOk is set to 0 by an error 
if ($uploadOk == 0) { 
    echo "Sorry, your file was not uploaded."; 
// if everything is ok, try to upload file 
} else { 
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) { 
     echo "The file ". basename($_FILES["fileToUpload"]["name"]). " has been uploaded."; 
    } else { 
     echo "Sorry, there was an error uploading your file."; 
    } 
} 
?> 

aber sobald ich die Submit-Taste drücken sie mich auf die erste Seite aus der App erfolgt, ohne etwas hochladen, was meiner Meinung nach bedeutet, dass die Ajax war nicht erfolgreich, aber was ist der Problem?

@edit bemerkt, dass ich habe nicht den Absenden-Button anhängen, tat es aber immer noch nicht funktioniert

@@ edit: 28 Sekunden nach dem Absenden geht es in Erfolg, aber es funktioniert nicht das img laden weder die Echos zurück in Antwort erhalten

@@@ edit: request

response

Answer 1

zuerst müssen Sie Aktion stoppen, nachdem einreichen

$("form").submit(function(event) { 
    event.preventDefault(); 
    (...) 
} 

Nachdem Sie es implementieren, überprüfen Sie in der Browserkonsole (z. B. in Firefox haben Sie Firebug), was genau Daten, die Sie

bekam Daten aus Form nehmen können Sie einfach verwenden:

$(this).serialize() 

es überprüfen: https://api.jquery.com/serialize

Answer 2

Es ist viel einfacher, als das, was jeder es macht .

Einfach das Formularelement in einen FormData Konstruktor übergeben. Alle Werte Ihrer Eingabeelemente mit name Attributen (einschließlich Dateien) werden an Ihr PHP-Skript übergeben.

Sie müssen auch e.preventDefault(); verwenden, um das Senden des Formulars zu stoppen.

$('form').submit(function (e) { 
    e.preventDefault(); 

    // 'this' refers to this current form element 

    $.ajax({ 
     type: 'post', 
     url: 'http://tipsnow.altervista.org/upload.php', 
     data: new FormData(this), // important 
     contentType: false, // important 
     processData: false, // important 
     success: function (data) { 
      alert(data); 
      return false; 
     } 
    }) 
});