form表单提交按钮点击事件先触发还是提交数据先触发_如何实现图片上传并保存到数据库？...

(给Web前端雪儿加星标，提升前端技能)

之 前写过图片上传的案例，但是时间一长就忘了，这次写的这个程序用到了图片的上传，并且能够图文显示，所以写了这篇文章来记录一下。 由于人们的生活质量的提高及网络的发达，所以在各大软件中上传个人的头像及其他图片已成为普遍的事情，差不多所有的软件都实现了这个功能，那么他们究竟是怎么做到的呢？ 其实并不难，现在我就以一个完整的例子来讲解一下。 先来看一下效果图及结构，再来看一下实现的功能的写法。

html文件

问题一：如何实现上传图片的功能并把图片显示出来？

4个步骤：

1. 先打开file文件表单选择图片；
   

2. 创建FileReader对象，用正则表达式过滤图片文件；
   

3. 利用改变事件将图片显示出来；

4. 读取文件，将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的值无法传到控制器。 虽然看似简单，但是还是要注意细节问题！