关于图片上传实现方案

Love The Way You Lie 2021-11-17 22:06 218阅读 0赞

一、实现方案（一）

1、通过window.URL.createObjectURL（兼容性较好），实现起来稍微复杂些。

<!DOCTYPE html>
    <html>
    <head>
        <title>uploadImg</title>
    </head>
    <style type="text/css">
        #container{
         
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .upload{
         
            width: 400px;
            height: 30px;
            display: inline-block;
            line-height: 30px;
            background: #f0f0f0;
            border: 1px solid #ccc;
            position: relative;
            text-align: center;
        }
        #upload{
         
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer
        }
        #postImg{
         
            margin-top: 20px;
        }
        #imgBox {
         
            overflow: hidden;
        }
        #imgBox .imgContainer{
         
            float: left;
            width: 32%;
            margin-left: 5px;
            margin-top: 20px;
            position: relative;
        }
        #imgBox .imgContainer .delete{
         
            position: absolute;
            left: 0px;
            bottom: 0px;
            height: 30px;
            line-height: 30px;
            background: rgba(25,25,25,.5);
            margin: 0;
            width: 100%;
            text-align: center;
            color: #f0f0f0;
            cursor: pointer;
            display: none;
        }
        #imgBox .imgContainer:hover .delete{
         
            display: block;
        }
        #imgBox img{
         
            width: 100%;
            height: 150px;
            vertical-align: bottom;
        }
        #zoomBox{
         
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(23,23,23,.7);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        #zoomBox img{
         
            max-width:100%;
            z-index: 1001;
        }
        #zoomBox p{
         
            color: #fff;
            cursor: pointer;
            z-index: 1001;
        }
    </style>
    <body>
        <form id="container">
            <span class="upload">点击上传<input id="upload" type="file" multiple accept="image/png,image/jpg,image/gif,image/JPEG"></span>
            <div id="imgBox"></div>
            <input id="postImg" type="button" name="" value="上传">
        </form>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript">
        var imgSrc = [];
        var imgFile = [];
        var imgName = [];
        //监听选择图片的change事件
        $("#upload").on("change",function(){
            getImgObj()
        })
        //获取图片相关信息
        function getImgObj(){        
            var imgObj = $("#upload")[0].files;
            for(var i=0; i<imgObj.length; i++){
                var imgSrcI = getUrl(imgObj[i])
                imgSrc.push(imgSrcI)
                imgFile.push(imgObj[i])
                imgName.push(imgObj[i].name)
            }
            addNewContent()
        }
        //获取图片URL
        function getUrl(file){
               var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
        //添加dom
        function addNewContent(){
            $("#imgBox").html("")
            for(var i =0; i<imgSrc.length; i++){
                var oldObj = $("#imgBox").html()
                $("#imgBox").html(oldObj + '<div class="imgContainer"><img οnclick="zoom(this,'+i+')" title=' + imgName[i] + ' alt=' + imgName[i] + ' src=' + imgSrc[i] + '><p class="delete" οnclick="Delete(this,'+i+')">删除</p></div>');
            }
        }
        //删除
        function Delete(obj,index){
            imgSrc.splice(index, 1);
            imgFile.splice(index, 1);
            imgName.splice(index, 1);
            addNewContent()
        }
        //放大
        function zoom(obj,index){
            var html = "<div id='zoomBox'><img src=" + imgSrc[index] + "><p οnclick='closeZoom()'>关闭</p></div>"
            $("body").append(html)
        }
        //关闭
        function closeZoom(){
            $("#zoomBox").remove()
        }
        //提交
        $("#postImg").click(function(){
            var data = new FormData()
            data.append("imgFile",imgFile)
            console.log(data)
            return false
        })
    </script>
    </html>

2、通过原生js实现预览

<!DOCTYPE html>
    <html>
    <head>
        <title>图片上传</title>
    </head>
    <body>
        <form id="imgForm">
            <div id="box"></div>
            <input id="imgInput" type="file" name="" value="上传图片" multiple>
        </form>
    </body>
    <script type="text/javascript">
        var img = document.getElementById("imgInput")
        var imgArr = [];
        var imgUrl = [];
        var imgobj = [];
        img.onchange=function(){
            var imgs = img.files
            for(var i = 0; i<imgs.length; i++){
                imgArr.push(imgs[i])
            }
            //通过window对象下的URL相关属性
            var createObjUrl = function(blob){
                return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
            }
            for(var i in imgArr){
                imgUrl.push(createObjUrl(imgArr[i]))
                var imgObj = new Image()
                imgObj.src = imgUrl[i]
                document.getElementById("box").appendChild(imgObj)
            }
        }
    </script>
    </html>

3、原理

1、浏览器提供的window.URL.createObjectURL(参数)  参数部分为图片对象。

2、通过input\[file\]监听onchange事件的触发，从而获取files对象。并通过便利files对象（一个类似数组），将图片对象过滤出来。

二、实现方案（二）

1、通过FileReader对象（兼容性待考究）

<!DOCTYPE html>
    <html>
    <head>
        <title>图片上传之FileReader</title>
    </head>
    <style type="text/css">
        #box{
         
            width: 200px;
        }
        #box img{
         
            max-width: 100%;
        }
    </style>
    <body>
        <input type="file" name="" id="imgBtn" multiple>
        <div id="box"></div>
    </body>
    <script type="text/javascript">
        var imgBtn = document.getElementById('imgBtn')
        imgBtn.onchange = function(){
            var imgFile = imgBtn.files[0];
            var imgObj = new FileReader()
            imgObj.onload = function(imgFile){
                var prevImg = new Image()
                prevImg.src = imgFile.target.result;
                document.getElementById('box').appendChild(prevImg)
            }
            imgObj.readAsDataURL(imgFile)
        }
    </script>
    </html>

转载于:https://www.cnblogs.com/helloNico/p/11244336.html