[jQuery] form plugin and file upload problem in Internet Explorer
Hi there,
I have the following problem:
I'm creating a multi-step insertion process using jQuery. The pattern
I'm using is the following :
I have one content (main) page which holds all the jquery script
references, css styles and an accordion
plugin control.There are separate aspx pages that hold the logic for
each step of the proccess , and I
load them dinamically (with ajax .get and .post methods) into the main
page as they are needed. This
pattern works fine on all pages (steps), except on one page where I
have an file upload control. Here on
this page I'm using the form plugin to simulate an update panel-like
behaviour (submitting the page to the
server and reloading it again in the same placeholder). I have done
the following to work around the
limitation of the form pluggin which behaves differently when there is
an file to be submited:
The file upload is on a separate aspx page with the following markup:
(ImageUploader.aspx)
<head runat="server">
<script type="text/javascript">
$(function()
{
var formOptions = {
url: 'ImageUploader.aspx',
success: function() {
$.get('ImageUploader.aspx',
{
param: 'some parameter'
},
function(data){
$("#imageuploadercontent").html(data);
},
"html");
}
};
// pass options to ajaxForm
$('#frmimageuploader').ajaxForm(formOptions);
});
</script>
</head>
<body>
<form id="frmimageuploader" runat="server" >
<asp:FileUpload ID="Attachment" runat="server" />
<asp:Button ID="uploadButton" Text="upload" runat="server"
onclick="uploadButton_Click" />
</form>
</body>
As you can see I'm not specifiyng a target parameter in the Options
object because I was having a problem
when embeding the server response data in the content placeholder
("#imageuploadercontent" div element
which is placed in the main page I mentioned earlier). This problem
occured only when there was a file
posted to the server side. That's why I came to the idea not to put
the server response anywhere , but
instead in the "success" handler to request the same page again and
put this response in the wanted
placeholder. The problem is that this only works in firefox. In
internet explorer after the submit action
an exception (something with "object expected") occurs and the refresh
of the page (ajax get request to
the ImageUploader.aspx) never happens. The wanted bahaviour which
works fine in firefox would be : The
user uploads an image and after submitting it to the server, the
placeholder is refreshed and the uploaded
image is shown below the file upload control. In internet explorer
this works to the point of submitting
of the image to the server. Here after the exception it stops and the
content is not refreshed.
Any help including a different approach how to solve the file upload
functionality problem when using the
form pluggin would be much appreciated. Thanks in advance.