ajax实现上传头像功能,网络编程Ajax实现注册并选择头像后上传功能
在初次接触ajax后,我们做了一个crm训练的项目,大多数小组都有注册用户这一项,但是都忽略掉了一个功能,那就是,很多网站的注册是可以上传头像的,在这里我做了一个在已有的头像数组里选择图片上传作头像的小型crm(当然,可以从本地照片上传并裁剪的那种我还没做出来,不过只要有时间我就会研究的,相信时间也不会太久的)。
1.先写出一个注册页面以及css样式我命名为regist.html,css文件名为regist.css,在这里我省略掉具体代码,上图看效果吧:(页面有点丑,别介意)
还有一个用于显示添加后记录的information.html页面,此时只有表头:
2.写出创建连接池模块(dbutil.js),也即是建立链接的js文件,我在这里建的是users_infor表,使用的数据库是test。
var mysql = require('mysql');
var pool = mysql.createPool({
host : 'localhost',
user : 'root',
password : 'lovo',
database:"test",
port:3306
});
exports.pool=pool;
3.写出模块用来连接数据库,处理(增删改查)用户数据(Userdao.js),里面把操作数据库的函数一律命名为getAllUser:
var db = require("../DBUtil/dbutil.js");
//var conn = db.conn;
var mypool =db.pool;
function getAllUser(sql,arg,fun){
mypool.getConnection(function(err,conn){
conn.query(sql,arg,fun);
conn.end();
})
}
exports.getAllUser=getAllUser;
4.写出操作数据库的模块,也即是对数据表的增,删,改,查(Userservice.js):
var dao = require("../dao/UserDao.js");
定义注册函数,即往数据表user_infor添加新纪录的函数
exports.regist = function(req,res){
var arg;
if (req.method == "get" || req.method == "GET") {
arg = [req.query.username, req.query.pwd, req.query.pics];
} else {
arg = [req.body.username, req.body.pwd, req.body.pics];
}
var sql = "insert into user_infor(u_name,u_pwd,u_pics) values(?,?,?)"
dao.getAllUser(sql, arg, function (err, result) {
if (err) {
console.log(err);
} else {
if (result.affectedRows>0){
res.sendfile("./static/html/information.html")
} else {
res.sendfile("./static/html/regist.html")
}
}
})
}
定义显示information.html页面所有记录的函数,即查询user_infor表所有内容的函数
exports.listAll=function(req,res){
var sql = " select * from user_infor ";
dao.getAllUser(sql,function (err, result, fields) {
if (err){
console.log(err);
} else {
if (result.length>0){
res.json(result);console.log(result)
} else {
res.send("failed");
}
}
})
}
5.当然,不要忘了引入2个模块express和mysql,新建一个文件夹node_module,将这2个模块包含在其中。
6.然后,就是写一个主要的js文件了(main.js),也即是跟用户交互的js:
var http = require("http");
var express = require("express");
var userser = require("./route/UserService.js");
var url= require("url");
var app = express();
app.use(express.cookieParser());
app.use(express.session({
secret:"123456",
name:"userLogin",
cookie:{maxAge:9999999}
}))
app.set("port",8888);
app.use(express.static(__dirname+"/static"));
app.use(express.methodOverride());
app.use(express.bodyParser());
app.post("/regist",userser.regist);
app.post("/list",userser.listAll);
http.createServer(app).listen(app.get("port"),function(){
console.log("服务启动成功!监听"+app.get("port")+"端口");
})
7.下面的js文件时针对于regist和information的,分别如下:
--------------------------------regist页面选择头像的函数------------------------------------------------------------
function xuanze() {
var pics=document.getElementById("pics");
var picsdiv = document.getElementById("login_pics");
picsdiv.style.display = 'block';
var img=document.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/user24.jpg"];
for(var i=0;i
img[i].src=picarrs[i];
}
for(var j=0;j
img[j].οnclick=function(e){
var target= e.target|| e.srcElement;
var imgroute=target.src;//此处若弹出imgroute,可以看到完全路径是http:localhost:8888/img/users20.jpg
pics.value=".."+imgroute.substr(21);/*此处要截取后面的部分才是图片的路径,前面的http:localhost:8888要省去,不是我们需要的路径,若不截取将无法识别*/
}
}
}
-----------------------information页面显示所有记录的函数,window一加载即全部显示------------------------------------------------
window.οnlοad=function(){
var xmlhttpReq;
if (window.XMLHttpRequest)
xmlhttpReq=new XMLHttpRequest();
else
xmlhttpReq=new ActiveXObject("Microsoft.XMLHTTP");
var url="http://localhost:8888/list";
//初始化信息
xmlhttpReq.open("post",url,true);
//添加请求头
xmlhttpReq.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttpReq.send(null);
xmlhttpReq.onreadystatechange = function(){
if (xmlhttpReq.readyState==4 && xmlhttpReq.status==200) {
if (xmlhttpReq.responseText != "failed"){
var userinfor = document.getElementById("userinfor");
var users = eval("(" + xmlhttpReq.responseText + ")");
for (var i = 0; i < users.length; i++){
var newRow = userinfor.insertRow();
newRow.style.height = "100px";
newRow.style.backgroundColor = "skyblue";
newRow.insertCell(newRow.cells.length).innerHTML =users[i].u_name;
newRow.insertCell(newRow.cells.length).innerHTML =users[i].u_pwd;
newRow.insertCell(newRow.cells.length).innerHTML ="";//此处要在这个单元格里插入img元素,将提交传过来的路径指定为此img的
src,若没有这个img元素,则此处显示的仍然是路径,将没有图片出现。
newRow.insertCell(newRow.cells.length).innerHTML ="";
}
} else if (xmlhttpReq.responseText == "failed") {
alert("添加新用户失败");
}
}
}
}
8.还有最重要的一点,在数据库中新建user_infor表时,指定user_pics这个字段要指定图片存的路径:
USE test;
DROP TABLE IF EXISTS user_infor;
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
('xiaoming','111111','../img/user12.jpg'),
('xiaofang','222222','../img/user13.jpg'),
('xiaozhou','333333','../img/user14.jpg')
整个工程的文件存放关系如下:
用SQLyog打开数据库,运行main.js后,在浏览器里打开regist.html,开始注册并选择头像:
在某个头像上点击后并返回,头像的text文本框里就生成了图片的路径,如下:
点击提交,就完成了注册,页面跳转到information页面,几次注册成功后页面就显示成下面这样子:
头像也就可以上传了,因为仓促之中写成的,样式不美观,敬请谅解!如果大家有任何疑问请给我留言,小米会及时回复大家的。在此也非常感谢大家对米云问答网站的支持!
ajax实现上传头像功能,网络编程Ajax实现注册并选择头像后上传功能相关推荐
- 网络编程C/S模型怎样才能实现真正的聊天功能
学完socket编成后,就迫不及待地写一个简单的聊天程序,好在同学面前装装逼,毕竟外行看热闹.然而在自己的电脑上运行是毫无差错,发送接收都没有问题,然而将客户端的exe文件打包后发送给其他电脑上运行时 ...
- java 仿qq 传文件_java网络编程实现QQ发消息文件,图片等内容
前言:昨天我们已经初步学习了网络编程到底是怎么一回事儿,今天在此基础上继续学习网络编程,利用网络编程实现 QQ上的发送消息,群聊,私聊等功能. 首先我们来回顾一下昨天的两点基础知识: 1.建立服务器端 ...
- 楚乔传手游 服务器维护,楚乔传手游网络异常进不去游戏怎么办?楚乔传网络异常解决方法...
随着楚乔传的大热,手游楚乔传也应运而生,上线后的楚乔传手游版虽然好玩但也出现了许多的BUG和问题,最近有小伙伴说楚乔传手游下载后,打不开一直显示网络异常,但是网都好的,那么楚乔传手游网络异常怎么办?楚 ...
- 【网络编程】之八、异步选择WSAAsyncSelect
大家用这个模型,可以让应用程序在一个套接字上接收以windows消息为基础的网络事件通知.我们想要用这个操作,具体的做法就是我们建立一个套接字,然后调用WSAAsyncSelect函数, 也就是说,这 ...
- java上传网络图片_java网络编程之图片上传
输入输出流核心代码 所有的文件传输都是靠流,其中文件复制最具代表性.输入流和输出流,从输入流中读取数据写入到输出流中. InputStream in =输入源; OutputStream os=输出目 ...
- 【java网络编程】用TCP socket实现多线程图片上传
单线程上传 服务端: 客户端: 多线程上传 修改服务端: 修改客户端 单线程上传 服务端: public static void main(String[] args) {try ( // 创建一个S ...
- android网络编程登录和验证,ASP.NET实现用户注册和验证功能(第4节)
在前几篇文章中小编已经为大家分享几篇关于验证控件实现的文章,今天我们再具体为用户登录页面添加输入数据验证功能和验证码功能. 学习内容 1.创建ASP.NET应用程序. 在E:\Solution1目录下 ...
- Python网络编程:E-mail服务(八) 实现抄送和密送功能
简介 本文介绍如何通过smtp模块实现邮件的抄送和密送功能. 抄送功能实现 在发送邮件时,除了发送给相关的责任人,有时还需要知会某些人.这时就需要在邮件里指定抄送人员列表.相关实现如下: import ...
- 菜猪的JAVA 网络编程学习之Socket用法详解(上)
在客户/服务器通信模式中,客户端需要主动创建与服务器连接的Socket(套接字),服务器端收到了客户端的连接请求,也会创建与客户连接的Socket.Socket可以看做是通信连接两端的收发器,服务器与 ...
最新文章
- 机器学习:决策树及ID3,C4.5,CART算法描述
- 求一个张量的梯度_张量流中离散策略梯度的最小工作示例2 0
- 前端学习(1260):promise中的常见api对象方法
- expdp 简单例子
- c语言代码图案代码大全,C语言图形代码.doc
- vb计算机安装教程,windows10系统安装vb6.0图文教程 Win10攻略
- CHIP-seq流程学习笔记(11)-使用GSEA软件进行GSEA分析
- 计算机多系统启动光盘制作,制作启动光盘,小编教你如何制作光盘启动盘
- 智鼎逻辑推理题及答案_PreTalent职场说|2020常见校招笔试题型解析
- FPGA基础入门【14】开发板VGA视频输出控制
- Java代码实现幸运抽奖
- Python-计算三角形边长和面积
- 坚持技术长征,阿里云要定义下一代的云
- Android—Surface,BufferQueue
- VB.NET 通过vbs发送微信消息
- NHWC BGR -> NCHW RGB
- 1091.结构体习题:通过学生学号查询学生信息
- java复习笔记4--SpringCloud系列二:五大神兽之Eureka
- 重根的二阶迭代法matlab,计算方程重根的一个高阶迭代程序
- jsp网络申报审批系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
热门文章
- form的表单序列化
- 62亿!贾跃亭的新一笔融资来了,感觉这次他要成功了!
- TT语音线程优化,一线互联网架构师设计思想解读开源框架
- [智能家居]DIY下雨感应器 接入HomeAssistant实现下雨语音提醒
- 华为荣耀10体验android9,荣耀10 P 版本(EMUI 9.0+Android 9.0) 体验版 9.0.0.120发布说明...
- 浅析 SQL Server 的 CROSS APPLY 和 OUTER APPLY 查询 - 第一部分
- 学计算机可以用xps吗,设计师用什么笔记本电脑好?戴尔XPS 17创作本有颜又有料...
- java美容院网站的设计与实现
- ubuntu终端mysql数据库导出sql文件
- 动员计算机二级考试主题班会,考前动员主题班会