QQ空间照片上传HTML代码演示

引用css

 <link rel="stylesheet" href="css/photo.css">

展示相关代码演示如下：

    <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/1.jpg" /><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>

js部分

  document.querySelector(".close").onclick = function(){document.querySelector(".masking").style.display = "none";}document.querySelector(".mybtn").onclick = function(){document.querySelector(".masking").style.display = "block";}

let uploadArr = [];//获取到图片document.querySelector(".imgFile").onchange = function(){document.querySelector(".loadContainer").style.display = "block";document.querySelector(".showContainer").style.display = "none";console.log(this.files);[...this.files].forEach(file => {let uploadObj = new UploadImg(file);uploadArr.push(uploadObj);uploadObj.createHtml();});};

class UploadImg{    constructor(file){this.file = file;this.ele = null;}createHtml(){//文件转换成base64的格式let fileReader = new FileReader();fileReader.readAsDataURL(this.file);let _this = this;fileReader.onload = function(){console.log(fileReader.result);let uploadDiv = document.createElement("div");uploadDiv.classList.add("uploadPhotoItem");uploadDiv.innerHTML = `<span class="myProgress"><span class="plan"></span><span class="percentText"> 0% </span></span><img src="${fileReader.result}" /><span class="pictureName">${_this.file.name}</span>`;document.querySelector(".wantUpload").appendChild(uploadDiv);_this.ele = uploadDiv;                }}

 uploadFile(){let xhr = new XMLHttpRequest();xhr.open("post","/upload",true);let form = new FormData();form.append("img",this.file);xhr.onload = function(){console.log(xhr.responseText);}xhr.upload.onprogress = (evt)=>{let percent = Math.round(evt.loaded / evt.total * 100)this.ele.querySelector(".plan").style.width = percent + "%";this.ele.querySelector(".percentText").innerHTML = percent + "%";this.ele.querySelector(".myProgress").style.display = "block";if(evt.loaded >= evt.total){console.log("上传完成");}}xhr.send(form);}}

 document.querySelector(".uploadBtn").onclick = function(){uploadArr.forEach(imgfile=>{imgfile.uploadFile();});}
</script>

QQ空间照片上传HTML代码演示相关推荐

H5移动端实现仿QQ空间照片上传效果代码
最近在做项目的时候需要实现一个手机端上传图片效果,但是本来想用H5 的 multiple属性进行一次性多图上传,无奈安卓系统兼容性硬伤,暂时找不到兼容安卓网页版的多图上传方案,于是就仿了QQ空间网页版 ...
基于ueditor开发的仿QQ空间照片上传功能
因为项目中需要用到文章编辑和图片上传的功能,因此便在网上搜索相关的材料,发现ueditor是个非常好用的插件,同时提供的图片上传的功能正好可以用来做我们项目中的上传照片,因此花了两天时间,把uedit ...
QQ空间免费装扮的代码
空间技巧!! 点装扮QQ空间,再把代码复制到地址栏,回车,然后点返回空间首页,再点保存,就OK啦! 4.0版夜光:javascript:window.top.space_addItem(1,7510 ...
php取qq空间说说id,Python爬取qq空间说说的实例代码
具体代码如下所示: #coding:utf-8 #!/usr/bin/python3 from selenium import webdriver import time import re impo ...
python qq空间上传_Python爬虫获取QQ空间信息（上）
开发工具 Python版本:3.6.4 相关模块: requests模块: selenium模块: lxml模块: 以及一些Python自带的模块. 环境搭建安装Python并添加到环境变量,pip ...
qq空间播放器肤代码
blue: javascript:window.top.space_addItem(6,676,0,0,200,200,0); 茶色: javascript:window.top.space_addI ...
java实现qq空间模块_最新免费QQ空间模块个性边框代码
使用方法:进入自己的QQ空间,在浏览器网址栏中输入这个代码,回车,再点自定义,随便动一下你的空间模块,保存即可.不过QQTN下载(http://www.qqtn.com/)提醒大家,这些代码大多是有时 ...
qq空间上传html,qq空间怎么上传本地视频两种上传方式(说说/日志)
首先打开QQ空间,我们有两种上传本地视频到QQ空间的方式, 第一种是说说上传,第二种是日志上传. 先来说第一种, 以上是我们打开qq空间以后,里面说说界面,后面有一组类似冒号的东西,把鼠标移至那里,然 ...
QQ空间最新开场免费代码
欢迎来我家:javascript:window.top.space_addItem(14,4386,0,0,1,1,0); 幽夜幕: javascript:window.top.space_addIt ...

QQ空间照片上传HTML代码演示

QQ空间照片上传HTML代码演示相关推荐

最新文章

热门文章