普通的文件上传只能看到它的文件名,而如果要实现选择某一张图片则可以利用html5的FileReader完成
下面是实现步骤:
html:
这里是上传图片的内容,οnchange="getFile()"为选择文件后的转换函数,后面会提及
上传图片的按钮我这里是自定义的,做法在另一篇博客里
css:
预览框我暂定为100x100的正方形框,出来后图片可能会有变形之类的,可以自定义
接下来是主要的JS部分
JS:
-
首先,定义一个变量showFile保存实际要显示的图片的整个文件
-
获取预览框,方便之后的显示:
准备工作做完了,现在开始转码 -
编写一个函数,将图片路径转码
这样就获取到了转码后的图片文件的src
(注意:FileReader在IE里是不兼容的,IE 6-9完全不兼容,IE 10-11需要写兼容) -
接下来就是转换啦
这里将选择的文件获取到之后,再赋给全局文件(如果点开了选择框但是没有选择文件即为之前的文件本身),再回调函数里将src赋给预览框
这一步的完成时间是在file框的onchange中完成的 -
然后效果就完成啦,看看成果吧
选择之前:
因为我没有给img赋src,所以为空白
选择之后:
选择图片就可以预览啦,再选择图片一样可以预览
样式简洁,可以自己定义,比如写个+什么的
像这种:
样式就自己定义好了。