I am using hidden iframe in my jsp to upload image files. The code is as following :
<form name="frm" method="POST" action="./servlet/newSubmit1">
<div>
Image:
<input type="file" id="uploadImage" name="uploadImage" size="30" onchange="uploadFiles(); fileUpload(this.form,'./servlet/TempImageUploader','upload123')"/>
<input type="hidden" id="UserName" value="TestValue"/>
</div>
<div id="upload123"></div>
<ul>
<li>
<input type="button" value="Upload" tabindex="6" onclick="uploadAttachedPhotos()"/>
</li>
</ul>
</form>
As you can see in the code that onchange event of browse button "uploadFiles()" and "fileUpload" function is called. The uploadFiles function uses DWR to upload file to temp directory on server and preview it on jsp page, and the fileUplaod function creates a hidden iframe to call the servlet which maintains all the uploaded images in a map. I have some other data too on the page which can be updated by the user. For example here i have "UserName" field which can have name of the file.
The javascript function which creates hidden iframe is :
function fileUpload(form, action_url, div_id) {
// Create the iframe...
var iframe = document.createElement("iframe");
iframe.setAttribute("id", "upload_iframe");
iframe.setAttribute("name", "upload_iframe");
iframe.setAttribute("width", "0");
iframe.setAttribute("height", "0");
iframe.setAttribute("border", "0");
iframe.setAttribute("style", "width: 0; height: 0; border: none;");
// Add to document...
form.parentNode.appendChild(iframe);
window.frames['upload_iframe'].name = "upload_iframe";
iframeId = document.getElementById("upload_iframe");
// Add event...
var eventHandler = function () {
if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
else iframeId.removeEventListener("load", eventHandler, false);
// Message from server...
if (iframeId.contentDocument) {
content = iframeId.contentDocument.body.innerHTML;
} else if (iframeId.contentWindow) {
content = iframeId.contentWindow.document.body.innerHTML;
} else if (iframeId.document) {
content = iframeId.document.body.innerHTML;
}
document.getElementById(div_id).innerHTML = content;
// Del the iframe...
setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
}
if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);
// Set properties of form...
form.setAttribute("target", "upload_iframe");
form.setAttribute("action", action_url);
form.setAttribute("method", "post");
form.setAttribute("enctype", "multipart/form-data");
form.setAttribute("encoding", "multipart/form-data");
// Submit the form...
document.forms[0].action = action_url;
document.forms[0].submit();
document.getElementById(div_id).innerHTML = "Uploading...";
}
Now the question is why i am getting request.getParameter("UserName")
NULL on the parent form's action servlet, when i press the upload button ?
Thanks