Ajax实现注册并选择头像后上传功能

在初次接触ajax后，我们做了一个crm训练的项目，大多数小组都有注册用户这一项，但是都忽略掉了一个功能，那就是，很多网站的注册是可以上传头像的，在这里我做了一个在已有的头像数组里选择图片上传作头像的小型crm（当然，可以从本地照片上传并裁剪的那种我还没做出来，不过只要有时间我就会研究的，相信时间也不会太久的）。

1.先写出一个注册页面以及css样式我命名为regist.html，css文件名为regist.css，在这里我省略掉具体代码，上图看效果吧：（页面有点丑，别介意）

还有一个用于显示添加后记录的information.html页面，此时只有表头：

2.写出创建连接池模块（dbutil.js），也即是建立链接的js文件，我在这里建的是users_infor表，使用的数据库是test。

3.写出模块用来连接数据库，处理（增删改查）用户数据（Userdao.js），里面把操作数据库的函数一律命名为getAllUser:

4.写出操作数据库的模块，也即是对数据表的增，删，改，查（Userservice.js）：

定义注册函数，即往数据表user_infor添加新纪录的函数

定义显示information.html页面所有记录的函数，即查询user_infor表所有内容的函数

5.当然，不要忘了引入2个模块express和mysql，新建一个文件夹node_module，将这2个模块包含在其中。

6.然后，就是写一个主要的js文件了（main.js），也即是跟用户交互的js：

7.下面的js文件时针对于regist和information的，分别如下：

--------------------------------regist页面选择头像的函数------------------------------------------------------------

-----------------------information页面显示所有记录的函数，window一加载即全部显示------------------------------------------------

src，若没有这个img元素，则此处显示的仍然是路径，将没有图片出现。

8.还有最重要的一点，在数据库中新建user_infor表时，指定user_pics这个字段要指定图片存的路径：

整个工程的文件存放关系如下：

用SQLyog打开数据库，运行main.js后，在浏览器里打开regist.html,开始注册并选择头像：

在某个头像上点击后并返回，头像的text文本框里就生成了图片的路径，如下：

点击提交，就完成了注册，页面跳转到information页面，几次注册成功后页面就显示成下面这样子：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

细数Ajax请求中的async:false和async:true的差异

Ajax与mysql数据交互制作留言板功能

ajax响应json字符串和json数组的实例（图文教程）

以上就是Ajax实现注册并选择头像后上传功能的详细内容，更多请关注Gxl网其它相关文章！