ajax qq空间上传相册

最新推荐文章于 2020-04-30 16:04:49 发布
最新推荐文章于 2020-04-30 16:04:49 发布
阅读量224 收藏
点赞数
分类专栏： ajax 文章标签： node.js javascript html5 es6 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46146313/article/details/105471875
版权 
const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");
const koaBody = require("koa-body");
// 引入 fs模块处理文件
const fs = require("fs");
const mysql2 = require("mysql2");

let app = new Koa();
let router = new Router();
app.use(static(__dirname+"/static"));
const connection = mysql2.createConnection({
    host:"localhost",
    user:"root",
    password:"123321",
    database:"js04"
})

app.use(koaBody({
    multipart:true   //允许文件上传
}))
//首页
router.get("/",ctx=>{
    // ctx.body = "something...";
    ctx.redirect("/login.html");
})
router.post("/upload",async ctx=>{
    // 获取的文件数据ctx.request.files
    // console.log(ctx.request.files.img.path);
    // 转存文件地址
    fs.writeFileSync("./static/img/uploads/"+ctx.request.files.img.name,fs.readFileSync(ctx.request.files.img.path));
    // 将文件路径数据存入到数据库；
    let imgUrl = "/img/uploads/"+ctx.request.files.img.name;
    let imgName = ctx.request.files.img.name;
    // 通过cookies 判断当前登录用户；
    let uid = ctx.cookies.get("uid") || 1; //默认1 如果用户没注册 登录者显示默认的数据
    let [rows] = await connection.promise().query("INSERT INTO photo(imgUrl,imgName,uid) VALUES (?,?,?)",[imgUrl,imgName,uid]);
    let resData;                                    //插入 数据库表单的 值 路径 名  uid 编号
    if(rows.affectedRows>0){ // 添加成功
        resData = {
            info:"添加成功",
            status:1
        }
    }else{
        resData = {
            info:"添加失败",
            status:0
        }
    }
     ctx.body = resData;
})
//获取图片数据做对应呈现；（区分用户）
router.get("/getPhotoData",async ctx=>{
   let uid = ctx.cookies.get("uid") || 1; //通过cookies储存的uid编号来判断 是谁登陆的
   let [rows] =  await connection.promise().query("SELECT * FROM photo WHERE uid=?",[uid]);
   console.log(rows);                       // 返回对应 uid 编号对应所有内容
   ctx.body = rows; //返回到页面
})
// 接收页面发送的数据 并且去数据库 查询 
router.all("/checkUser",async ctx=>{
    // 认证是否登录；
    // console.log(ctx.request.body);
    let {username,pwd} = ctx.request.body; //request.body接收后自动转成对象
    console.log(username,pwd);
    let [rows] = await connection.promise().query("SELECT * FROM users WHERE username=? AND pwd=?",[username,pwd]);
    // console.log(rows);
    let resData; //返回的数据 

    if(rows.length>0){
// 如果是对的 将id存入服务端的cookie；uid是名称 rows[0].id谁登陆存储谁的id值  时效性 
        ctx.cookies.set('uid', rows[0].id, { maxAge: 3600*1000*24*7 });
        resData = { //如果是对的 返回的数据
            info:"用户名密码正确", //
            status:1 // 判断用户名和密码后返回状态码，返回前段状态1 再去判断
        }
    }else{   // 如果数错的返回的 数据
        resData = {
            info:"用户名或者密码错误",
            status:0
        }
    }
    ctx.body = resData; // 如果数错 返回当前页面
})

app.use(router.routes());
app.listen(8686);

登录界面
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="css/login.css" />
  <title>Document</title>
</head>

<body>
  <div class="loginContainer">
    <h1>登录</h1>
    <form action="/checkUser" method="post" onsubmit="return false;">姓名：
      <input class="inputStyle" id="username" type="text" name="username" /><br />密码：
      <input class="inputStyle" id="pwd" type="password" name="pwd" /><br />
      <input class="loginStyle" id="sub" type="submit" value="登录" />
    </form>
  </div>
