JavaScript实现上传图片并进行实时预览的实现原理和关键知识点主要涉及以下几个方面：
1. 基本的HTML和JavaScript语法：实现图片上传预览功能需要基本的HTML表单输入和JavaScript脚本来实现交互。
2. 使用JavaScript绑定事件：通过监听`change`事件来捕获用户选择文件的行为。当用户选择文件后触发事件处理函数。
3. FileReader对象：这是JavaScript中一个非常重要的接口，用于读取用户选择的文件。它提供了几种读取文件的方式，包括`readAsDataURL()`方法，这个方法可以将文件内容读取为DataURL，也就是将文件编码为一段Base64格式的字符串。
4. 兼容性处理：文章中提到了兼容不同浏览器的问题，比如在IE浏览器中，由于不支持`FileReader`对象，需要使用滤镜（filter）的方式来实现图片的预览。
5. 图片缩放算法：在预览区域中，需要对图片进行适当的缩放处理，以保证图片不会超出预览区域的尺寸。在文章中提到了`clacImgZoomParam`函数来计算图片缩放参数，这个函数的作用是根据图片原始尺寸和预览区域的尺寸来计算出适当的缩放比例和位置。
6. DOM操作：通过JavaScript对DOM元素进行操作，如修改元素的样式（如图片的宽度、高度、边距）、修改元素的属性（如`src`属性用于显示图片）。
7. 使用jQuery框架：文章中提供了一段基于jQuery的代码，`$(function(){ $("#file0").bind("change",function(){clickupLoad(); }); });`这段代码使用了jQuery库来简化DOM元素的选取和事件绑定操作。
8. 实现上传功能：虽然文章主要介绍的是图片预览功能，但在实现上传功能时，通常需要通过表单提交或Ajax技术将文件发送到服务器进行存储。
9. 安全性考虑：在实际应用中，需要对用户上传的图片进行安全性检查，例如验证图片的类型、大小等，以防止恶意文件上传和服务器资源的滥用。
通过HTML表单的文件输入控件、JavaScript事件处理、FileReader API读取文件内容、兼容性处理、图片缩放算法、DOM操作、可能的jQuery框架使用，以及安全性考虑等方面的知识，可以实现一个在客户端进行图片上传并立即预览的功能。这项技术在网页上传组件中非常常见，能够给用户带来良好的体验。
