今天在做后台项目的时候,需要用到图片上传功能。因为功能不是很复杂,对图片上传的要求也不是很高,所以并没有使用上传插件(uploadify),而是直接使用 input[type="file"]
的传统方式。再加上要在前端做一个选择图片后的本地图片预览功能(兼容IE)。所以就有了以下实现代码。
Html代码:
1 | <input type="file" name="file" id="file" /> |
Js脚本:
1 | var file=document.getElementById("file"); |
最后如果有多个预览控件时,在重新打开控件的时候,记得把input[type=”file”]的值进行清空。不然下次选择相同的文件时是不会出现预览效果的。
因为平常的file控件外观不好看,经常需要根据设计来进行修改。下面提供一种实现方法,原理是修改控件的透明度,然后用Ui效果展示。
1 | <span style="position:relative;display:inline-block;"> |
这样,通过修改select-pic的样式,来达到想要的Ui效果。