загрузка файла с помощью jquery (не с флеш-плагинами)

Question

Код успешно загружает файл, когда я удаляю коды скриптов jquery и отправляю. Но при использовании следующего кода текст в выходном div исчезает, и новый текст с другой страницы также не записывается.

<script type="text/javascript">
$(document).ready(function(){
    $("[name='video-submit']").click(function() { 
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            data: $("#VideoForm").serialize(),
            url: "cp.cs.asp?Process=UploadVideo",
            success: function(output) {
                $("#output").html(output);
            },
            error: function(output) {
                $("#output").html(output);
            }
        }); //close $.ajax(
    });
});
</script>
  <div id="form">
        <form  method="post" id="VideoForm">
            <fieldset>
            <div class="required">                
                <label for="VideoURL">Video File</label>
                <input type="file" size="23" name="VideoFile">
                <input type="button" name="video-submit" id="video-submit" value="Upload" />
            </div>
            </fieldset>
        </form>
            <div id="output">
            fds
            </div> 

Answer 1

Вы не можете загружать файлы, используя $("#VideoForm").serialize(), поскольку это будет сериализовать только стандартные входы, но не файлы. Вам может понадобиться использовать плагин .

Кстати, это довольно очевидно. Представьте на мгновение, возможно ли это. Если вы посещаете вредоносный сайт, он может сериализовать и украсть файлы с вашего жесткого диска без согласия пользователя.

Answer 2

Нельзя загружать файлы асинхронно.

Один из подходов, который вы можете попробовать, - это разместить на своей странице скрытый iframe. Форма должна указывать на этот iframe:

<form method="post" action="cp.cs.asp?Process=UploadVideo" target="hiddenIframe">

<iframe style="display:none">

Ваш файл cp.cs.asp может загрузить файл на сервер и затем вернуть путь к файлу, который вы только что загрузили, затем вы можете обновить родительскую страницу требуемым значением и отобразить загруженное изображение, если хотите. Таким образом, вы можете загрузить файл, и у пользователя будет ощущение, что это было сделано асинхронно.

Вы можете проверить этот сайт для простого примера.

http://www.openjs.com/articles/ajax/ajax_file_upload/

Серверный код написан на PHP, но вы можете легко адаптировать его к ASP, ASP.NET, ASP.NET MVC и т. Д ...

Надеюсь, это поможет!