如何使用ajax上传图像

Question

I want to upload an image without refreshing the page,But my page still refresh when i hit submit button to upload image. what is wrong with my ajax code. This works when am submitting form with plain text but not with image file.

test.php

<div class="preview_d_p" id="preview_d_p">
<div class="preview">
    <div class="p_preview">
       <div id="p_p_image"><div id="myimage"></div></div>
    </div>
    <div id="lab"> <label for="photo_upload">upload</label></div>
      <form enctype="multipart/form-data">
      <input type="file" id="photo_upload" name="image_upload">
    <input type="submit" value="save" id="insert_img" onclick="return loadimage()">
    </form>
</div></div>


<script>
function loadimage(){
       var image = documentElement('photo_upload').value;



     $.ajax({
         type:'post',
         url:'profile.php',
         data:{
            image:image

         },
         cache:false,
          success: function(html){

          }

     });

       return false;
    }
</script>

Answer 1

I solved this problem using formdata to send my image file to server

$(document).on("submit","form",function(e){
    e.preventDefault();

    var file = $("#product-file-i").val();
    var p = $("#product-upload-f").children("input[name=name]").val();

 $.ajax({
             type:"post",
             url:"profile.php",
             data:new FormData(this),
             contentType:false,
             processData:false,
             cache:false,
             success: function(feedback){
              alert(feedback);

             },
             error: function(){

             }

          });


});