<html>
<head>
  <title>Hello World</title>
  

  
  
</head>
<body>



<input type="text" id="carduid" name="carduid">

<!-- with input that accepts one file -->
<input id="the-file-input" type="file">




<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>

  <script type="text/javascript">
    // render the image in our view
    function renderImage(file) {

      // generate a new FileReader object
      var reader = new FileReader();

      // inject an image with the src url
      reader.onload = function(event) {
        the_url = event.target.result
       // $('#some_container_div').html("<img src='" + the_url + "' />")
       $('#carduid').val(the_url);
      }

      // when the file is read it triggers the onload event above.
      reader.readAsText(file);
    }
      
    // detect a change in a file input with an id of “the-file-input”
    $("#the-file-input").change(function() {
        // will log a FileList object, view gifs below
        console.log(this.files);
        
        // grab the first image in the FileList object and pass it to the function
        renderImage(this.files[0])        
    });  

  
  </script>

</body>
</html>