Home > Ajax, CSS, JavaScript, PHP > JavaScript – ajax image/file upload

JavaScript – ajax image/file upload

Ajax image upload ( basic to advanced)

Main Theory: <form target=nameof_Iframe

<body>
	<!-- Iframe to handle the form -->
	<iframe id="trgID" name="uploadTrg"  frameborder="0"  src="javascript: '<html> </html>'; "> </iframe>
	<!-- Form to submit -->
	<form     name="fileForm"     id="fileForm"
		enctype="multipart/form-data"
		action="include/add_edit_del.php?oper=add&model=file_upload"
		method="post" target="uploadTrg" >

		<input type="file" name="files" >
		<input name="submit" type="submit" id="submit_btn" >
	</form>
</body>
</html>

<!-- ajax file solution -->
<script type="text/javascript">

	$('#submit_btn').click(function(){
		$('#fileForm').submit();
	});

</script>

This will be not a ajax method of file/upload. Because not applied form target.

<body>
	<!-- Iframe to handle the form -->
	<iframe id="trgID" name="uploadTrg"  frameborder="0"  src="javascript: '<html> </html>'; "> </iframe>
	<!-- Form to submit -->
	<form     name="fileForm"     id="fileForm"
		enctype="multipart/form-data"
		action="include/add_edit_del.php?oper=add&model=file_upload"
		method="post"  >

		<input type="file" name="files" >
		<input name="submit" type="submit" id="submit_btn" >
	</form>
</body>
</html>

<!-- ajax file solution -->
<script type="text/javascript">

	$('#submit_btn').click(function(){
		$('#fileForm').submit();
	});

</script>
Advertisements
Categories: Ajax, CSS, JavaScript, PHP
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: