javascript - How to display uploaded image using ajax? -
i need upload image , display image without reloading page how can implement this. think can using ajax form submission. tried following code ajax form submit function not working. there mistake in code tell me how implement
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#myform').ajaxform(function() { alert("thank comment!"); }); }); </script> <body> <form id="myform" action="" method="post"> <input type="file" name="image_name" id="image_name" > </form> </body> thank :-)
since using jquery-form plugin, able send images. code correct has small errors.
you have call submit method of ajaxform make ajax call, , need add callback complete event of ajaxform.(here, i've added event onchange, that, when user selects image, ajax call fired.)
this works -
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script> <script type="text/javascript"> $(document).ready(function(){ //added onchange event. $("#image_name").on('change',function(){ $("#myform").ajaxform( {complete: function(data){ alert("thank comment!"); } } ).submit(); }); }); </script> <body> <form id="myform" action="a.php" method="post"> <input type="file" name="image_name" id="image_name" > </form> </body>
Comments
Post a Comment