About uploading pictures in HTML

It is worth noting that when a form contains this upload element, the enctype of the form must be specified as multipart / form data, and the method must be specified as post, so that the browser can recognize and correctly execute it. But there is another point, the browser only allows users to click < input type = "file" > to select local files. Using JavaScript to assign the value of < input type = "file" > has no effect. When the user chooses to upload a file, JavaScript cannot get the real path of the file:
But there is a way to get the File information and read the File by using the two main objects File and FileReader.
Example file: file-upload-demo.html

HTML file:

<form method="post" enctype="multipart/form-data" id="file_upload">
　　<p>Picture preview:</p>
　　<div id="test-image-preview"></div>
　　<p>
　　　　<input type="file" id="test-image-file" name="test" accept="image/gif, image/jpeg, image/png, image/jpg">
　　</p>
   <p id="test-file-info"></p>
</form>

CSS file:

#test-image-preview {
　　border: 1px solid #ccc;
   width: 100%;
   height: 200px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
}

JavaScript:

<script src="http://cdn.loveqiao.com/jquery.js"></script>
<script type="text/javascript">
　　var
　　　　fileInput = document.getElementById('test-image-file'),
       info = document.getElementById('test-file-info'),
       preview = document.getElementById('test-image-preview');
       // Listen for the change event:
       fileInput.addEventListener('change', function() {
       　　// Clear background picture:
          preview.style.backgroundImage = '';
          // Check file selection:
          if(!fileInput.value) {
               info.innerHTML = 'No files selected';
                   return;
          }                    
          // Get File reference:
          var file = fileInput.files[0];
          //Determine file size
          var size = file.size;
          if(size >= 1*1024*1024){
                alert('Files larger than 1 Megabyte are not allowed!');
                return false;
          }
          // Get File information:
          info.innerHTML = 'file: ' + file.name + '<br>' +
                           'Size: ' + file.size + '<br>' +
                           'modify: ' + file.lastModifiedDate;
          if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
              alert('Not a valid picture file!');
              return;
                    
          // Read file:
          var reader = new FileReader();
                reader.onload = function(e) {
                　　var
                     　　data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64 encoding)...}'            
                     　　preview.style.backgroundImage = 'url(' + data + ')';
               };
                // To read a file as a DataURL:
                reader.readAsDataURL(file);
                console.log(file);
           });
</script>