博客

图片上传并预览

  • Post author:
  • Post category:其他




前言


由于之前都没有详细写过上传，现在写一个完整的记录一下加深下印象，以下实现了全动态添加、删除、保存和预览。


添加：动态添加上传图片的容器。


删除：实现删除当前图片。


预览：包含了反转


、上一张、下一张、放大、缩小、还原和拖动换位置。


保存：实时监听是否上传完整。


废话不多说了，上代码。



一、完成一个上传的整体思路。

首先你要知道你要用到什么东西？需要如何去做。

第一步：需要实现上传的标签，<input type=”file” /> 。用该元素可以实现上传图片的功能，由于我当时想的写的好看一些，使用label关联了一下input。之后代码会有展示。

第二步：实现新增操作，这里需要在外边给个大容器，然后动态加载每一块的图片区域，我这里是一个div是一个块。

第三步：实现删除操作，在执行删除操作时首先要获取到你点击的下标，根据下标去进行处理图片块的移出。

第四步：实现保存操作，点击保存时，你首先的获取到所有的图片块，进行遍历判断是否有的没选择图片，如果有没选择的，提醒选中图片，并且禁止往下继续执行。

第五步：实现预览操作，预览的话我为了好看是给新增了一个单独的预览块，其中包括了反转、上一张、下一张、放大、缩小、还原和拖动改变位置。



二、使用步骤



1.引入

<script src="../js/jquery-3.1.1.min.js"></script>



2.结构层

    <h3>图片展示区域可进行拖动改变位置</h3>
    <!-- 上传图片展示区域 -->
    <div class="container" id="draggable">

    </div>
    <button class="xz" onclick="clickTj()">添加</button>
    <button class="bc" onclick="preservation()">保存</button>
    <!-- 预览图片区域 -->
    <div class="previewZzc"></div>
    <div id="preview" class="previewCont">

    </div>


3.表示层



加号的图片需要自己去找

 

.container {
            width: 100%;
            height: 300px;
            display: flex;
            flex-wrap: wrap;
            overflow: auto;
        }

        .containerTow {
            width: 200px;
            height: 200px;
            border: 1px solid #ddd;
            border-radius: 3px;
            margin: 20px 10px;
            position: relative;
        }

        .btn {
            width: 100%;
            position: absolute;
            top: 205px;
            left: 0;
            display: flex;
            justify-content: space-around;
        }

        .labelFile {
            display: block;
            width: 198px;
            height: 150px;
            background: url(../img/jia.png);
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -99px;
        }
        /* 预览区域 */
        .previewZzc{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, .5);
            z-index: 10;
            display: none;
            /*IE高度*/
            filter: alpha(opacity=50);
        }
        .previewCont{
            width: 700px;
            height: 325px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -175px;
            margin-left: -350px;
            z-index: 100;
            background: #fff;
            border-radius: 3px;
            display: none;
        }
        /* 头部功能 */
        .previewContent{
            height: 35px;
            line-height: 35px;
            display: flex;
            justify-content: center;
        }
        .previewHead{
            display: flex;
            justify-content: space-around;
            width: 80%;
            height: 30px;
            margin-top: 5px;
        }
        /* 图片预览区域 */
        .previewBody{
            width: 400px;
            height: 265px;
            border: 1px solid;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -116.5px;
            margin-left: -200px;
            border: 1px solid #ddd;
            overflow: hidden;
            display: flex;
        }
        .previewBody img{
            width: 400px;
            height: 265px;
        }

