简单实现JS上传图片预览功能

实现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实现图片上传和预览功能，虽然内容简单，但涵盖了实现该功能所需的核心知识点。通过上述步骤，可以将用户本地的图片文件上传至网页，并提供给用户预览，增强用户体验。