(给Web前端雪儿加星标,提升前端技能)
之前写过图片上传的案例,但是时间一长就忘了,这次写的这个程序用到了图片的上传,并且能够图文显示,所以写了这篇文章来记录一下。由于人们的生活质量的提高及网络的发达,所以在各大软件中上传个人的头像及其他图片已成为普遍的事情,差不多所有的软件都实现了这个功能,那么他们究竟是怎么做到的呢?其实并不难,现在我就以一个完整的例子来讲解一下。先来看一下效果图及结构,再来看一下实现的功能的写法。
html文件
问题一:如何实现上传图片的功能并把图片显示出来?
4个步骤:
先打开file文件表单选择图片;
创建FileReader对象,用正则表达式过滤图片文件;
利用改变事件将图片显示出来;
读取文件,将url绑定到img标签的src属性上。
详细:
01.chooseImageFile方法
02.创建FileReader对象,用正则表达式过滤图片
FileReader对象允许Web应用程序来异步读取存储在用户计算机上的文件里面的内容,使用File和Blob对象指定要读取的文件或数据,其中结合input:file可以很方便的读取本地文件里面的内容。
03.利用改变事件将图片显示出来
readAsDataURL()方法是 FileReader 对象里面的方法,其作用为可以获取 API 异步读取的文件 数据,将图片另存为数据 Url,还可以实现图片上传预览的效果,让用户确认是否就是上传这张 图片,提升用户体验。
04.读取文件
问题二:如何进行提交表单数据?
给保存按钮一个点击事件,进行提交数据,再给form标签一个action行为进行提交表单数据。
问题三:如何清空图片?
问题四:如何把图片保存到数据库
注:在保存数据到数据库的时候我遇到一个问题,就是虽然图片上传到了现实出来了,但是无法保存到数据库,主要是fileCommodityPicture传过来的值,第一种是传到控制器的名字不能与数据库中存放图片的字段对应;第二种是传到控制器的值要与input中的name属性中的名字一致;第三种就是在form标签中写明是用了post请求(method="post"),否则fileCommodityPicture的值无法传到控制器。虽然看似简单,但是还是要注意细节问题!form表单提交按钮点击事件先触发还是提交数据先触发_如何实现图片上传并保存到数据库?...