<html>
<script language="Javascript">
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...
form.submit();
document.getElementById(div_id).innerHTML = "Uploading...";
}
</script>
<!-- index.php could be any script server-side for receive uploads. -->
<form>
<input type="file" name="datafile" /></br>
<input type="button" value="upload"
onClick="fileUpload(this.form,'index.php','upload'); return false;" >
<div id="upload"></div>
</form>
</html>
Code language: JavaScript (javascript)Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…
Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…
Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…
1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…
GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…
1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…
View Comments
Hi! Thanks for such a nice tip, although data seem posted but one problem is that IFrame start downlaoding in IE what could be the issue is ?
Thanks for sharing! I used your code as a base and mixed in some jquery methods for the binding and it worked perfectly on ie and firefox.
You should add the var keyword to lines 31,33,35 before the content variable as IE7 throws an error. Very useful script though.
George
hm, can you show an example of a server-side script for receiving the upload.
This is awesome. Works great. Thank you!
I am unable to implement the server side script. In the server side script i gave my action class name but it throws an error. Can you please give me some example of how to implement the server side scripting
Very nice and easy to understand code. Thanks for sharing.
What should I do if I want to know when the uploading is done (e.g. to display new content to users) or to display a file-size-over-limit message to users?
Many thanks,
Fantab
Very interesting script. I am going to try it right now and will let you know how it goes.
Hats off! It totally worked. Thanks!
Pls place some demo works..