file compare

by Nikita Jadhao

HTML

<input type="file" id="files" multiple="multiple">
		<div>
		<input id="prev" value="previous" type="button"/>
		<input id="next" value="next" type="button"/>
		</div>
		<div>
			<div id="fileBox1"></div>
			<div id="fileBox2"></div>
		</div>

CSS

@CHARSET "ISO-8859-1";


#fileBox1,#fileBox2 {
	float: left;
	width: 300px;
	border: 1px solid black;
	resize: both;
	overflow: auto;
	padding: 5px;
	margin-left: 5px;
	height: 450px;
}

.red {
	color: #FF0000;
	font-weight:bold;
}
.green {
	color: #3333FF;
	font-weight:normal;
}
#fileBox1 ,#fileBox2 {
	background-color: #cccccc;
}
li{
	list-style-type: none;
}

JavaScript

var file1, file2, line = -1;

$(document).ready(function(){
 $("#prev").attr("disabled", "disabled");
 $("#next").attr("disabled", "disabled");
 });
 
function readSingleFile(file, box) {
	if (file) {
		var reader = new FileReader();
		reader.onload = function(e) {
			displayfileBox(e, box);
		};
		reader.readAsText(file);
	} else {
		alert("Failed to load file");
	}
}

function displayfileBox(evt, fileBox) {
	var fileString = evt.target.result;
	if (fileBox == "fileBox1")
		file1 = fileString;
	else
		file2 = fileString;

	checkFile(file1, file2);
	/* lineStr = "<ul id='_"+fileBox.id +"'>";
	 alert( lineStr);
	for( lineIndex = 0 ; lineIndex < lines.length ; lineIndex++){
		lineStr += "<li id= "+fileBox+lineIndex+">"+lines[lineIndex]+"</li>";
	}
	lineStr += "</ul>";			
	fileBox.innerHTML="";
	fileBox.innerHTML= lineStr; */
}

/*$(function() {
 $( "button" )
 .click(function() {

 });
 });*/

$('#files').change(function(evt) {
	document.getElementById("fileBox1").innerHTML="";
	 document.getElementById("fileBox2").innerHTML="";
	if (evt.target.files.length != 2)
		alert("selct two file !!");
	else {
		var file = evt.target.files[0];
		readSingleFile(file, 'fileBox1');
		var file2 = evt.target.files[1];
		readSingleFile(file2, 'fileBox2');
		 $("#prev").removeAttr("disabled");
		 $("#next").removeAttr("disabled");
	}
});

var checkFile = function(file1, file2) {
	var size1 = file1.split('.');
	var size2 = file2.split('.');

	var disp1, found, disp2, found2 , word1 , word2;

	disp1 = document.getElementById("fileBox1");
	disp2 = document.getElementById("fileBox2");
	
	for ( var i in size1) {
		disp1.innerHTML += "<li id = file1" + i + " list-style:none;>"
				+ size1[i] + "</li>";
		disp2.innerHTML += "<li id = file2" + i + " list-style:none;>"
				+ size2[i] + "</li>";

	}

	$("#prev").click(function() {
		--line;
		if (line == -2)
			line = 0;
		found2 = document.getElementById("file2" + line);
		found = document.getElementById("file1" + line);
		if (size1[line]...