html5实现图片压缩上传功能附代码示例

来源:程序思维浏览:1440次
图片上传用到了FileReader,FormData,实际上主要用这两个我们基本能实现图片的预览和上传了。实现图片压缩,我们需要借助canvas,是的,就是canvas!

html5实现图片压缩上传功能附代码示例

看代码:

index.html文件代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Html5实现图片的压缩文件上传</title>
    <style>
        .weui-uploader__file{width:100px;height:100px;overflow:hidden;}
        .weui-uploader__file img{width:100%;height:100%;}
    </style>
</head>
<body>
<div class="weui-uploader">
    <div class="weui-uploader__hd">
        <p class="weui-uploader__title">照片:</p>
    </div>
    <div class="weui-uploader__bd">
        <ul class="weui-uploader__files yiwu">
        </ul>
        <div class="weui-uploader__input-box xiyipic">
            <input id="file" class="weui-uploader__input" type="file" accept="image/*" capture="camera"><!--自动调用相机功能-->
        </div>
    </div>
</div>
<script src="jquery.min.js"></script>
<script>
    $("#file").on("change",function(){
        var _this = $(this)[0];
        var  _file = _this.files[0];
        var  fileType = _file.type;
        var fileSize = _file.size;
        var maxSize = 5*1024*1024;
        //上传大小判断
        if(fileSize > maxSize){
            alert('上传图片超出允许上传大小');
            return false;
        }
        if(/image\/\w+/.test(fileType)){
            var fileReader = new FileReader();//将文件内容读入内存
            fileReader.readAsDataURL(_file);//图片转成base64
            fileReader.onload = function(event){
                var result = event.target.result;   //返回的dataURL  
                var image = new Image();
                image.src = result;
                image.onload = function(){  //创建一个image对象,给canvas绘制使用  
                    var cvs = document.createElement('canvas');
                    var scale = 1;
                    if(this.width > 1000 || this.height > 1000){
                        if(this.width > this.height){
                            scale = 1000 / this.width;
                        }else{
                            scale = 1000 / this.height;
                        }
                    }
                    cvs.width = this.width*scale;
                    cvs.height = this.height*scale;     //计算等比缩小后图片宽高  
                    var ctx = cvs.getContext('2d');
                    ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
                    var newImageData = cvs.toDataURL('image/jpeg', 0.8);
                    var sendData = newImageData.replace('data:base64', 'data:image/jpeg;base64');
                    $.ajax({
                        url: 'upload.php',
                        type: 'POST',
                        dataType: 'json',
                        data: {img: sendData},
                        success:function(data){
                            if(data.code == 1){
                                //上传成功后自动动创建img标签放在指定位置
                                var img =$('<div class="weui-uploader__file" ><img src="./'+data.img.substring(1)+'" alt=""></div>');
                                $(".yiwu").append(img);
                                $(".xiyipic").append('<input type="hidden" name="xiyipic[]" value="'+data.img.substring(1)+'" />');
                            }else{
                                alert('上传失败');
                            }
                        }
                    });
                }
            }
        }else{
            alert('请选择图片格式文件');
        }
    });
</script>
</body>
</html>

upload.php文件代码:

<?php
$post = $_POST['img'];//获取到的base64编码
$data = base64_decode(str_replace('data:image/jpeg;base64', '', $post));//替换
$time = date('Y-m-d');
$path = "./uploadfiles";
if(!file_exists($path)){
    mkdir($path);//创建文件夹
}
$dst = $path.'/'.date('H-i-s').'.jpg';//目标路径
$a = file_put_contents($dst, $data);//将编码写入本地文件
if($a){
    echo json_encode(array('code' => 1,'img' => $dst));die;
}else{
    echo json_encode(array('code' => 0));die;
}

源码下载
精品好课
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
收藏
扫一扫关注我们