Jquery Сообщение изображение с Ajax

Question

им сделать JQuery мобильное приложение, которое загружает изображение

я использовал этот код, но без AJAX вы не можете захватить эхо от сервера (это один работал отлично)

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

так я реализовал АЯКС пост

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."; 
    } 
} 
?> 

, но как только я нажимаю кнопку отправки, затрачиваемое меня на первой странице выключения приложения без загрузки ничего, что я думаю, означает, что Аякса не был преуспевающим, но Будет проблема?

@edit заметил, что я не добавить кнопку отправки, сделал это, но все еще не работает

@@ редактировать: 28 секунд после подачи переходит в успех, но это не оленья кожа загрузить IMG ни получить обратно эхо в ответ

@@@ редактировать: request

response

Answer 1

сначала вы должны прекратить действие после того, как представить

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

после того, как вы его осуществите, проверьте в консоли браузера (например, в светлячок у вас есть поджигатель), что именно данные вы получили

принимать данные из формы, вы можете просто использовать:

$(this).serialize() 

проверить это: https://api.jquery.com/serialize

Answer 2

Это намного проще, чем то, что все, что делает его ,

Просто передайте элемент формы в конструктор FormData. Все значения ваших элементов ввода с атрибутами name (включая файлы) будут переданы вашему скрипту PHP.

Кроме того, вам необходимо использовать e.preventDefault();, чтобы остановить отправку формы.

$('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; 
     } 
    }) 
});