자바스크립트 이미지 업로드 미리보기 구현 방법(소스코드 첨부)

이 기사는 PHP 시너지 구현에 대한 자세한 설명을 제공합니다(코드 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

안녕하세요 여러분, 이번 설명회 시청을 환영합니다. 이번 내용은 이미지 업로드 미리보기 입니다. 마지막으로 소스 코드 링크를 보냅니다.

더 이상 고민하지 않고 여기에 사진이 있습니다.

업로드할 이미지

파란색 상자 안을 클릭하면 PC에서 선택할 수 있습니다. 모바일 단말기에서 사진 촬영을 선택하거나 업로드할 사진을 선택하세요.

HTML part

<div>
    <div>
        <div>
            <img  alt="자바스크립트 이미지 업로드 미리보기 구현 방법(소스코드 첨부)" >
            <div>请点击</div>
            <img  alt="자바스크립트 이미지 업로드 미리보기 구현 방법(소스코드 첨부)" >
        </div>
        <div></div>
        <input>
    </div>
</div>

.default-box 이 레이어는 플러스 이미지입니다.
up-img는 트랜스코딩 후 이미지가 표시되는 곳입니다.
아래 입력은 이미지를 선택하는 곳입니다.

css

        .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;
        }

내부가 포지셔닝입니다.

Page js

    document.querySelector("#addImg").addEventListener("change",function () {
        changeImg({
            id:"addImg",           //input的Id   必须
            imgBox:'upImg',        //显示位置Id   必须
            limitType:['jpg','png','jpeg'],   //支持的类型   必须
            limitSize:819200          //图片超过多大开始进行压缩    可不传
        });
    });

입력의 변경 시간을 모니터링한 다음 매개변수 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 <p>먼저 다양한 가져오기 type, Size 등의 속성 <br> 이미지가 제한 크기보다 작은지 확인합니다. 작다면 직접 base64로 변환하고, 크면 캔버스를 사용하여 압축을 완료하고, base64로 변환합니다. base64를 사용하여 얻은 값을 배경 이미지로 설정합니다. 그런 다음 추가 스타일을 숨깁니다. </p><p style="text-align: center;"><span class="img-wrap"><img src="https://img.php.cn//upload/image/407/191/539/1540188541275097.png" title="1540188541275097.png" alt="자바스크립트 이미지 업로드 미리보기 구현 방법(소스코드 첨부)"></span><br>마지막 미리보기 이미지 </p><p>git 주소: <a href="https://github.com/Zhoujiando..."> https://github.com / Zhoujiando...</a><br></p><p> 앞으로 더 많은 위젯이 추가될 예정입니다. 마지막으로 모두의 건강을 기원합니다. 감사합니다. </p><p class="comments-box-content"></p>

위 내용은 자바스크립트 이미지 업로드 미리보기 구현 방법(소스코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!