在创建图片上传表单时需要帮助

Question

我不是真正使用ajax和javascript的gr8，所以我寻求帮助。 这是交易，我使用旧的方式上传图像表格：

<form action="db/photo/do_upload" method="post" enctype="multipart/form-data">  <fieldset id="upload_form">
        <input type="file" name="userfile" size="20" />

    </fieldset>
  <button type="button" class="ui-state-default">Upload</button>
    </form>

我想要的是通过使用Ajax使网页更具吸引力，我该如何做：

单击“上传”按钮后 -开始上传图像-然后在图像上传时显示某种Ajax加载器-图像上传完成后，打印出类似“谢谢”的内容

我有一个已经实现的php部分，正在工作，我只需要一些帮助。 谢谢

Answer 1

基本问题是您不能直接通过XMLHTTPRequest（即“ ajax”）上传文件。 您必须发布一个表格。

现在，您可以执行以下操作：

• 将表单“目标”定向到隐藏在页面上的iframe（只需声明一个iframe，为其指定一个“ id”和一个“名称”，因为我不确定哪一个“目标”是指:-)并保持其“显示：无”）
• 以“提交”的形式，更新页面上的内容以启动更动（只要显示一个简单的GIF动画，或者如果您愿意就更喜欢）
• 让服务器发回一个响应（记住，它将在我们隐藏的iframe中结束），该响应是一个虚拟页面，其中包含一些JavaScript，以告知父页面是时候隐藏/停止动画了。

不花哨，您不能使动画取决于文件的大小，但这很简单。

Answer 2

您可以做的是在发送到下一页之前，使用Javascript捕获“操作”，然后使用JS提交表单。

例如（使用jQuery），

 $('button').click(
    function() {
        $('form').submit();
        $('div.result').html('<p>Thanks a bunch!</p>');
        return false;
    }
 );

将“正在加载图片”更改为“谢谢！” 将需要来自服务器的某种信号。 我刚刚开始使用AJAX，所以也许更熟悉此类功能的人可以添加此内容？ 干杯。 :)

Answer 3

尝试使用redy去看中解决方案

+编辑+

轻巧而不那么花哨