javascript - 如何使用ajax上传图片

Question

我想上传图像而不刷新页面，但是当我点击提交按钮上传图像时，我的页面仍然刷新。我的ajax代码出了什么问题。当我提交纯文本表单而不是图像文件时，此方法有效。

测试.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

我的建议是将输入更改为按钮 (type="button") - 与输入相比，我更喜欢按钮，因为它们更容易设置样式。

但是您可以执行以下操作来管理提交数据而无需刷新页面:

HTML 示例(不是 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 匹配

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

如果你的 post 脚本返回 html 那么这应该可以工作。如果没有，请告诉我:)