At the time of registration of how to make a user-selected picture when the preview function

<div class="form-group">
        <label class="col-sm-2 control-label" for="id_avatar">
            头像
        </label>
        <div class="col-sm-8">
            <label for="id_avatar" id="id_avatar_lab">
                <img id="id_avatar-img"  src="{% static 'images/default.jpg' %}" alt="">
            </label>
            <input type="file" name= "Avatar" ID = "id_avatar" style = "the display: none" > 
            < span class = "Help-Block" > </ span > 
        </ div > 
 </ div > 
 <Script> 
  $ ( '# id_avatar'). ON ( 'Change', function () { 
        .. 1 // Create a file object read 
        var = new new FileReader the FileReader (); 
        . // 2 to obtain the currently selected avatar file 
        fileReader.readAsDataURL (this.files [0] ); 
        // 3 to read the file you selected, wait for the file is loaded. 
        fileReader.onload = function () { 
             $ ( "# id_avatar-img") attr ( "src", fileReader.result).;
        }

    })
</script>