Dynamically-generated form with file input doesn't work in IE
Hi all,
I'm trying to create a form dynamically using JQuery that includes a "file" input. I'm not having any luck. My server never gets the file. Both work fine when I submit from Firefox. I created a static HTML version that works just fine, and I think the form I created using JQuery is identical.
Any ideas?
Thanks,
Don
<!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>
WebUtilities Testing
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
function Document_OnReady()
{
var div = $("#AddFormHereDiv");
var form = $("<form>");
form.attr("action", "UploadTest01.aspx");
form.attr("method", "post");
form.attr("enctype", "multipart/form-data");
form.attr("target", "DhtmlUploadIframe");
var fileInput = $("<input />");
fileInput.attr("type", "file");
fileInput.attr("name", "myFile");
form.append(fileInput);
var submitInput = $("<input />");
submitInput.attr("type", "submit");
form.append(submitInput);
var iframe = $("<iframe />");
iframe.attr("name", "DhtmlUploadIframe");
form.append(iframe);
div.append(form);
}
$(document).ready(Document_OnReady);
//]]>
</script>
</head>
<body>
<h1>File Upload</h1>
<h2>Static HTML</h2>
<div>
<form action="UploadTest01.aspx" method="post" enctype="multipart/form-data" target="ShtmlUploadIframe">
<input type="file" name="myFile" />
<input type="submit" />
</form>
<iframe name="ShtmlUploadIframe"></iframe>
</div>
<h2>Dynamic HTML</h2>
<div id="AddFormHereDiv">
</div>
</body>
</html>