</body>
<script>
  // document.querySelector("#username")

  document.querySelector("#sub").onclick = function () {
    let username = document.querySelector("#username").value; //1获取账号密码
    let pwd = document.querySelector("#pwd").value;
    // console.log(username,pwd);
    let xhr = new XMLHttpRequest();
    xhr.open("post", "/checkUser", true); //路径checkUser
    xhr.setRequestHeader("content-type","application/json");
    xhr.onload = function () {
      // console.log(JSON.parse(xhr.responseText));
      let res = JSON.parse(xhr.responseText);
        if(res.status==1){ // 如果状态是1 说明用户名密码正确 进入主页
          window.location.href = "/photo.html";
        }else{  //否则返回用户提示
          alert(res.info);
        }
    };
    let data = {
      username,
      pwd
    }
    xhr.send(JSON.stringify(data)); // 2发送账号密码 转字符串 路径checkUser
  }
</script>
</html>

主界面
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/photo.css">
</head>

<body>
    <!-- 展示相关 -->
    <div class="container">
        <div class="photoHeader">
            <div class="imgContainer">
                <img class="photoName" src="img/1.jpg" />
            </div>
            <div class="btnContainer">
                <span class="photoTitle">相册名称</span>
                <button class="mybtn">上传照片</button>
            </div>
        </div>

        <div class="photoContainer">
            <div class="photoItem">
                <img src="img/Home.png" />
                <span>
                    home
                </span>
            </div>
        </div>
    </div>
    <!-- 上传相关 -->
    <div class="masking">
        <div class="addPhotoContainer"></div>
        <div class="addController">
            <h3 class="addTitle">上传照片-普通上传(H5)<span class="close">╳</span></h3>
            <div class="photoTitles">
                <span class="uploadTo">上传到</span>
                <div class="photoSelect">
                    <img class="showPhoto" src="/img/1.jpg" />
                    相册名称
                </div>
            </div>

            <!-- 上传按钮 -->
            <div class="showContainer">
                <div class="uploadContainer">
                    <span class="fileinput-button">
                        <span>上传图片</span>
                        <input class="imgFile" type="file" name="" multiple="multiple" />
                    </span>
                    <span class="hint">
                        按住Ctrl可多选
                    </span>
                </div>
            </div>

            <!-- 显示待上传图片  -->
            <div class="loadContainer">
                <div class="wantUpload">
                    <!-- <div class="uploadPhotoItem">
                        <span class="myProgress">
                            <span class="plan"></span>
                            30%
                        </span>
                        <img src="img/1.jpg" />
                        <span class="pictureName">
                            home
                        </span>
                    </div> -->
                </div>
                <div class="addStyle">
                    <span class="fileinput-add">
                        <span></span>
                        <input class="imgFile-add" type="file" multiple="multiple" />
                    </span>
                </div>
                <!-- 开始上传按钮 -->
                <div class="bottomStyle">
                    <span class="uploadBtn">开始上传</span>
                </div>
            </div>

        </div>
    </div>
