javascript图片上传浏览的完成方法（附源码）

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本篇文章给大家带来的内容是关于php协成实现的详解（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

hello，大家好，游戏开始了，欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。

废话不多说，先上图。

待上传图像

点击蓝色框内，pc可以选择文件，移动端选择拍照或选择图片进行上传。

HTML部分

<div class="img-box">
    <div class="card-box">
        <div class="default-box" >
            <img class="default-img" src="./cardFactory.png" alt="">
            <div class="default-title">请点击</div>
            <img class="add-img" src="./add.png" alt="">
        </div>
        <div class="up-img" id="upImg"></div>
        <input type="file" id="addImg"  class="upImg-btn">
    </div>
</div>

.default-box这层就是加号图像
up-img是转码后显示图像的地方。
下面input是选择图像的地方。

.img-box { display: flex; justify-content: center; align-items: center; } .card-box { width: 7.5rem; height: 4rem; border: solid .04rem #23a7fe; border-radius: 4px; box-sizing: border-box; position: relative; } .upImg-btn { width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; } .up-img { width: 5.58rem; height: 3.12rem; margin: .2rem .6rem; position: absolute; top: .2rem; left: 0; background-repeat: no-repeat; background-position: center center; background-size: cover } .default-box { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .add-img { position: absolute; top: 50%; left: 50%; margin-left: -.64rem; margin-top: -.64rem; width: 1.28rem; height: 1.28rem; } .default-img { position: absolute; padding: 0 1.1rem; bottom: .68rem; box-sizing: border-box; width: 100%; opacity: .5; } .default-title { position: absolute; width: 100%; bottom: .12rem; text-align: center; color: #23a7fe; font-size: .32rem; }

内部就是定位了。

页面js

    document.querySelector("#addImg").addEventListener("change",function () {
        changeImg({
            id:"addImg",           //input的Id   必须
            imgBox:'upImg',        //显示位置Id   必须
            limitType:['jpg','png','jpeg'],   //支持的类型   必须
            limitSize:819200          //图片超过多大开始进行压缩    可不传
        });
    });我们监听input的change时间，然后传入参数dShowImg64.js代码
     //id,limitType,limitSize
    function changeImg(obj = {}) {                          
        if(!obj.id) return;
        if(!obj.limitType)return;
        var dom = document.querySelector("#"+obj.imgBox);
        var files =  document.querySelector("#"+obj.id).files[0];
        var reader = new FileReader();
        var type = files.type && files.type.split('/')[1];           //文件的类型，判断是否是图片
        var size = files.size;         //文件的大小，判断图片的大小
        if (obj.limitType.indexOf(type) == -1) {
            alert('不符合上传要求');
            return;
        }
        //判断是否传入限制大小。压不压缩。
        var limitSize = obj.limitSize ? parseInt(obj.limitSize) : 0;
        if (size < limitSize) {
            reader.readAsDataURL(files);              // 不压缩，直接转base64
            reader.onloadend = function () {
                dom.style.backgroundImage = "url("+this.result+")";
                //如果要上传的话，在这里调用ajax
                document.querySelector(".default-box").style.display = "none";
            }
        } else {                                     //压缩
            var imageUrl = this.getObjectURL(files);      //创造url
            this.convertImg(imageUrl, function (base64Img) {   //调用压缩函数
                dom.style.backgroundImage = "url("+base64Img+")";
                //如果要上传的话，在这里调用ajax
                document.querySelector(".default-box").style.display = "none";
            }, type)
        }
    }
    function convertImg(url, callback, outputFormat) {
        var canvas = document.createElement('CANVAS');  //绘制canvas
        var ctx = canvas.getContext('2d');
        var img = new Image;            //初始化图片
        img.crossOrigin = 'Anonymous';
        img.onload = function () {
            var width = img.width;
            var height = img.height;
            // 按比例压缩2倍       //设置压缩比例，最后的值越大压缩越高
            var rate = (width < height ? width / height : height / width) / 2;
            canvas.width = width * rate;
            canvas.height = height * rate;           //绘制新图
            ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);                                               //转base64
            var dataURL = canvas.toDataURL(outputFormat   关键词：javascript图片上传浏览的完成办法（附源码）