Jquery form plugin file upload

Question

i have a problem with jquery form plugin. I try to upload a file asynchronously but it does not submit the form. html markup and javascript code are like below

<form id="fileUploadForm" method="post" action="Default.aspx" enctype="multipart/form-data">
<input type="text" name="filename" />
<input type="file" id="postedFile" name="postedFile" />
<input type="button" value="Submit" onclick="UploadFile();" />
</form>

$(document).ready(function() {

        $('#fileUploadForm').ajaxForm();            
    });

function UploadFile() {

        var options =
        {                
            url:"Default.aspx",                
            beforeSend: ShowRequest,
            success: SubmitSuccesfull,
            error:AjaxError                               
        };            
        $("#fileUploadForm").ajaxSubmit(options);
        return false;
    }.

I have another test form it has only a textbox in it and it works fine. Also when i comment the input type="file"... line the above form works fine too. What is the problem with input type file? Any Idea?

Nick Craver · Accepted Answer · 2010-02-20 19:03:37Z

8

In short:

<input type="file" />

Cannot be submitted via ajax, it has to be a full postback. Traditionally you use an iFrame for this if you want AJAX style behavior. I've used a few solutions to this, without knowing what platform you're on, SWFUpload is usually a good option.

Here's a full document example of a fix:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Javascript/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="Javascript/jquery.form.js"></script>
    <script type="text/javascript">
        $(function() {            
          $('#fileUploadForm').ajaxForm({                 
            beforeSubmit: ShowRequest,
            success: SubmitSuccesful,
            error: AjaxError                               
          });                                    
        });            

        function ShowRequest(formData, jqForm, options) {
          var queryString = $.param(formData);
          alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString);
          return true;
        }

        function AjaxError() {
          alert("An AJAX error occured.");
        }

        function SubmitSuccesful(responseText, statusText) {        
          alert("SuccesMethod:\n\n" + responseText);
        }    
    </script>
</head>
<body>
    <form id="fileUploadForm" method="POST" action="Default.aspx" enctype="multipart/form-data">
      <input type="text" name="filename" />
      <input type="file" id="postedFile" name="postedFile" />
      <input type="submit" value="Submit" />
    </form>
</body>
</html>

edited Feb 20, 2010 at 19:03

answered Feb 20, 2010 at 13:38

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

9 Comments

mehmet6parmak Over a year ago

Thanks for your response could you check the link below jquery.malsup.com/form/#file-upload am i misunderstanding it?

Nick Craver Over a year ago

@mehmet6parmak - Added alternative above, give it a shot, see if you still have issues. Are you using FireBug or something to see if any action/error is taking place?

mehmet6parmak Over a year ago

i did not use firebug but i debug it in visual studio however i could not understand what is happening inside jquery(indeed as you mentioned above it creates an iframe thats the only thing i understood =)).I tried to use jquery's error handler but that method never executed. If i find the problem i'll write it here thanks again for your interest.

Nick Craver Over a year ago

@mehmet6parmak - If you could expose it to a URL I could see, I'd be happy to take a look as well, just comment if that's possible.

mehmet6parmak Over a year ago

Here clients.entegral.com.tr/test/jqueryfileupload.htm there are two forms -one in each line-. Second form works fine.

|

Collectives™ on Stack Overflow

Jquery form plugin file upload

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related