实现JavaScript上传图片预览功能，简单来说，需要完成两个步骤：一是通过HTML创建一个文件上传的界面，二是使用JavaScript来捕捉文件上传事件，并将图片加载到页面上进行预览。以下是一些详细的实现知识点：
1. **创建上传界面：**
创建一个上传按钮和一个隐藏的文件输入框。当点击上传按钮时，文件输入框会弹出文件选择对话框。
```html
<div class="upload">
<input type="button" class="btn" onclick="browerfile.click()" value="上传">
<input type="file" id="browerfile" style="display:none;" class="test">
<div class="img_center">
<img src="" class="img1-img">
</div>
</div>
```
2. **文件输入框的隐藏：**
通过设置input元素的CSS样式`display:none;`来隐藏文件输入框。这样用户只能看到上传按钮，而文件选择的操作是由JavaScript间接触发的。
3. **JavaScript实现图片预览：**
在文档加载完成后，通过JavaScript添加事件监听器，当文件输入框的值发生变化（即用户选择了文件）时触发相应的处理函数。
```javascript
$(function(){
$("#browerfile").change(function(){
var path = browerfile.value;
var objUrl = getObjectURL(this.files[0]);
if (objUrl) {
$('.img1-img').attr("src", objUrl);
}
});
});
```
这里使用了jQuery库来简化DOM操作。
4. **兼容多种浏览器的图片路径获取方法：**
使用`getObjectURL`函数来获取图片文件的URL。该函数通过浏览器提供的不同前缀来创建一个对象URL，返回的是一个指向文件的URL字符串。
```javascript
function getObjectURL(file){
var url = null;
if (window.createObjectURL != undefined){
url = window.createObjectURL(file);
} else if (window.URL != undefined){
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined){
url = window.webkitURL.createObjectURL(file);
}
return url;
}
```
这段代码考虑了不同浏览器对`createObjectURL`方法的支持情况，以确保兼容性。
5. **图片预览的实现：**
当用户选择文件后，通过`getObjectURL`函数获取图片的URL，然后将其设置到img标签的src属性中，从而实现图片的预览。
```javascript
var objUrl = getObjectURL(this.files[0]);
if (objUrl) {
$('.img1-img').attr("src", objUrl);
}
```
6. **注意事项：**
- 浏览器的安全策略限制了对本地文件的访问，因此直接使用文件路径是不可行的。
- 对象URL可以用来创建指向文件内容的引用，但要注意在不再使用后通过`revokeObjectURL`方法释放内存。
- HTML5的拖放API也可以用于实现图片上传和预览功能，这为实现更加用户友好的界面提供了可能。
- 如果需要进行图片的预处理，如缩放、裁剪等操作，那么可能需要引入第三方库或使用canvas元素。
本文所述的内容为如何在前端页面中使用JavaScript实现图片上传和预览功能，虽然内容简单，但涵盖了实现该功能所需的核心知识点。通过上述步骤，可以将用户本地的图片文件上传至网页，并提供给用户预览，增强用户体验。
