CODEWITHSUNDEEP
jqueryasp-classic
Zannube D.
Zannube D.

Reputation: 33

uploading file with jquery (not with flash plugins)

Code successfully upload file when I remove jquery script codes and submit. But with the following code, text in output div disappears and new text from other page does not write there either.

<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>

Upvotes: 0

Views: 1864

Answers (2)

Charles Ouellet
Charles Ouellet

Reputation: 6518

You can not upload files asynchronously.

One approach that you can try is to put an hidden iframe in your page, you form should point to this iframe:

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

<iframe style="display:none">

Your cp.cs.asp file could upload the file to the server and then return the path to the file you just uploaded, then you can update the parent page with the value you want and display the uploaded image if you want. This way you can upload a file and the user has the feeling that it has been done asynchronously.

You can check this website for a simple example.

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

The server code is in PHP but you can easily adapt this to ASP, ASP.NET, ASP.NET MVC, etc...

Hope it helps!

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1038730

You cannot upload files using $("#VideoForm").serialize() as this will serialize only standard inputs but not files. You may need to use a plugin.

By the way this is pretty obvious. Imagine for a moment if this was possible. If you visit a malicious site it could serialize and steal files from your hard disk without user consent.

Upvotes: 3

Related Questions