Ajax を使用して登録およびアバターのアップロード機能を実装する

今回は、Ajaxを使用して登録およびアバターのアップロード機能を実現する方法を紹介します。 Ajaxを使用して登録およびアバターのアップロード機能を実現するための注意点とは次のとおりです。

ajax との最初の連絡の後、ほとんどのグループがユーザーを登録しましたが、多くの Web サイトが登録時にアバターをアップロードできるという機能をすべて無視しました。ここでは、写真を選択する小さな CRM を作成しました。既存のアバター配列を取得し、それらをアバターとしてアップロードします (もちろん、ローカル写真をアップロードしてトリミングできるものはまだ作成していませんが、時間がある限り研究すると思います) それほど時間はかかりません）。

1. まず、

登録ページと CSS スタイルを作成します。これに register.html という名前を付けました。ここでは、特定のコードを省略しています。(ページは少し見にくいですが、気にしないでください)

追加されたレコードを表示するために使用される 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 であるメイン js ファイル (main.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 ファイルはそれぞれ登録用と情報用です:

---- ----------------------------登録ページでアバターを選択する機能-------------- ---------- --------------------------------------

りー

-----------------------情報ページには記録されたすべての機能が表示され、ウィンドウがロードされるとすぐにすべてが表示されます------ - ------------------------------------

function xuanze() {
var pics=document.getElementById("pics");
var picsp = document.getElementById("login_pics");
picsp.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 imgroute=target.src;//此处若弹出imgroute，可以看到完全路径是http:localhost:8888/img/users20.jpg
pics.value=".."+imgroute.substr(21);/*此处要截取后面的部分才是图片的路径，前面的http:localhost:8888要省去，不是我们需要的路径，若不截取将无法识别*/
}
}
}

src、そのような img 要素がない場合、パスは表示されたままになりますが、画像は表示されません。

window.onload=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 src=&#39;"+users[i].u_pics+"&#39;>";//此处要在这个单元格里插入img元素，将提交传过来的路径指定为此img的

8. そして最も重要な点は、データベースに新しい user_infor テーブルを作成するときに、写真を保存するパスを指定するために user_pics フィールドを指定することです:

newRow.insertCell(newRow.cells.length).innerHTML ="<input type=&#39;button&#39; id=&#39;del&#39; id=&#39;" + users[i].u_id + "&#39; value=&#39;删除信息&#39; onclick=&#39;shanchu(this)&#39;/>";
}
} else if (xmlhttpReq.responseText == "failed") {
alert("添加新用户失败");
}
}
}
}

プロジェクト全体のファイル格納関係は次のとおりです。

SQLyog Databaseで開き、main.jsを実行した後、ブラウザでregister.htmlを開き、登録を開始してアバターを選択します:

アバターをクリックして戻ると、テキストが表示されます。アバターのボックスが生成されます。 画像のパスは次のとおりです。

いくつかの登録が成功すると、ページが情報ページにジャンプします。

この記事の事例を読んで、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Ajax と $.ajax の使用方法

ajax を使用してページング テクノロジーを実装する手順の詳細な説明 (コード付き)

以上がAjax を使用して登録およびアバターのアップロード機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。