Menu
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?
853
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
