uploading file with jquery (not with flash plugins)

Question

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>

Can you also try using a hyperlink instead of a button? This avoids the posibility that default submit behavior is at play here as well. — Alfero Chingono
– Alfero Chingono, Commented Nov 11, 2009 at 18:08

Darin Dimitrov · Accepted Answer · 2009-11-11 18:09:13Z

3

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.

answered Nov 11, 2009 at 18:09

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Charles Ouellet · Accepted Answer · 2009-11-11 18:20:02Z

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!

Collectives™ on Stack Overflow

uploading file with jquery (not with flash plugins)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related