图片预览功能实现

图片预览功能实现

图片上传预览

图片的上传在目前的项目中几乎都会用到，上传图片使如果能够及时的预览到上传图片，对于提高用户体验是相当的中，本博客就以此为基础，撰写上传图片使得预览功能。

以jsp页面为例：核心代码如下

<input type="file" name="image" > 
<div style="width: 150px; height: 150px; "><img alt="" src="images/1.png" id="imgPreviewId" style="width: 150px; height: 150px; ">
</div>

运行结果：

要实现的效果如下：
点击浏览按钮，选择需要上传的图片，同时在下面的img中显示上传图片，此时需要修改页面代码如下：

<input type="file" name="image1" onclick="previewImage(this,'imgPreviewId1')" > 
<div style="width: 150px; height: 150px; "><img alt="" src="images/1.png" id="imgPreviewId1" style="width: 150px; height: 150px; ">
</div>

即为input按钮添加点击事件onclick，添加onclick的方法为previewImage(this,’imgPreviewId1’)即预览图片的方法，此方法从何而来？
这时候，需要引入upload.js文件，查看该文件的源码：

注意红色标注的地方，此处定义了onclick方法 的名称和所需要的参数，紧接着下面的一句同时也告诉我们img 的id。因此下一步，我们只需在页面中引入upload.js文件。

<script src="js/upload.js"></script>

于此刻，我们即完成了图片上传预览功能，比如我们想上传一张科比（我的偶像）的照片，运行效果如下 ：

总结：

图片预览是图片上传的第一步，至此我们完成了第一步，下一步我们将完场图片上传的功能，内容见下一篇：图片上传功能的实现

修改补充：

上次的编写中，我们为input上传图片按钮添加onclick事件，进过测试发现会出现以下问题，单击input上传按钮使，第一次可以选择确定图片，但是图片并不会出现，再次点击才会出现要上传的图片。也就是说，需要单击两次才能出现预览效果。

解决方法：

onclick事件在此时使用，并不恰当，需要修改为onchange事件。只需要修改方法名称，其余的都不需要变化，这样上传预览的效果才会正确无误的显示。

以此对带给各位的不便，表示十分的抱歉，也期待大家更多指教。

转载于: