Ajax implements the function of uploading after registering and selecting the Avatar

Time:2020-1-26

After the first contact with Ajax, we have done a CRM training project. Most groups have registered users, but they have neglected a function, that is, many websites can upload their avatars. Here I have made a small CRM that selects pictures to upload as their avatars in the existing avatar array (which can be uploaded and cropped from local photos, of course) I haven’t done it yet, but as long as I have time, I will study it, and I’m sure it won’t be too long.

1. First write out a registration page and CSS style. I name it register.html, and the CSS file name is register.css. Here I omit the specific code. See the effect above: (the page is a little ugly, don’t mind)

There is also an information.html page for displaying the records after adding. At this time, there is only the header:

2. Write out the module of creating connection pool (dbutil. JS), that is, the JS file of establishing link. What I built here is the users_infor table, and the database used is test.


var mysql = require('mysql');
var pool = mysql.createPool({
host : 'localhost',
user : 'root',
password : 'lovo',
database:"test",
port:3306
});
exports.pool=pool;

3. Write out the module to connect to the database, process (add, delete, modify and query) the user data (userdao. JS), in which all the functions operating the database are named 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. Write out the module to operate the database, that is, add, delete, modify and query the data table (userservice. JS):


var dao = require("../dao/UserDao.js");

Define the registration function, that is, the function to add a new record to the user info data table


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")
}
}
})
}

Define the function to display all the records of the information.html page, that is, the function to query all the contents of the user information table


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. Of course, don’t forget to introduce two modules, express and MYSQL, and create a new folder node module to include these two modules.

6. Then write a main JS file (main. JS), that is, the JS that interacts with the user:

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 ("service started successfully! Listen for "+ app. Get (" port ") +" port ");
})

7. For the following JS files, for the register and information files, they are as follows:

——————————–The function of selecting the head image of the register page————————————————————

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<picarrs.length;i++){
img[i].src=picarrs[i];
}
for(var j=0;j<img.length;j++){
img[j].onclick=function(e){
var target= e.target|| e.srcElement;
Var imgrovete = target. SRC; // if imgrovete pops up here, you can see that the full path is http: localhost: 8888 / img / users20.jpg
Pics. Value = ".." + imgrovete. Substr (21); / * the path of the picture is to intercept the later part here. The previous http: localhost: 8888 should be omitted. It is not the path we need. If it is not intercepted, it will not be recognized*/
}
}
}

———————–The information page displays all the recorded functions, and all the functions are displayed as soon as the window is loaded————————————————

window.onload=function(){
var xmlhttpReq;
if (window.XMLHttpRequest)
xmlhttpReq=new XMLHttpRequest();
else
xmlhttpReq=new ActiveXObject("Microsoft.XMLHTTP");
var url="http://localhost:8888/list";
//Initialization information
xmlhttpReq.open("post",url,true);
//Add request header
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 SRC = '" + users [i]. U_pics + "'" '"; // to insert the IMG element in this cell, specify the path submitted to the img

SRC, if there is no img element, the path is still shown here, and no picture will appear.

Newrow. Insertcell (newrow. Cells. Length). InnerHTML = "< input type ='button 'id ='del' id = '" + users [i]. U id + "' value = 'delete information' onclick ='shanchu (this) '/ >;
}
} else if (xmlhttpReq.responseText == "failed") {
Alert ("failed to add new user");
}
}
}
}

8. Also, when creating a new user info table in the database, specify the user pics field to specify the path to save the picture:


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')

The document storage relationship of the whole project is as follows:

Open the database with sqliog, run main.js, open register.html in the browser, start to register and select the Avatar:

After clicking on a certain avatar and returning, the path of the image is generated in the text text box of the avatar, as follows:

Click submit to complete the registration, and the page will jump to the information page. After several successful registrations, the page will display as follows:

The head portrait can also be uploaded, because it was written in a hurry, the style is not beautiful, please understand! If you have any questions, please leave a message to me. The editor will reply to you in time. Thank you very much for your support of the developepaer website!

Recommended Today

PHP realizes UnionPay business H5 payment

UnionPay business H5 payment interface document: document address 1: H5 payment interface address: 1: Alipay payment Test address: http://58.247.0.18:29015/v1/netpay/trade/h5-pay Official address: https://api-mop.chinaums.com/ 2: UnionPay payment Test address: http://58.247.0.18:29015/v1/netpay/uac/order Official address: https://api-mop.chinaums.com/ 2: Basic parameters required by the interface The interface uses get parameters. After the interface parameters are directly put into the interface address, the […]