apl-mhd

JavaScript Image Preview

Nov 29th, 2018
182
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html lang="en-GB" xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3.     <title>jQuery Multiple File Uploader</title>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  6.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css">
  7.  
  8.  
  9.  
  10. </head>
  11. <body>
  12.  
  13.  
  14.   <img id ="img" style="height: 100px; width: 100px;" src="https://images.unsplash.com/photo-1543422521-7dfeaf13cc67?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9441e9ad49f1726ae85ed2f728eacf26&auto=format&fit=crop&w=1534&q=80" alt="">
  15.  
  16.  
  17.  
  18.   <button id='click' onclick="changeimg()" >Click</button>
  19. <p id="p"></p>
  20.  
  21.  
  22. <form action="">
  23.     <input id="input" type="file" value="orko" onchange="preview()">
  24. </form>
  25.  
  26.  
  27. <script>
  28.  
  29.  
  30.     function preview () {
  31.  
  32.         var input = document.getElementById("input");
  33.         var fReader = new FileReader();
  34.         fReader.readAsDataURL(input.files[0]);
  35.         fReader.onloadend = function(event){
  36.         //var img = document.getElementById("yourImgTag");
  37.         //img.src = event.target.result;
  38.         document.getElementById('p').innerHTML = event.target.result;
  39.        
  40.  document.getElementById('img').src = event.target.result;
  41. }
  42.          //document.getElementsByTagName('img')[0].src = document.getElementById('input').value;
  43.  
  44.             //alert(document.getElementById('input').value);
  45.     }
  46.  
  47.     function changeimg() {
  48.                
  49.  
  50.         //document.getElementById('p').innerHTML = 'lol';
  51.         var link = document.getElementsByTagName('img')[0].src;
  52.     }
  53.  
  54.  
  55.  
  56. </script>
  57.  
  58.  
  59.  
  60. </body>
  61. </html>
RAW Paste Data