使用ajax提交表单

时间:2011-05-16 12:53:13

标签: php jquery ajax

我想在运行时使用ajax将视频上传到Bits。

当我通过发布表单上传视频时,就像他们在此处解释的那样:http://www.longtailvideo.com/support/bits-on-the-run/15984/upload-videos-within-your-cms

它工作正常,但是当我尝试使用jQuery帖子时它不起作用。 我用于jQuery帖子的代码是:

<?php
        require_once('botr/init_api.php');

       # Do the API call to build an upload URL.
        # The 'token' MUST be the last parameter for upload progress to work.
        $response = $botr_api->call('/videos/create');
        $token = $response['link']['query']['token'];
        if ($response['status'] == 'error') { die(print_r($response)); }
        $url  = 'http://'.$response['link']['address'].$response['link']['path'];


        # Print the page. All identifiers inside the form are used to display the upload progress.
    ?>
<script type="text/javascript">
$(document).ready(function() {

$('#uploadForm').submit(function() {
                var url = $(this).attr('action');
                 alert(url);
                var dataToBeSent = $(this).serialize();
                alert(dataToBeSent);
                $.post(url, dataToBeSent, function(data, textStatus) {
                  //data contains the JSON object
                  //textStatus contains the status: success, error, etc
                  alert("textStatus");
                  alert(textStatus);
                }, "json");

                 return false
            });
        });
</script>
<form id="uploadForm" action="<?=$url?>" method="POST" enctype="multipart/form-data">
            <fieldset>
                    <label>Select video</label><br>
                    <input id="uploadFile" type="file" name="file" />
                    <input id="key" type="hidden" name="key" value="<?=$response['link']['query']['key']?>" />
                    <input id="api_format" type="hidden" name="api_format" value="json" />
                    <input id="uploadToken" type="hidden" name="uploadToken" value="<?=$token?>" />
                    <input id="token" type="hidden" name="token" value="<?=$token?>" />
                    <div id="uploadBar" style="width:480px; float:left; display:none; background:#FFF; margin:5px 0;">
                    <div id="uploadProgress" style="background:#46800d; width:0px; height:18px;"></div></div>

                    <p class="hint">
                        You can upload any video format (WMV, AVI, MP4, MOV, FLV, ...)
                    </p>
                    <button type="submit" id="uploadButton">Upload</button>
            </fieldset>
    </form>

当我提交表单时,网址的提醒会显示http://upload.bitsontherun.com/v1/videos/upload 和dataToBeSent的警报显示 键= XXX&安培; api_format = JSON&安培; uploadToken = YYY&安培;标记= YYY

但没有任何反应。

任何想法为什么?

------------------------------ update ---------------- ------------- 我已经尝试使用隐藏的iframe并将目标添加到表单但它不起作用,表单正在提交并且整个页面正在刷新...任何想法?

<form id="uploadForm" terget="botr_ifram" action="<?=$url?>" method="POST" enctype="multipart/form-data" >
            <fieldset>
                    <label>Select video</label><br>
                    <input id="uploadFile" type="file" name="file" />
                    <input id="uploadToken" type="hidden" name="uploadToken" value="<?=$token?>" />
                    <div id="uploadBar" style="width:480px; float:left; display:none; background:#FFF; margin:5px 0;">
                    <div id="uploadProgress" style="background:#46800d; width:0px; height:18px;"></div></div>

                    <p class="hint">
                        You can upload any video format (WMV, AVI, MP4, MOV, FLV, ...)
                    </p>
                    <button type="submit" id="uploadButton">Upload</button>
            </fieldset>
    </form>
    <iframe width="0" id=”botr_ifram” name="botr_ifram" height="0" border="0" frameborder="0" scrolling="auto" align="center" hspace="0" vspace=""></iframe>

4 个答案:

答案 0 :(得分:1)

我认为你的问题可能是它无法通过直接的ajax调用。这是你在API的世界里会看到更多的东西,使用last.fm它也不可能直接调用。

这就是为什么你可以试着打电话给你自己的php文件,它会联系你现在想要联系的网址。利用curl来呼叫该服务。

所以我所做的就是调用我的php文件中的所有参数,以及api调用(如upload,remove,...)。在服务器上,我将使用curl创建调用来执行此操作。当您的数据返回时,您将其打印在页面上,您可以在您的应用程序中使用它。

答案 1 :(得分:0)

您无法通过类似的Ajax发送文件输入字段。您只能通过实际发布表单元素(通过浏览器的表单提交内容,而不是通过ajax)将文件发送到服务器。

好吧,提交表单不是唯一的方式。还有其他几个,每个都有它的问题:

  1. 如果 您的用户使用支持新File API的浏览器,您可以使用客户端JavaScript读取该文件并发布该文件通过ajax将数据发送到服务器,但它比以正常方式发送表单要多得多,而且对File API的支持仍然非常粗略。)

  2. 您可以使用基于Flash的上传器小部件。

  3. ...但是一个简单的简单表单提交是经过验证的,并不要求用户安装任何特殊内容。您可以将target元素的form隐藏iframe,这样您的网页就不会被表单提交拆除,如果这是您要避免的内容。然后,您可以观察结果的iframe,以通知用户。

答案 2 :(得分:0)

  

来自文件选择元素的数据未被序列化。

- http://api.jquery.com/serialize/

如果您想在不离开页面的情况下上传文件,那么您需要使用隐藏的iframe或类似Flash小程序的内容,您不能使用XMLHttpRequest。

答案 3 :(得分:0)

你必须使用iframe或类似的东西来做你想做的事......看看http://valums.com/ajax-upload/我认为这就是你想要的。