关于图片上传实现方案-蒲公英云

一、实现方案（一）

　　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>