Geek Answers Handbook

Loading a plugin file in jQuery

I have a problem with a jquery form plugin. I am trying to upload a file asynchronously, but it does not submit the form. HTML code and javascript code look 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 in which there is only a text box and it works great. Also, when I comment out the input type = "file" ... line, this form also works fine. What is the problem with input type file? Any idea?

+7
jquery plugins forms file-upload
source share
1 answer

In short:

 <input type="file" />

Unable to send via ajax, it must be a complete postback. Traditionally, you use iFrame to do this if you want AJAX style behavior. I used several solutions for this, not knowing what platform you are on, SWFUpload is usually a good option.

Here is a complete patch example:

 <!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>
+8
source share

More articles:


All Articles