</body>
<script>
    // 存放将要上传的图片对象；
    let uploadArr = [];
    let num = 0;
    document.querySelector(".close").onclick = function () {
        document.querySelector(".masking").style.display = "none";
    }
    document.querySelector(".mybtn").onclick = function () {
        document.querySelector(".masking").style.display = "block";
    }

    // 首次添加
    document.querySelector(".imgFile").onchange = function () {
        document.querySelector(".uploadContainer").style.display = "none";
        document.querySelector(".loadContainer").style.display = "block";
        console.log(this.files);
        // this.files.fo
        // Array.from 等同于[...this.files].forEach() 
        Array.from(this.files).forEach(file => {
            let uploadItme = new UploadItem(file); //file传到工具类 实例化出对象
            uploadArr.push(uploadItme); // 添加到数据
            uploadItme.createHtml(); // 渲染显示到页面
        })
    }

    //大加号 继续添加 
    document.querySelector(".imgFile-add").onchange = function () {
        Array.from(this.files).forEach(file => {
            let uploadItme = new UploadItem(file);
            uploadItme.createHtml();
            uploadArr.push(uploadItme);
        })
    }

    // 点击上传   首次添加和继续添加只是添加到小页面上并没有 上传服务器
    document.querySelector(".uploadBtn").onclick = function () {
        console.log(uploadArr);
        async function queue() {
            for (let i = 0; i < uploadArr.length; i++) {
                await uploadArr[i].uploadImg(); //每次点击上传按钮 每上传一张图片都去调用 
                num++; //传一张 加1                               上传图片uploadImg()方法
            }

            if (num >= uploadArr.length) { //当num等于 数组长度时 说明上传完成
                console.log("上传全部完成");
                document.querySelector(".masking").style.display = "none"; //关闭那个小页面
                initHtml(); // 上传全部全成后  重新加载页面
            }
        }
        queue();
    }
    // 工具 类
    class UploadItem {
        constructor(file) {
            this.file = file;
            this.ele = "";
        }
        createHtml() {
            let fileReader = new FileReader();
            fileReader.readAsDataURL(this.file);
            let _this = this;
            fileReader.onload = function () {
                // console.log(this.result);
                let uploadPhotoItem = document.createElement("div");
                uploadPhotoItem.classList.add("uploadPhotoItem");
                uploadPhotoItem.innerHTML = `<span class="myProgress">
                                                <span class="plan"></span>
                                                   <span class="exchange"> 30%</span>
                                                </span>
                                                <img src="${this.result}" />
                                                <span class="pictureName">
                                                    ${_this.file.name}
                                                </span>`;
                document.querySelector(".wantUpload").appendChild(uploadPhotoItem);
                _this.ele = uploadPhotoItem;
            }
        }
        // 上传图片
        uploadImg() { //异步ajax发送
            return new Promise(resolve => {
                let xhr = new XMLHttpRequest();
                xhr.open("post", "/upload", true);
                let form = new FormData();
                form.append("img", this.file);
                xhr.upload.onprogress = (evt) => {
                    // console.log(evt.loaded,evt.total);
                    console.log(this.ele);
                    this.ele.querySelector(".myProgress").style.display = "block";
                    // console.log(Math.round( evt.loaded/evt.total *100)+ "%");
                    let percent = Math.round(evt.loaded / evt.total * 100) + "%";
                    this.ele.querySelector(".plan").style.width = percent;
                    this.ele.querySelector(".exchange").innerHTML = percent;
                    if (evt.loaded >= evt.total) {
                        // 上传完成；
                        resolve();
                    }
                }
                xhr.send(form);
            })
        }
    }
    
    // 上来就执行的ajax功能 去服务端getPhotoData
    function initHtml() {
        let xhr = new XMLHttpRequest();
        xhr.open("get", "/getPhotoData", true);
        xhr.onload = function () { //getPhotoData 路由通过判断id编号来 返回相对应的数据
            // console.log(xhr.responseText);
            let res = JSON.parse(xhr.responseText);
            let photoHtml = "";
            console.log(res); //输出看一下
            res.forEach(item => { //看用 forEach 还是forIn 
                photoHtml += ` <div class="photoItem">
                                    <img src="${item.imgUrl}" />
                                    <span>
                                        ${item.imgName}
                                    </span>
                                </div>`;
            })  //渲染到页面
            document.querySelector(".photoContainer").innerHTML = photoHtml;
        }
        xhr.send();
    }
    initHtml();

</script>

