Загрузка изображения ajax jquery

Im новое для jQuery. Я пытаюсь загрузить файл изображения jpg с помощью метода ajax. Но когда я загружаю, он не загружается. Может ли кто-нибудь помочь мне сделать это?

HTML

<form action="" method="POST" enctype="multipart/form-data"> <input type="file" name="image" id="image"/> </form> 

JQuery

 $('#submit').click(function() { var image=$('#image').val() $.post("upload.php",{image:image},function(data) { alert(data); }); } }) 

PHP

 <?php $image=$_POST['image']; $imagename=date("dmY")."-".time()."jpg"; $target_path = "uploads/".$imagename; if(move_uploaded_file($image, $target_path)) { echo 'moved'; } else { echo 'error'; } ?> 

Related of "Загрузка изображения ajax jquery"

Чтобы загрузить файл с помощью ajax вам необходимо использовать FormData как FormData ниже.

 $("form").on('submit', (function(e) { e.preventDefault; var formData = new FormData(this); $.ajax({ url : "upload.php", type : "POST", data : formData, cache : false, contentType : false, processType : false, success : function(data) { alert(data); } }); })); 

И ваш PHP скрипт должен выглядеть следующим образом.

 <?php $image=$_FILES['image']; $image_tmp =$_FILES['image']['tmp_name']; $imagename=date("dmY")."-".time().".jpg"; $target_path = "uploads/".$imagename; if(move_uploaded_file($image_tmp, $target_path)) { echo 'moved'; } else { echo 'error'; } ?>