Отправка формы с помощью ajax

Question

Я хочу загрузить видео в Bits on the Run, используя ajax.

Когда я загружаю видео, публикуя форму, как они объясняют здесь: 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>

Когда я отправляю форму, предупреждение URL показывает http://upload.bitsontherun.com/v1/videos/upload, а уведомление dataToBeSent показывает ключ = XXX & api_format = json & uploadToken = YYY & token =ГГГГ

но ничего не происходит.

Есть идеи почему?

------------------------------ обновление ----------------------------- Я пытался использовать скрытый 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>

---

Answer 1

Я думаю, что ваша проблема может быть в том, что он не будет работать через прямой вызов ajax. Это то, что вы увидите больше в мире API. С last.fm также невозможно выполнять эти прямые вызовы.

Вот почему вы можете попытаться вызвать свой собственный php-файл, который свяжется с URL, с которым вы сейчас пытаетесь связаться. Используйте curl для вызова этой услуги.

Итак, я делаю все параметры в вызове моего php-файла вместе с вызовом API (например, загрузка, удаление, ...). На сервере я создаю вызов, используя curl для этого. Когда ваши данные возвращаются, вы распечатываете их на своей странице и можете использовать в своем приложении.

Answer 2

Данные из элементов выбора файлов не сериализуются.

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

Если вы хотите загружать файлы, не покидая страницы, вам нужно использовать скрытый iframe или что-то вроде апплета Flash, вы не можете использовать XMLHttpRequest.

Answer 3

Вы должны использовать iframes или что-то в этом роде, чтобы делать то, что вы хотите ... смотрите здесь http://valums.com/ajax-upload/ я думаю, что это то, что вы хотите.

Answer 4

Вы не можете отправлять поля ввода файлов через ajax.Вы можете отправлять файлы на сервер, только отправив элемент формы (через отправку формы в браузере, а не через ajax).

Хорошо, отправка формы - это не ваша только путь.Есть несколько других, у каждого из которых есть свои проблемы:

1. Если ваш пользователь использовал браузер, который поддерживает новый Файловый API , вы можете читать файл с помощью клиентского JavaScript и отправлять эти данные на сервер через ajax, но это гораздо больше, чем просто отправка в форме обычным способом, и поддержка Файлового APIвсе еще довольно схематично.)

2. Вы можете использовать виджет загрузчика, основанный на Flash.

... но пробуется хорошая простая отправка форм-и-правда и не требует, чтобы у пользователя было установлено что-то специальное.Вы можете сделать target элемента form скрытым iframe, чтобы ваша страница не порвалась при отправке формы, если вы этого хотите избежать.Затем вы можете посмотреть iframe для результата, чтобы уведомить пользователя.