上传具有图像文件的表单而不刷新页面答案

【问题标题】：Uploading a form having an image file without refreshing the page上传具有图像文件的表单而不刷新页面
【发布时间】：2013-08-18 13:30:26
【问题描述】：

我想将表单发布到处理表单并将数据添加到数据库中的 php 脚本，然后将刚刚上传的表单发送回 jquery 的事件处理程序。表单中包含一个图像文件。我的问题是我没有从 php 脚本返回到事件处理程序的响应。

      $('#Form').on('submit',function(e){
            e.preventDefault();           
        $("#output").html('loading...');
        $("#Form").ajaxForm({
            target: '#output'
            };

        });
 <form action="post.php" method="post" enctype="multipart/form-data" id="Form">
        <textarea class="post" name="text" style="height:10; font-size:16px;">    </textarea>

        <input type="file" name="pic"  class="post_image"/>   
         <input type="submit" name="subp" id="postButton" value="post" class="post_button" />    
        </form> 

        <div id="output"></div>


          //post.php

    <?php
echo "hi";
    ?>

问题是#output div 总是显示“正在加载...”而不是应该显示 php 脚本返回的“hi”。

【问题讨论】：

标签： php jquery forms upload

【解决方案1】：

你必须使用 iframe 来实现这种功能

<form enctype="multipart/form-data" method="post" action="post.php" target="imageUploaderFrame">
<label>Upload Image: </label><input type="file" name="profile_image" id="uploadProfileImage"/>
</form>

<iframe id="imageUploaderFrame" name="imageUploaderFrame" style="display:none"></iframe>

【讨论】：

即使我只想要 #output div 中 php 脚本的“hi”输出（不是图像），它也没有响应，我认为不需要。

【解决方案2】：

**you should fadeout div output when success your ajaxFrom**
$("#Form").ajaxForm(
{
  target: '#output',
  success: function() 
  { 
      $("#output").fadeOut(2000);
  } 
};

【讨论】：