Advertisement
vir0e5

Preview Image Before Submit

Apr 14th, 2014
108
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script src="jquery.min.js" type="text/javascript"></script>
  2. <fieldset class="adminform">
  3.     <legend>Preview Sebelum Upload</legend>
  4.         <table class="admintable">
  5.             <tbody>
  6.                 <tr>
  7.                     <td>
  8.                         <span class="note"><input type="file" name="files[]" multiple="multiple"  id="files" accept="image/*"></span>
  9.                     </td>
  10.                 </tr>
  11.             </tbody>
  12.         </table>
  13.             <output id="list"></output>
  14.             <table>
  15.             <tr>
  16.                 <td class="paramlist_value">
  17.                     <input name="input" value="Input Data" type="submit">&nbsp;
  18.                     <input name="update_member" type="hidden"> 
  19.                 </td>
  20.             </tr>  
  21.             </table>           
  22. </fieldset>
  23. <script>
  24.   function handleFileSelect(evt) {
  25.     var files = evt.target.files;    
  26.     for (var i = 0, f; f = files[i]; i++) {
  27.       if (!f.type.match('image.*')) {
  28.         continue;
  29.       }
  30.       var reader = new FileReader();
  31.       reader.onload = (function(theFile) {
  32.         return function(e) {  document.getElementById('files').addEventListener('change', handleFileSelect, false);
  33.           var span = document.createElement('span');
  34.           span.innerHTML = ['<a class="example-image-link" href="', e.target.result,'" data-lightbox="example-1"><img class="example-image" src="', e.target.result,'" title="', escape(theFile.name), '" height="120" width="120"/></a>'].join('');
  35.           document.getElementById('list').insertBefore(span, null);
  36.           };
  37.       })(f);      
  38.       reader.readAsDataURL(f);
  39.     }
  40.   }
  41.   document.getElementById('files').addEventListener('change', handleFileSelect, false);
  42. </script>
Advertisement
RAW Paste Data Copied
Advertisement