How to implement file open(File chooser and drag and drop) using JavaScript

View the JSFiddle demonstration

	(function () {
	// display file information
	function appendToResult(msg, result) {
	var m = document.getElementById(result);
	m.innerHTML = m.innerHTML + msg;
	}
	// get file information
	function parseFile(file, resultpane) {
	var res = "<p>File name: <strong>" + file.name + "</strong><br> type: <strong>" + file.type + "</strong><br> size: <strong>" + file.size + "</strong> bytes</p>";
	appendToResult(res, resultpane);
	// display text
	if (file.type.indexOf("text") == 0) {
	var reader = new FileReader();
	reader.onload = function (e) {
	var restxt = "<p><strong>File content:</strong></p><pre>" + e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") + "</pre>";
	appendToResult(restxt, resultpane);
	}
	reader.readAsText(file);
	}
	}
	// file drag hover
	function fileDragHover(e) {
	e.stopPropagation();
	e.preventDefault();
	//when a file is dragged over drag-area, change the class of the div->change css
	e.target.className = (e.type == "dragover" ? "file-drag-hover" : "file-drag");
	}
	// file selection
	function fileSelectHandler(e, result) {
	// cancel event and hover styling
	fileDragHover(e);
	// fetch FileList object
	var files = e.target.files || e.dataTransfer.files;
	// process all File objects
	parseFile(files[0], result);
	}
	// initialize
	function init(select, drag, result) {
	var fileselect = document.getElementById(select);
	var filedrag = document.getElementById(drag);
	// file select
	fileselect.addEventListener("change", function (e) {
	fileSelectHandler(e, result)
	}, false);
	// is XHR2 available?
	var xhr = new XMLHttpRequest();
	if (xhr.upload) {
	// file drop
	filedrag.addEventListener("dragover", fileDragHover, false);
	filedrag.addEventListener("dragleave", fileDragHover, false);
	filedrag.addEventListener("drop", function (e) {
	fileSelectHandler(e, result)
	}, false);
	filedrag.style.display = "block";
	}
	}
	// call initialization file
	if (window.File && window.FileList && window.FileReader) {
	init("input-file-select", "input-file-drag", "input-file-content");
	init("output-file-select", "output-file-drag", "output-file-content");
	}
	})();

view raw fileHandler.js hosted with ❤ by GitHub

	<div class="load-file" id="load-input">
	<!-- File chooser -->
	<input type="file" id="input-file-select" name="input-select[]" />
	<!-- Drag and drop area -->
	<div class="file-drag" id="input-file-drag">or drop files here</div>
	</div>
	<div class="file-content" id="input-file-content">
	File information:-
	<!-- File content to be displayed here-->
	</div>

view raw fileOpenDemo.html hosted with ❤ by GitHub

	.file-drag { /* drag area */
	height: 75px;
	font-weight: bold;
	text-align: center;
	color: #555;
	border: 2px dashed #555;
	border-radius: 7px;
	cursor: default;
	}
	.file-drag-hover { /* when the file is over the drag area */
	height: 75px;
	color: #f00;
	border-color: #f00;
	border-style: solid;
	box-shadow: inset 0 3px 4px #888;
	}
	.file-content { /* content of the file */
	padding: 10px;
	text-align: left;
	}

view raw style.css hosted with ❤ by GitHub