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>