文件(图片)上传:
图片上传的思路:
一、(页面的操作)主要是通过input的[type=“file”]属性触发图片的上传,然后将上传的图片进行筛选,验证,读取。然后放到指定的容器,当读取文件后并将文件转为Base64编码,再将img标签的src值设置为读取到的Base64编码
注意:文件的上传只能使用post提交,不能使用get,因为文件比get的容量要大。
二、(后台的操作)判断是否有存放图片的目录(如果没有,创建一个目录) -> 验证图片是否有上传以及图片的大小是否有一字节以上 -> 获取图片的扩展名称和拼接图片名称 ->
拼接图片保存的路径和上传到指定的硬盘 -> 最后将文件的名称保存到数据库
注意:图片上传不会把图片保存到数据库,而是把图片的名称或路径保存到数据库。因为文件太大,全放到数据库会造成数据库的运行缓慢
1.图片的选择控件弹出和读取选择到的文件、文件读取后的事件
(1)创建一个文件选择控件,在触发它时弹出文件选择。accept 属性:作用于筛选文件的格式。file对象 用于返回关于指定文件的信息。
Onchange() 值改变时触发的事件
图示1.1:
(2)new一个文件读取器(FileReader