4.行为层(由于里面包含预览，东西太多，我就偷懒发到一起了，就不分开发了，里面有注释)

        let _transform = 0;//反转的角度
        let _transformList = new Object();//反转、放大缩小
        let _enlargeTransform = 1;//放大、缩小
        // 添加部分
        function clickTj() {
            let _file = "";
            _file += '<div class="containerTow" draggable="true">';
            _file += '<div>';
            _file += '<input style="display:none;" class="filepath" onchange="changePic(this)" accept="image/jpeg,image/jpg,image/png,image/svg" type="file">';
            _file += '<label for="" class="labelFile"></label>';
            _file += '<img src=""  width="200" height="200">';
            _file += '</div>';
            _file += '<div class="btn">';
            _file += '<button onclick="imgPreview(this)">预览</button><button onclick="contentDelete(this)">删除</button>';
            _file += '</div>';
            _file += '</div>';
            $(".container").append(_file);
            let _jiaId = $(".containerTow img");
            let _inputId = $(".containerTow input");
            // 图片
            for (let i = 0, len = _jiaId.length; i < len; i++) {
                _jiaId[i].id = "id" + i;
                _jiaId[i].setAttribute("data_num",i+1);
            }
            // input + label
            let _newId = 0;
            let _newFor = 0;
            $(".containerTow input").each(function () {
                _newId = ++_newId;
                _newFor = ++_newFor;
                $(this).attr("id", "file" + _newId);
                $(this).next("label").attr("for", "file" + _newFor);
            })
            let newDraggable = false;
            $(".containerTow").mousedown(function(){
                newDraggable = true;
                if(newDraggable){
                    divDraggable();
                }
            })
            $(".containerTow").mouseup(function(){
                newDraggable = false;
            })
        }
        // 上传部分
        function changePic(obj) {
            // console.log(obj.files[0]);//这里可以获取上传文件的name
            let $_thisId = $(obj);//当前ID
            let _imgId = $(obj).nextAll("img").attr("id");
            let _thisImg = $(obj).nextAll("img");
            var newsrc = getObjectURL(obj.files[0]);
            document.getElementById(_imgId).src = newsrc;
            imgSrc(_thisImg);
        }
        //建立一個可存取到该file的url
        function getObjectURL(file) {
            var url = null;
            // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
        // 做一个小的图片判断,如果上传图片了，将十字去掉
        function imgSrc(objId) {
            let _imgSrc = $(objId).attr("src");
            if(_imgSrc){
                $(objId).prev().remove();
            }
        }
        // 删除
        function contentDelete(objThis){
            let _this = $(objThis);
            let _removeDiv = _this.parent().parent().remove();
        }
        // 预览
        function imgPreview(objThis,objId,objTransform){
            // 放大初始化
            if(_enlargeTransform >= 4){
                _enlargeTransform = 4;
            }
            // 缩小初始化
            if(_enlargeTransform <= 0.1){
                _enlargeTransform = 0.1;
            }
            $(".previewZzc").css("display","block");
            $(".previewCont").css("display","block");
            let _this = $(objThis);
            let _imgSrc = "";//图片路径
            let _newTopImg = "";//控制上下张数
            
            if(objId == undefined){
                _imgSrc = $(objThis).parent().prev().find("img").attr("src");
                _newTopImg = $(objThis).parent().prev().find("img").attr("id");
            }else if(objId != undefined){
                _imgSrc = $(objId).parent().find("img").attr("src");
                _newTopImg = $(objId).parent().find("img").attr("id"); 
            }
            if(objTransform != undefined){
                _imgSrc = objTransform.src;
                _newTopImg = objTransform.id; 
            }
            let _content = "";//预览容器
            _content += '<div class="previewContent">';
                _content += '<div class="previewHead">';
                    _content += '<input type="button" value="上一张" onclick="imgTop('+ _newTopImg +')" />';
                    _content += '<input type="button" value="反转" onclick="imgReversal('+ _transform +')" />';
                    _content += '<input type="button" value="放大" onclick="imgEnlarge('+_enlargeTransform+','+0+')"/>';
                    // _content += '<input type="button" value="放大" onclick="imgEnlarge('+_enlargeWidth+','+_enlargeHeight+','+0+')"/>';
                    _content += '<input type="button" value="缩小" onclick="imgEnlarge('+_enlargeTransform+','+1+')" />';
                    // _content += '<input type="button" value="缩小" onclick="imgEnlarge('+_enlargeWidth+','+_enlargeHeight+','+1+')" />';
                    _content += '<input type="button" value="还原" onclick="imgReduction()" />';
                    _content += '<input type="button" value="下一张" onclick="imgBottom('+ _newTopImg +')" />';
                    _content += '<input type="button" value="关闭" onclick="imgNone()" />';
                _content += '</div>';
            _content += '</div>';
            _content += '<div class="previewBody">';
                _content += '<div class="img">';
                    _content += '<img src="'+_imgSrc+'" alt="'+_newTopImg+'"  id="'+_newTopImg+'">';
                _content += '</div>';
            _content += '</div>';
            $("#preview").html(_content);
             // 鼠标滚轮
             img(_enlargeTransform);
            // 反转限制
            if(_transform != 0){
                $(".previewBody .img").css("transform","rotate("+_transform+"deg)");//反转
            }
            // 放大缩小限制
            if(_enlargeTransform > 1){
                $(".previewBody img").css({"transform":"scale("+_enlargeTransform+")","margin":"auto"});
            }
            
           if(_enlargeTransform <= 1){
                $(".previewBody img").css({"transform":"scale("+_enlargeTransform+")","margin":"auto"});
            }
           
        }
        // 关闭
        function imgNone(){
            $(".previewZzc").css("display","none");
            $(".previewCont").css("display","none");
            // 清空鼠标滚轮事件
            // IE和谷歌
            document.onmousewheel = function () {}
            // 火狐
            document.addEventListener('DOMMouseScroll', (e) => {});
        }
        //下一张
        function imgBottom(_this){
            let _imgLen = $(".containerTow img").length;
            let _thisId = $(_this).parent().parent();
            let _next = _thisId.next("div [class=containerTow]");
            let _class = {
                transform:"scale("+ 1 +")"
            }
            $(".previewBody img").css(_class);//放大
            _enlargeTransform = 1;
            if(_imgLen <= 1){
                alert("无下张图片!");
                return;
            }else{
                if(_next.length != 0){
                    // 替换内容区图片
                    let _nextSrc = _next.find("img").attr("src");
                    $(".previewBody").find("img").attr("src",_nextSrc);
                    // 获取当前内容区图片父下是否有下级数据
                    let _thisNextId = _next.find("img");
                    imgPreview("",_thisNextId);
                }else{
                    alert("这是最后一张了！");
                }
            }
        }
        // 上一张
        function imgTop(objThis){
            let _imgLen = $(".containerTow img").length;
            let _thisId = $(objThis).parent().parent();
            let _next = _thisId.prev("div [class=containerTow]");
            let _class = {
                transform:"scale("+ 1 +")"
                }
            $(".previewBody img").css(_class);//放大
            _enlargeTransform = 1;
            if(_imgLen <= 1){
                alert("无上张图片!");
                return;
            }else{
                if(_next.length != 0){
                    // 替换内容区图片
                    let _nextSrc = _next.find("img").attr("src");
                    $(".previewBody").find("img").attr("src",_nextSrc);
                    // 获取当前内容区图片父下是否有下级数据
                    let _thisNextId = _next.find("img");
                    imgPreview("",_thisNextId);
                }else{
                    alert("这是第一张了！");
                }
            }
        }
        // 反转
        function imgReversal(objNumber){
            let _class = {
                transform:"rotate("+objNumber+"deg)"
            }
            $(".previewBody img").css("transform","rotate("+objNumber+"deg)");//反转
            let _transformSrc = $(".previewBody img").attr("src");//图片路径
            let _transformId = $(".previewBody img").attr("id");//图片Id
            _transformList = {
                "src":_transformSrc,
                "id":_transformId
            }
            _transform = objNumber + 90;
            if(_transform == 360){
                _transform = 0;
            }
            imgPreview("",undefined,_transformList);
        }
        // 放大 
        function imgEnlarge(objTransform,objState){
            let _transformSrc = $(".previewBody img").attr("src");//图片路径
            let _transformId = $(".previewBody img").attr("id");//图片Id
            _transformList = {
                "src":_transformSrc,
                "id":_transformId
            }
            let _class = "";
            if(objState == "0"){//放大
                _class = {
                    transform:"scale("+objTransform + 0.1 +")"
                }
                $(".previewBody img").css(_class);//放大
                _enlargeTransform = objTransform + 0.1;
            }else{// 缩小
                _class = {
                    transform:"scale("+objTransform - 0.1 +")"
                }
                $(".previewBody img").css(_class);//缩小
                _enlargeTransform = objTransform - 0.1;
            }
            imgPreview("",undefined,_transformList);
        }
        // 鼠标滚轮
        let _newNum = 0;
        function img(objTransform){
            let _transformSrc = $(".previewBody img").attr("src");//图片路径
            let _transformId = $(".previewBody img").attr("id");//图片Id
            _transformList = {
                "src":_transformSrc,
                "id":_transformId
            }
            let _class = "";
            document.onmousewheel = function (e) {
                // IE和谷歌
                if (e.wheelDelta > 0) {
                    _class = {
                        transform:"scale("+objTransform + 0.1 +")"
                    }
                    $(".previewBody img").css(_class);//放大
                    _enlargeTransform = objTransform + 0.1;
                    imgPreview("",undefined,_transformList);
                   
                } else {
                    _class = {
                        transform:"scale("+objTransform - 0.1 +")"
                    }
                    $(".previewBody img").css(_class);//缩小
                    _enlargeTransform = objTransform - 0.1;
                    imgPreview("",undefined,_transformList);
                }
            }
            // 火狐
            document.addEventListener('DOMMouseScroll', (e) => {
                if (e.detail > 0) {
                    _class = {
                        transform:"scale("+objTransform - 0.1 +")"
                    }
                    $(".previewBody img").css(_class);//缩小
                    _enlargeTransform = objTransform - 0.1;
                    imgPreview("",undefined,_transformList);
                } else {
                    _class = {
                        transform:"scale("+objTransform + 0.1 +")"
                    }
                    $(".previewBody img").css(_class);//放大
                    _enlargeTransform = objTransform + 0.1;
                    imgPreview("",undefined,_transformList);
                }
            }, false);
            
        }
        // 还原
        function imgReduction(){
            let _transformSrc = $(".previewBody img").attr("src");//图片路径
            let _transformId = $(".previewBody img").attr("id");//图片Id
            _transformList = {
                "src":_transformSrc,
                "id":_transformId
            }
            let _class = {
                    transform:"scale("+ 1 +")"
                }
            $(".previewBody img").css(_class);//放大
            _enlargeTransform = 1;
            imgPreview("",undefined,_transformList);
        }
        // 拖动方块互换位置(使用H5的拖放)
        function divDraggable(){
            // 获取所有图片块
            let _divClass = document.getElementsByClassName("containerTow");
            //用来保存图片块
            let _cont = null;
            for(let i = 0,len = _divClass.length;i < len;i++){
                // 拖动是将div块保存到_cont
                _divClass[i].ondragstart = function(){
                    _cont = this;
                }
                // 阻止默认事件
                _divClass[i].ondragover = function (){
                    event.preventDefault();
                }
                //拖动结束时，在当前位置下 进行drop事件
                let _draggable = document.getElementById("draggable");
                _divClass[i].ondrop = function(){
                    if(_cont != null && _cont != this){
                        let _thisDiv = document.createElement("div");
                        _draggable.replaceChild(_thisDiv,this);
                        _draggable.replaceChild(this,_cont);
                        _draggable.replaceChild(_cont,_thisDiv);
                    }
                }
            }
        }
        // 保存检查
        function preservation(){
            let _imgContainer = $("#draggable div.containerTow");
            let _kg = false;
            for(let i = 0,len = _imgContainer.length;i < len;i++){
                let _imgData = _imgContainer[i];
                let _imgSrc = $(_imgData).find("img").attr("src");
                if(_imgSrc == ""){
                    let _indexNum = $(_imgData).find("img").attr("data_num")
                    alert("请上传第" + _indexNum + "张图片!");
                    return;
                }
            }
            alert("请求方法");
        }



总结

学无止境，遇事不慌，最后你会发现没有那么难！


版权声明：本文为weixin_43609222原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。