</html>
Jason–json
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
python qq空间_GitHub - Smart-Hypercube/Qzone-API: QQ空间的Python接口
weixin_39561179的博客
12-09 226
QQ空间说说接口这是一个可以用来访问QQ空间说说详细信息的Python模块，能够为用户解析出有用的信息。用法首先要通过传入cookies创建一个Qzone对象，其次调用它的emotion_list方法，可以取得QQ号为uin的用户从第pos条起的连续num条说说(最新的说说为0号)。这个方法的返回值是一个list，其中包含若干个Emotion对象。Emotion对象表示一条说说，包含以下属性：ti...
Java实现模拟QQ空间图片上传
weixin_34323858的博客
01-27 90
Java实现模拟QQ空间图片上传首先看效果:首先编写我们的上传jsp代码，如下:<%@pagelanguage="java"contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Tran...
java 模拟触屏版QQ空间上传图片
tyasd
03-05 3249
模拟触屏版QQ空间上传图片问题。 第一步：上传图片。 参数： picture:【图片的Base64编码】 base64:1 hd_height:480【图片高度】 hd_width:320【图片宽度】 hd_quality:96【图片质量，好像只有70&96
QQ空间无法上传多张图片解决方案
湾区人工智能
06-02 2190
把手机等移动设备的照片全部复制到电脑硬盘上 然后就可以批量上传照片到QQ空间了
那些年的QQ空间-从前到后实现图片上传（1）
weixin_33828101的博客
12-07 141
前言 最近蹭着北京的降温，加上公司项目进度舒缓了一些，底层API也看的头疼，想着做一个什么项目来自我驱动一下，然后看到手机推送了一条已有三俩个月没怎么看过的QQ空间动态消息，所以就你了，从前端到后端实现一个图片上传流程。 项目演示地址 http://47.100.30.67:3000/ 代码git地址 github.com/jiqingpeng/… 操作指南 点击发布进入发布页面 选择好图片配置...
类似QQ空间相册批量上传功能
08-30
这个"仿QQ空间上传组件"正是为了满足这样的需求而设计的，它允许用户一次性上传多张照片，类似于QQ空间的相册上传体验。这个组件在项目开发中具有很高的实用性，只需进行少量的定制化修改，就可以适应各种不同的系统...
模仿 QQ空间相册
01-26
QQ空间相册是一款深受用户喜爱的在线照片存储和分享平台，其设计简洁、功能丰富，为用户提供了一种方便快捷的方式来管理个人的数字记忆。模仿QQ空间相册的项目旨在实现类似的功能，兼容多种主流浏览器，如IE8、360、...
仿QQ空间相册页面
08-25
QQ空间相册页面是互联网应用中的一个重要组成部分，它允许用户浏览、分享和管理个人的图片。这个项目仿制了QQ空间相册的功能和界面，旨在为开发者提供一个学习和参考的实例，帮助他们理解如何使用HTML、CSS以及可能...
FaceLook网络相册-模拟QQ空间相册
03-05
FaceLook是一个百分之九十模拟QQ空间相册的项目，其中相册相片浏览界面美观，功能强大，支持上传相片，评论，回复评论，圈人，查看好友动态等等功能，涉及技术点包括java,js,jQuery,hibernate,struts,spring,采用...
类似QQ空间相册的效果
10-15
QQ空间相册是腾讯公司推出的社交网络服务的一部分，它允许用户上传、分享、管理个人照片，并提供了丰富的展示方式，如幻灯片浏览、缩略图网格等。这个项目的目标是使用JavaScript来实现相似的功能。 在JavaScript...
前后端交互一（ajax的封装，formData实现多文件上传，qq空间批量上传图片案例）
黎小小的博客
04-30 835
1.重点掌握及知识点 重点掌握： XMLHttpRequest对象的使用 ajax的封装使用 利用node搭建服务器提供数据 FormData对象的使用 利用formData实现多文件上传 qq空间批量上传图片案例 知识点： XMLhttpRequet的使用 会使用ajax进行数据交互 会使用node搭建服务器 学会使用FormData来上传文件 2.ajax封装 封装...
QQ空间API接口
weixin_34324081的博客
05-24 2420
2019独角兽企业重金招聘Python工程师标准>>> ...
如何获取qq空间图片的url
热门推荐
认知 行动 坚持
03-01 1万+
对于搞前端开发的人来说， 获取qq空间图片的url可谓是轻而易举的事情， 我想到的方法有： 1. 进入qq空间， 然后查看网页源代码， 然后搜索一下qq号码， 然后就知道组装形式了。 2. 进入qq空间， 然后直接F12， 然后根据qq空间图像定位到对应的代码处， 直接看到组装形式。 3. 直接对着图片右击， 然后复制图片url, 哈哈， 更简单。
最简单Ajax文件异步上传
反重力落叶的博客
05-30 668
认识FormData对象 FormData是Html5新加进来的一个类,可以模拟表单数据 构造函数 解释 FormData (optional HTMLFormElement form) (可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框. 方法void append(DOMString name, DOMString value) name 表单元素名称 v
Ajax获取图片的两种方式
风萧萧梦潇的博客
08-10 1万+
在Web项目中，我们可能遇到需要利用Ajax来获取图片的情况。因为客户端处理的是图片文件的二进制流，所以可利用Blob和File API来将图片转为URL，赋值给img的src属性来解决这个问题。本文总结Ajax获取图片的两种方式，即针对XMLHttpRequest Level 1和Level 2给出解决方案。
Python QQ空间模拟上传图片 代码
tyasd
03-31 2964
# -*- coding: utf-8 -*- ##模拟发送图片 from PIL import Image import base64 import urllib import urllib2 import datetime print datetime.datetime.now().microsecond import re ##第一步先上传图片，返回获得filelen和fi
AJAX上传下载代码研究与Prototype实现优化
本文档主要探讨了如何使用Ajax技术实现文件的上传和下载功能，尤其是在早期的2006年，AJAX（Asynchronous JavaScript and XML）技术还未广泛普及时。作者提到，当时并未找到完整的Java实现，而TELIO公司的Pierre-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jason–json

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值