Javascript 需要创建图像上传表单的帮助吗

我不太懂ajax和javascript，所以我请求帮助。这里是交易，我有图像表单上传工作的旧方式：

<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部分已经实现工作，我只是需要一些帮助与此。谢谢

尝试使用解决方案

+编辑+

---

基本问题是，您不能通过XMLHTTPRequest（即“ajax”）直接进行文件上传。你必须寄一张表格

现在，你可以这样做：

• 将表单“target”指向隐藏在页面上的iframe（只需声明一个iframe，给它一个“id”和一个“name”，因为我永远不确定哪个“target”引用：-），并将其保留为“display:none”）
• 在表单“提交”中，更新页面上的内容以启动一个throbber（只需显示一个简单的动画GIF，或者如果您愿意，可以显示一些更奇特的内容）
• 让服务器发送回一个响应（记住，这个响应将在我们隐藏的iframe中结束），这是一个虚拟页面，其中包含一点javascript，以告诉父页面是时候隐藏/停止动画了

---

这并不奇怪，你不能让动画依赖于文件大小，但它很简单。

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

例如（使用jQuery）

$（“按钮”）。单击(
函数（）{
$（'form'）.submit（）；
$（'div.result'）.html（'非常感谢！
'）；
返回false；
}
);

---

将“加载图片”更改为“谢谢！”需要服务器发出某种信号。我刚开始使用AJAX，所以也许有更熟悉这些函数的人可以添加到这一点上？干杯。：）

这看起来不错，但我宁愿写几行代码，而不是使用整个插件，它为我的页面添加了+kbs，这已经是kidda的重量级了。所有比Hello World更复杂的东西都有bug。。。无论如何，上传文件还有其他小得多的解决方案，比如使用iframe回调也受支持，所以应该这样做-在开始隐藏表单时，添加gif图像作为“ajax加载程序”，在完全隐藏图像时显示“谢谢”。不要被否决票所冒犯，不仅仅是我，而是所有人，点击推特上传你会看到人们说一些垃圾话，即使演示不正常，我个人更喜欢它独立于任何js框架工作，甚至可以与jquery UI一起使用，你也应该点击它。干杯

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