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

在初次接触创建交互式、快速动态网页应用的网页开发技术后，我们做了一个客户关系管理训练的项目，大多数小组都有注册用户这一项，但是都忽略掉了一个功能，那就是，很多网站的注册是可以上传头像的，在这里我做了一个在已有的头像数组里选择图片上传作头像的小型crm(当然，可以从本地照片上传并裁剪的那种我还没做出来，不过只要有时间我就会研究的，相信时间也不会太久的)。

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

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

2.写出创建连接池模块(dbutil.js)，也即是建立链接的射流研究…文件，我在这里建的是用户信息表，使用的数据库是测试。

var MySQL=require(' MySQL ')；var池=MySQL。创建池({ host : ' localhost '，user : 'root '，password : 'lovo '，database:'test '，port :3306 })；exports.pool=pool3。写出模块用来连接数据库，处理（增删改查)用户数据(Userdao.js)，里面把操作数据库的函数一律命名为getAllUser:

var db=require('./DBUtil/DBUtil。js’)；//var conn=db。connvar mypool=db.pool函数getAllUser(sql，arg，fun){我的池。getconnection(function(err，conn){conn.query(sql，arg，fun)；conn . end()；})}导出。GetAlluser=GetAlluser4.写出操作数据库的模块，也即是对数据表的增，删，改，查(Userservice.js):

var dao=require('./Dao/UserDao。js’)；定义注册函数，即往数据表用户信息添加新纪录的函数

exports.regist=function(req，RES){ var arg；如果(请求。方法==' GET ' | | req。method==' GET '){ arg=[req。查询。用户名，req.query.pwd，req。查询。pics]；} else {arg=[req.body.username，req.body.pwd，req。尸体。pics]；} var SQL=' insert in user _ infor(u _ name，u_pwd，u_pics)值(?)' dao.getAllUser(sql，arg，function (err，result){ if(err){ console。日志(err)；} else { if(结果。影响0){ RES . send文件(' ./静态/html/信息。html ')} else { RES . send文件(' ./static/html/regist.html')}}})定义显示information.html页面所有记录的函数，即查询用户信息表所有内容的函数

exports.listAll=function(req，RES){ var SQL=' select * from user _ infor '；dao.getAllUser(sql，函数(错误，结果，字段){ if(错误){ console。日志(err)；} else { if(结果。长度0){ RES . JSON(结果)；控制台。日志(结果)} else { RES . send('失败');}}})}5.当然，不要忘了引入2个模块表达和mysql，新建一个文件夹节点_模块，将这2个模块包含在其中。

6.然后，就是写一个主要的射流研究…文件了(main.js)，也即是跟用户交互的js:

var http=require(' http ')；var express=require(' express ')；var userser=require(' ./route/UserServiCe。js’)；var URL=必选(' URL ')；var app=express()；app。使用(快递。cookieparser())；app。使用(快递。session({ secret : ' 123456 '，name:'userLogin '，cookie : { max age 33609999999 } })app。set(' port '，8888)；app。使用(快递。static(_ dirname/' static ')；app。使用(快递。方法重写())；app。使用(快递。body parser())；app.post('/regist '，用户服务。regist)；app.post('/list '，用户服务。listallhttp.createServer(应用程序).listen(app.get('port ')，function(){console.log('服务启动成功！监听app.get('端口)端口');})7.下面的射流研究…文件时针对于注册和信息的，分别如下：

-雷吉斯页面选择头像的函数-

功能宣泽(){ var pics=document。getelementbyid(' pics ')；var pics div=文档。getelementbyid(' log in _ pics ')；pics分区。风格。display=' blockvar img=文档。getelementsbytagname(' img ')；var picarrs=['./img/user1.jpg '，'./img/user2.jpg '，'./img/user3.jpg '，'./img/user4.jpg '，'./img/user5.jpg '，'./img/user6.jpg '，'./img/user7.jpg '，'./img/user8.jpg '，'./img/user9.jpg '，'./img/user10.jpg '，'./img/user11.jpg '，'./img/user12.jpg '，'./img/user13.jpg '，'./img/user14.jpg '，'./img/user15.jpg '，'./img/user16.jpg '，'./img/user17.jpg '，'./img/user18.jpg '，'./img/user19.jpg '，'./img/user20.jpg '，'./img/user21.jpg '，'./img/user22.jpg '，'./img/user23.jpg '，'./img/user 24。jpg ']；for(var I=0；IPI carrs . lentigi){ img[I].src=picar RS[I]；} for(var j=0；长度；j ){img[j].onclick=function(e){ var target=e . target | | e . src element；var img rege=target。src//此处若弹出img grege，可以看到完全路径是http : localhost :8888/img/user 20。jpg图片。值=' . 'img luge。substr(21)；/*此处要截取后面的部分才是图片的路径，前面的http:localhost:8888要省去，不是我们需要的路径，若不截取将无法识别*/}}} -信息页面显示所有记录的函数，窗口一加载即全部显示-

窗户。onload=function(){ var xmlhttpReq；如果(窗口. XMLHttpRequest)xmlhttpReq=new XMLHttpRequest()；elsexmlhttpReq=new activexoobject(' Microsoft .XMLHTTP’)；var URL=' http://localhost :8888/list '；//初始化信息xmlhttpReq.open('post '，url，true)；//添加请求头xmlhttpreq。setrequestheader('内容类型'，'应用程序/x-www-form-URL编码')；xmlhttpreq。发送(null)；xmlhttpreq。onreadystatechange=function(){ if(xmlhttpreq。readystate==4 xmlhttpreq。status==200){ if(xmlhttpreq。responsetext！=“失败”){ var user infor=document。getelementbyid(' user infor ')；var user=eval('(' xmlhttpreq。response text '))；for(var I=0；一。用户。长度；I){ var new row=user infor。insert row()；新的一排。风格。高度=' 100px新的一排。风格。背景COlOr='天蓝'；新的一排。插入单元格(新行。细胞。长度).innerHTML=用户[i].u _ namenew新行。插入单元格(新行。细胞。长度).innerHTML=用户[i].u _ pwdnew行。插入单元格(新行。细胞。长度).innerHTMl=' img src='用户[I].u _ pics//此处要在这个单元格里插入img元素，将提交传过来的路径指定为此img的src，若没有这个img元素，则此处显示的仍然是路径，将没有图片出现。

新的一排。插入单元格(新行。细胞。长度).innerHTMl=' input type=' button ' id=' del ' id=' users[I].u_id“”值='删除信息onclick=' shanchu(this)'/'；} } else if(xmlhttpreq。responsetext==' failed '){ alert('添加新用户失败');}}}}8.还有最重要的一点，在数据库中新建用户信息表时，指定用户_图片这个字段要指定图片存的路径：

使用测试；如果存在用户信息，则删除表；CREATE TABLE user _ infor(u _ id INT PRIMARY KEY AUTO _ INCREMENT，u_name CHAR(20) NOT NULL，u_pwd CHAR(20) NOT NULL，u _ pics CHAR(100)NOT NULL)INSERT INTO user _ infor(u _ name，u_pwd，u_pics) VALUES('晓明',' 111111 ','./img/user12.jpg ')，('小芳',' 222222 ','./img/user13.jpg ')，("周晓","333333",/img/user14.jpg ')整个工程的文件存放关系如下：

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

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

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

头像也就可以上传了，因为仓促之中写成的，样式不美观，敬请谅解！如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！