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

У меня есть рабочий 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>'; } } 

 <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 ie 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 , которое является функцией, которая будет вызываться при завершении загрузки файла.

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

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

Хотя вам все равно нужен ваш php-код для хранения файла на вашем сервере