Select a picture, take a picture

<form id="imgForm">
    <input type="file" class="addBorder"  onchange="loadImg()">
    <br/>
    <button type="button" onclick="loadImg()">获取图片</button>
</form>

<div class="addBorder" id="imgDiv">
    <img id="imgContent">

</div>

  function loadImg () {
         // Get File 
        var File = $ ( "# imgForm") Find ( "INPUT") [0] .files [0. ]; 

        // create an object file is read 
        var Reader = new new the FileReader () ; 

        // Create a file to read the relevant variable 
        var imgfile; 

        // read successfully set event file 
        reader.onload = function (E) { 
            Alert ( 'file read completion' ); 
            imgfile = e.target.result; 
            Console .log (imgfile); 
            $ ( "#imgContent") attr ( 'src'. , imgfile); 
        }; 

        // official read the file
        reader.readAsDataURL(file);
    }

  .addBorder{
            border:1px solid #ccc;
        }

        #imgDiv{
            width:100px;
            height:100px;
        }

        #imgContent{
            width: 100%;
            height:100%;
        }

 https://blog.csdn.net/fd214333890/article/details/71250488 Reprinted from here