Question

我不是非常喜欢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-loader - 图像完成后上传打印出类似谢谢的内容

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

Answer 1

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

现在，你可以做的是这样的事情：

将表单“target”指向隐藏在页面上的iframe（只需声明一个iframe，给它一个“id”和一个“name”，因为我不知道哪个“目标”指的是:-)和保持“display：none”）
在“提交”表单中，更新页面上的内容以启动一个悸动者（只是展示一个简单的动画GIF，或者更喜欢的东西，如果你喜欢的话）。
让服务器发送回一个响应（记住，最终将在我们的隐藏iframe中），这是一个带有一点javascript的虚拟页面，告诉父页面是时候隐藏/停止动画了。 / LI>

不花哨，你不能让动画取决于文件大小，但它很简单。

Answer 2

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

例如（使用jQuery），

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

将“加载图片”更改为“谢谢！”需要来自服务器的某种信号。我刚刚开始使用AJAX，所以也许更熟悉这些功能的人可能会加入这个？干杯。：）

Answer 3

尝试使用redy to go and fancy解决方案

+编辑+

Lightweight and not so fancy

需要有关创建图像上传表单的帮助

3 个答案: