如何使用ajax上传图片答案

【问题标题】：how to upload an image using ajax如何使用ajax上传图片
【发布时间】：2017-06-15 15:34:12
【问题描述】：

我想在不刷新页面的情况下上传图片，但是当我点击提交按钮上传图片时，我的页面仍然刷新。我的ajax代码有什么问题。这适用于提交纯文本表单但不使用图像文件的表单。

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>

【问题讨论】：

if(institute != "") institute 第一次定义在哪里？你的意思可能是image。编辑：此评论根据原帖stackoverflow.com/revisions/44571570/1
我认为您正在尝试发送 image 而不是 institute。
@ThisGuyHasTwoThumbs 一定会爱上"not my real code, so I'll just edit that, without marking it as a mistake..."
@TezWingfield OP 做了，问他们。
上传文件需要使用formData。见This answer

标签： javascript php ajax

【解决方案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，那么这应该可以工作。否则请告诉我:)

【讨论】：

现在“这个”我喜欢。
@Fred-ii- 除非它没有涵盖如何使用 Javascript/AJAX 上传图片，这才是问题的真正意义
结尾“
”在哪里 ;) - 笑话

@RiggsFolly 问题描述或标题未提及图像 - 仅提及代码。我正在回答手头的问题而不是完整的解决方案，所以应该将其用作指导而不是绝对

【解决方案2】：

我使用 formdata 将我的图像文件发送到服务器解决了这个问题

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

             }

          });


});

【讨论】：