如何使用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

my advice is changing the input to a button (type="button") - I prefer buttons to inputs as they're more easily stylable.

But you can do something like this to govern submitting data without page refresh:

HTML EXAMPLE (NOT A COPY OF YOUR HTML):

<div id="container">
    <form action="" method="post" id="myForm">
        <input type="text" value="hello world!" />
    </form>

    <!-- what's great about buttons, is that you don't have to place inside the form tags -->
    <button type="button" id="submitBtn">

JS To match

$(document).ready(function()
{
    $('#submitBtn').on('click', function()
    {
        //ajaxy stuff
        //will show the success callback function though:
        success: function(res)
                 {
                     $('#container').html(res);   
                 }
    })
});

if your post script returns html then this should work. Let me know if otherwise :)

Answer 2

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(){

             }

          });


});