Preview Image Before Submit

<script src="jquery.min.js" type="text/javascript"></script>
<fieldset class="adminform">
    <legend>Preview Sebelum Upload</legend>
        <table class="admintable">
            <tbody>
                <tr>
                    <td>
                        <span class="note"><input type="file" name="files[]" multiple="multiple"  id="files" accept="image/*"></span>
                    </td>
                </tr>
            </tbody>
        </table>
            <output id="list"></output>
            <table>
            <tr>
                <td class="paramlist_value">
                    <input name="input" value="Input Data" type="submit">&nbsp;
                    <input name="update_member" type="hidden">
                </td>
            </tr>
            </table>
</fieldset>
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
      if (!f.type.match('image.*')) {
        continue;
      }
      var reader = new FileReader();
      reader.onload = (function(theFile) {
        return function(e) {  document.getElementById('files').addEventListener('change', handleFileSelect, false);
          var span = document.createElement('span');
          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('');
          document.getElementById('list').insertBefore(span, null);
          };
      })(f);
      reader.readAsDataURL(f);
    }
  }
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>