Почему загрузка JQuery на странице PHP во время публикации?

Question

Здравствуйте, я работаю над сайтом, на котором вы можете отправлять изображения. Я не хочу, чтобы страница была перезагружена, когда изображение было отправлено. После того, как изображение опубликовано на php-странице, оно хранит BLOB в базе данных MYSQL.

  form id="form2" action="saveImage.php" method="post" enctype="multipart/form-data"> 
      <input id="thumbage2" name="Image1" class="ModalArea2" type="file" style="display:none">  
      <center><label for="thumbage2" id="labelthumb2" style="margin-top:35px;">Choose Image</label></center> 

      <button class="ModalButton2" >Submit</button> 
      <a class="ModalButton2" onclick="cancel2();">Cancel</a> 
      </form> 

Выше мой код HTML. Вот мой JavaScript/JQuery код:

 $(':file').change(function(){ 
    var file = this.files[0]; 
    var name = file.name; 
    var size = file.size; 
    var type = file.type; 
    //Your validation 
    //console.log(name); 
}); 

$(':button').click(function(){ 
    var formData = new FormData($('form')[0]); 
    $.ajax({ 
     url: 'upload.php', //Server script to process data 
     type: 'POST', 
     xhr: function() { // Custom XMLHttpRequest 
      var myXhr = $.ajaxSettings.xhr(); 
      if(myXhr.upload){ // Check if upload property exists 
       myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload 
      } 
      return myXhr; 
     }, 
     //Ajax events 
     beforeSend: beforeSendHandler, 
     success: completeHandler, 
     error: errorHandler, 
     // Form data 
     data: formData, 
     //Options to tell jQuery not to process data or worry about content-type. 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 
    cancel2(); 
}); 

Я скопировал этот код с веб-сайта, но они не делают большую работу, объясняя, как это работает. Таким образом, на данный момент у меня есть данные, которые отправляются в мой PHP-файл, и это работает. Проблема в том, что файл PHP загружен. Я думал, что весь смысл JQuery заключается не в том, чтобы загрузить файл и остаться на той же странице. Почему этого не происходит? Почему я продолжаю загружать страницу PHP в моем браузере? Спасибо, если вы решите это для меня, я был бы на Луне. Это был настоящий удар в яблоко adams для меня в последнее время.

Answer 1

Я был застрял в аналогичной проблеме один раз, и, насколько я искал, единственный способ загрузить файл без перезагрузки страницы - с помощью iFrames. Но iFrames, для меня, уродливые.

Нижеприведенный подход преобразует изображение в URL-адрес данных, а вместо загрузки изображения загружает URL-адрес данных (который является просто строкой) на сервер.

Я внесла несколько изменений в ваш HTML-код. Мы не хотим отправлять форму, так как это приводит к перезагрузке веб-страницы в браузере. Добавление onsubmit = 'return false;' в тег формы предотвратит отправку формы при нажатии кнопки отправки.

Я добавил несколько идентификаторов к элементам ввода, чтобы сделать их уникальными при доступе в JQuery.

Затем я добавил элемент изображения с атрибутом src. Когда пользователь выбирает изображение из поля ввода, атрибут src этого элемента заполняется URL-адресом данных изображения.

<form id="form2" action="saveImage.php" onsubmit="return false;" method="post" enctype="multipart/form-data"> 
    <input id="imageSelect" name="Image1" class="ModalArea2" type="file" style="display:block;">  
    <center><label for="thumbage2" id="labelthumb2" style="margin-top:35px;">Choose Image</label></center> 
    <button class="ModalButton2" id="uploadImageButton">Submit</button> 
    <a class="ModalButton2" onclick="cancel2();">Cancel</a> 
    <img id="imgURL" src="none"/> 
</form> 

Следующий ваш код JavaScript. Комментарии помогут вам понять, как это работает. Основные изменения:

Добавлен обработчик события на кнопку ввода для выбора изображений. Когда пользователь выбирает изображение с помощью кнопки ввода, происходит событие onchange, а атрибут <img> элемента src заполняется URL-адресом изображения.

Второе важное изменение касается вашего запроса AJAX. Я изменил его на .post, так как он проще читать (по крайней мере для меня) и внутри этого запроса, вместо отправки самого изображения мы отправляем URL-адрес изображения, захваченный из атрибута <img> тега src. Это отправляется в формате JSON, поэтому ваш PHP-скрипт, обрабатывающий запрос на загрузку, должен считывать данные в формате JSON.

$(':file').change(function(){ 
    var file = this.files[0]; 
    var name = file.name; 
    var size = file.size; 
    var type = file.type; 
    //Your validation 
    //console.log(name); 
}); 

$('#uploadImageButton').click(function(){ 
    var imgData = $('#imgURL').src; 
    $.post({ 
     'upload.php', // Name of the PHP script which handles upload function 
     {imageData:imgData}, // Use $_POST['imageData] to access the image data in your PHP script 
     function data() { 
      // whatever you want to do after the POST request is complete 
      alert('Uploaded image'); 
     }; 

    }); 
}); 

$('#imageSelect').change(function(){ 
    readURL(this); 
}); 

function readURL(input) 
{ 
    if(input.files && input.files[0]) 
    { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      $('#imgURL').attr('src', e.target.result); 
     }; 
    } 
    reader.readAsDataURL(input.files[0]); 
} 

Вам нужно будет изменить скрипт так, чтобы он считывал URL данных снимки в формате JSON, а затем сохраняет URL данных в виде файла изображения. Это должно выглядеть так:

<?php 
    function upload() 
    { 
     if(isset($_POST)) 
     { 
      // Get the image data URL 
      $imageData = $_POST['imageData']; 

      // Replace the spaces with plus signs 
      $imageData = str_replace(' ', '+', $imageData); 

      // Decode the image data 
      $imageData = base64_decode($imageData); 

      // Path where you want to save the image 
      $uri = "/image.png"; 

      // Save the image data to an image file on the server 
      file_put_contents($imageData, $uri); 

     } 
    } 
?>