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>
Categories: Ajax, CSS, JavaScript, PHP
