example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Split input</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
    <input type="file" id="file" />
    <input type='button' id='load-file' value='Load'>
    <div id="file-content"></div>
</body>

<script>
    ( function ( $ ) {
        $( '#load-file' ).click( function () {

            if ( ! window.FileReader ) {
                return alert( 'FileReader API is not supported by your browser.' );
            }

            var $i = $( '#file' ), input = $i[0];

            if ( input.files && input.files[0] ) {
                file = input.files[0];
                fr = new FileReader();

                fr.onload = function () {
                    var lines = fr.result.split("\n");
                    for (var i = 0, len = lines.length; i < len; i++) {
                        line = lines[i].split(":");

                        $( "#file-content" ).append( "Username: " + line[0] + " and password: " + line[1]);
                    }
                };

                fr.readAsText( file );
            } else {
                alert( "File not selected or browser incompatible." )
            }
        } );
    } )( jQuery );
</script>
</html>