JavaScript Preview Image Before Upload

js_previewImageBeforeUpload.html

<script type="text/javascript">

	/**
	 * Display image selected in html input widget
	 * @param  {string} inputID    id of html image input
	 * @param  {string} imgFieldID id of html img tag
	 * @return none
	 */
	function previewImageBeforeUpload(inputID, imgFieldID) {


	    document.getElementById(inputID).onchange = function () {
	    
	    	/**
	    	 * [reader description]
	    	 * @type {FileReader}
	    	 */
	        var reader = new FileReader();

	        /**
	         * [onload description]
	         * @param  {[type]} e [description]
	         * @return {[type]}   [description]
	         */
	        reader.onload = function (e) {

	            /**
	             * id of image
	             * @type {string}
	             */
	            var img = document.getElementById(imgFieldID);

	            /**
	             * set Bootstrap class to image input
	             * @type {String}
	             */
	            img.className = "img-thumbnail"

	            /**
	             * get loaded data and render thumbnail.
	             * @type none
	             */
	            img.src = e.target.result;
	        };

	        /**
	         * read the image file as a data URL.
	         */
	        reader.readAsDataURL(this.files[0]);
	    };
	};
</script>

<input type="file" id="files" />

<img id="image" />

<script type="text/javascript">

	/**
	 * Run function with id's of fileInput and image as arguments
	 */
	previewImageBeforeUpload("files", "image")
</script>