web app开发之图片上传预览

开发web应用时,免不了要有图片上传功能,比如上传头像,发表图片心情等场景,下面我就来为大家分享一下我是如何实现图片上传时预览功能的,欢迎拍砖～

HTML中的<inputtype="file" id="inputfile">这么一条语句可以生成一个文件上传的控件，但只是如此显示效果如下：

并没有显示图片"秒五.jpeg"的预览图，给用户的体验不怎么友好，用户如果想再确认一下这张图片合不合适时很不方便，所以我们应该加多一个图片预览的功能，话不多说，看代码！

varfile = document.getElementById("inputImage").files[0];

varurl = window.URL.createObjectURL(file);

这里得到的url给一个img标签中的src中便可以显示出这张图片中了，可以用以下Jqury语句：

$("#preview_image").attr("src",url);

我们可以提前设定一个id为“preview_image”的img便签作为预览图片的”容器“

下面我们来看看有预览后的效果：

最后，贴出这次的展示用的所有代码：

接下来还会陆续写些其它关于web app开发的博客，欢迎一起学习讨论～