input file 方式上传图片并实现实时预览
用普通的html的 标签是不能实现实时预览功能的,获取表单的值可以得到图片所在路径:C:\fakepath\test.png,如果将它直接赋值给img标签的href属性,会报错:Not allowed to load local resource(不允许加载本地资源)。
功能实现
可以通过file标签和js的 FileReader 接口来实现此功能:
把选择的图片文件调用readAsDataURL方法
把图片数据转成base64字符串形式显示在页面上
给a标签定义 href属性 和 download=”文件名.后缀名”,就可以实现点击下载的功能