Загрузить изображение с помощью jquery

Question

У меня есть рабочий php-код для загрузки изображения в базу данных. Возможно ли преобразовать его в jquery? Если да, что мне нужно делать? Я новичок в jquery btw. Спасибо

Этот код работает нормально. Но мне нужно сделать это в jquery.

<form action = 'upload.php' method = 'post' enctype="multipart/form-data"> 

    <input type="file" name="image" > <br> 
    <input type= 'submit' value = 'Add' id = 'Add' name = 'Add'> 

</form> 


<?php 
    if(isset($_FILES['image'])) 
    { 
    $target_Path = "images/"; 
    $target_Path = $target_Path.basename($_FILES['image']['name']); 
    move_uploaded_file($_FILES['image']['tmp_name'], $target_Path); 

    $name = $_FILES['image']['name']; 
    } 
    if(isset($_POST['Add'])) 
    { 

     if($_POST["Add"] == "Add") 
     { 
     $add = "Insert Into img(path) Values('$name')"; 
     $up = mysql_query($add); 

      $status = "Upload success!"; 
      print '<script type="text/javascript">'; 
      print 'alert(" '.$status.' ")'; 
      print '</script>';     
     } 
    } 

Answer 1

Вы можете сделать ajax-call вместо этого, чтобы отправить форму. Вы можете использовать что-то вроде этого, а также:

https://blueimp.github.io/jQuery-File-Upload/

Хотя, вы все равно должны иметь свой код PHP для того, чтобы сохранить файл на сервере

Answer 2

<form action='upload.php' method='post' enctype="multipart/form-data" id="formupload"> 
    <input type="file" name="image"/> <br> 
    <input type='submit' value='Add' id='Add' name='Add/> 
</form> 

1. Вам необходимо сначала настроить обратный вызов для события отправки формы.

   $("#formupload").on("submit", upload_image); 
   

   • JQuery селекторы много работает как CSS; $("#formupload") выбирает элемент с идентификатором formupload.
   • on Используется для регистрации обработчика события.
   • Здесь мы создаем обработчик (функция upload_image) для события submit элемента с идентификатором formupload.

2. Сделать вызов AJAX скрипту php.

   function upload_image(event){ 
   
       event = event || window.event; 
   
       // Prevent the default form action i.e. loading of a new page 
       if(event.preventDefault){ // W3C Variant 
        event.preventDefault(); 
       } 
       else{ // IE < 9 
        event.returnValue = false; 
       } 
   
       $.ajax({ 
        url: "upload.php", 
        type: "POST", 
        data: new FormData($('#formupload')[0]), 
   
        success : function(data){ 
         // Show success message 
        }, 
        enctype: 'multipart/form-data', 
        processData: false, 
        contentType: false, 
        cache: false 
       }); 
   } 
   

   • Вы можете предотвратить действие по умолчанию формы представления, который должен загрузить ответ POST, который является то, что первые несколько строк функции делает.
   • Вызов AJAX производится с использованием $.ajax, который является утилитой jQuery для выполнения вызова AJAX.
   • Свойство url должно заполняться соответствующим свойством PHP-скрипта.
   • Поскольку это загрузка файла, укажите метод HTTP как POST.
   • Свойство data - это полезная нагрузка запроса POST, который является содержимым файла, который вы пытаетесь загрузить.
   • Вы можете указать обратный вызов успеха, используя свойство success, которое является функцией, которая будет вызываться при завершении загрузки файла.