利用html5 完成图片上传、预览、删除

接上次

html

 

             

                  //放一个svg的icon，关闭的❌
            
 
  
  

            

                //放一个svg的icon，+表示上传，用来改变input的样式
             
  

               
  

js

 function uploadOnchange(){
        let upload=document.getElementById('upload')
        console.log(upload)
        let file=upload.files[0];
        let name=file.name;
        var reader= new FileReader();
        var image = new Image();
        reader.readAsDataURL(file);
        reader.onload=function(){
            image.src = this.result;
           //预览
            document.getElementById('img_list').append(image)
          //图片压缩
            image.onload=()=>{
                let comSrc=this.result
                if(file.size>1024){
                    comSrc= compress(image)
                }
                // console.log('comSrc',comSrc)
            //压缩完成存入数据库
                $.ajax({
                    url:"http://localhost:8080/api/picture",
                    type:'POST',
                    data:JSON.stringify({img:comSrc,name}),
                    dataType: "json",
                    processData: false,
                    contentType: "application/json",
                    success:function(data){
                      //保存返回的图片url存入全局变量
                        imgUrlArr.push(data.url)
                    //更新input
                        document.getElementById("upload-box").innerHTML= ``; 
                    },
                    error:function(data){
                        
                    }
                })
            }
        }       
    }

压缩图片函数

 let compress=function(image){
        var height = image.height;
        var width = image.width;
        var canvas = document.createElement('canvas');
        //height、 width 和图片实际的高、宽一致时，直接赋值canvas的宽高为上述宽高
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = '#FFF';//绘制背景色
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        //0.5为压缩的质量比例，范围是0~1。
        var imgBase = canvas.toDataURL("image/jpeg",0.5);
        return imgBase       
    }    

预览图片删除

    let selectImg,index
    $('#img_list').click(function(e){
        if(e.target.tagName=='IMG'){
            index=$('#img_list img').index(e.target)
            $('#close').css('top',index*133+'px').show()
            selectImg=e.target
        }else{
            $('#close').css('top','0px').hide()
            imgUrlArr.splice(index,1)
            console.log(imgUrlArr)
            selectImg.remove()
        }
       
    })

css，主要改了h5图片上传的样式，还有预览图片的样式

     /* 图片预览 */
             #activity .info  #img_list{
                 width:128px;
                 position:relative
             }
             #activity .info  #close{
                 display:none;
                 position:absolute;
                right:5px;
                /* top:10px */
             }
             #activity .info  #img_list>img{
                width:128px;
                height:128px;
                display:block;
                margin-bottom:5px;
             }
             #activity .info .input-file-box{
                /* border: 1px solid gray; */
                width: 64px;
                height: 64px;
                position: relative;
                text-align: center;
                border-radius: 8px;
            }
            #activity .info .input-file-box #upload{
                opacity:0;
                width: 100%;
                height: 100%;
                position:absolute;
                 top:0;
                 right:0;
                 bottom:0;
                 left:0;
                cursor: pointer;
            }
             #activity .info .input-file-box>.icon{
                 position:absolute;
                 top:0;
                 right:0;
                 bottom:0;
                 left:0;
             }

效果

上传

删除状态