Auto Preview Image in Javascript or Php -
i've tried many times solve problem, , yet not able solve it. search on google unfortunately, codes not running, sample codes searched on google.
<div id='preview'></div> <form id="imageform" method="post" enctype="multipart/form-data" action='index.php'> <input type="file" name="photoimg" id="photoimg" /> </form> <script type ="text/javascript"> $('#photoimg').on('change', function() { $("#imageform").ajaxform({target: '#preview', //shows response image in div named preview success:function(){ }, error:function(){ } }).submit(); }); </script> <?php if(isset($_post) , $_server['request_method'] == "post") { $name = $_files['photoimg']['name']; $size = $_files['photoimg']['size']; $tmp = $_files['photoimg']['tmp_name']; $path = "uploads/"; move_uploaded_file($tmp, $path.$name); //stores image in uploads folder } ?>
i have feature on form.
javascript:
function showmyimage(fileinput) { var files = fileinput.files; (var = 0; < files.length; i++) { var file = files[i]; var imagetype = /image.*/; if (!file.type.match(imagetype)) { continue; } var img=document.getelementbyid("thumbnail"); img.file = file; var reader = new filereader(); reader.onload = (function(aimg) { return function(e) { aimg.src = e.target.result; }; })(img); reader.readasdataurl(file); } }
the code:
<input name="file[]" id="file[]" type="file" onchange="showmyimage(this)" required> <div class="img"> <img id="thumbnail" style="max-width:120px;max-height:120px;" src="" alt="no main image inputted"/> </div>
Comments
Post a Comment