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>

Answer 1

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.

Answer 2

Based on your description, I'd guess that your error handler function is getting called. As per the jQuery API docs the error handler function gets passed 3 parameters: XMLHttpRequest, textStatus, and errorThrown. Try this, and see what you get:

$.ajax({
    type: "POST",
    enctype: 'multipart/form-data',
    data: $("#VideoForm").serialize(),
    url: "cp.cs.asp?Process=UploadVideo",
    success: function(output) {
        $("#output").html(output);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest);
        alert(textStatus);
        alert(errorThrown);
    }
});

If I'm right, and your error function is what's getting called, then your original code is passing the XMLHttpRequest into $("#output").html(), which isn't going to get you want you want.

Answer 3

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%5Ffile%5Fupload/

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

Hope it helps!