js canvas压缩图片和jQuery ajax上传图片简单demo

jinxiutong

2020-04-23

原来用的插件，里面东西太乱了，一会jq，一会原生js，本来原生js就不熟，看起来更难受，而且感觉好多东西都是没用的，而且后端php转存文件一直不是很熟悉，正好一起整理一下。就是很简单的一个demo，如果需要复杂的功能的话需要自己添加。但是原理基本都在这了，不是很熟的时候可以拿来看看直接用。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="js/jquery-2.1.4.js"></script>
</head>
<body>
<form action="upload2.php" enctype="multipart/form-data" method="post">
    <input type="file" name="pic" id="file" onchange="readFile(this)">
    <br>
    <input type="text" name="test">
    <input type="submit" value="提交">
</form>
<img src="" alt="" class="img">
<script>
    $(function(){
        // $("#file").change(function(e){
        //     console.log(e)
        // })
    })
    function readFile(file){
        var file2 = file.files[0] //读取文件流
        let reader = new FileReader()
        reader.readAsDataURL(file2)
        reader.onload = function(e) {
            let base64 = e.target.result
            let image = new Image() //新建一个img标签（还没嵌入DOM节点)
            image.src = base64
            image.onload = function(){
                let canvas = document.createElement(‘canvas‘),
                    context = canvas.getContext(‘2d‘),
                    imageWidth = image.width / 2,    //压缩后图片的大小
                    imageHeight = image.height / 2,
                    data = ‘‘

                canvas.width = imageWidth
                canvas.height = imageHeight

                context.drawImage(image, 0, 0, imageWidth, imageHeight)
                data = canvas.toDataURL(file2.type)
                $(".img").attr({‘src‘:data})
                let fpn = dataURLtoFile(data,‘file.jpg‘)
                let formData = new FormData()
                formData.append(‘pic‘,fpn);
                formData.append(‘test‘,‘123‘)
                formData.append(‘name‘,‘test upload‘)
                $.ajax({
                    url: ‘upload2.php‘,
                    type: ‘POST‘,
                    cache: false,
                    data: formData,
                    dataType:‘json‘,
                    processData: false,
                    contentType: false,
                    success:function(data){
                        console.log(data)
                    }
                });
            }
        }
    }
    function dataURLtoFile(dataurl, filename = ‘file‘) {
        let arr = dataurl.split(‘,‘)
        let mime = arr[0].match(/:(.*?);/)[1]
        let suffix = mime.split(‘/‘)[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], `${filename}.${suffix}`, {
            type: mime
        })
    }
</script>
</body>
</html>

PHP---注意原生的PHP向前端返回数据的时候是不能用return的，需要用echo，用tp5习惯了，这个事还别扭了老半天

<?php
$file = $_FILES;
$post = $_POST;
//var_dump($post);
$path = date(‘Ym‘,time());
//判断文件夹是否存在，使用file_exists这个函数,在使用is_dir来判断是不是目录而不是文件
if(!file_exists($path) || !is_dir($path)){ //不存在这个文件夹或者这个名字不是文件夹就创建
    $mkdir = mkdir($path,0777,true);
}
//创建完文件夹之后再判断这个文件夹能不能写入，使用is_writeable，不能写入的话改变权限
if(!is_writeable($path)){
    $chmod = chmod($path,0777);
    var_dump($chmod);
}
$tmpName = $file[‘pic‘][‘tmp_name‘];
//如果这个临时文件是空的，那就说明没上传文件，后面的就不用走了
if(empty($tmpName)){
    echo ‘没有上传文件‘;
    return;
}
//使用这个函数来判断一下用户上传的文件类型是否符合要求，比如用户上传隐藏类型的运行脚本
$type = file_type($tmpName);

$oldName = $file[‘pic‘][‘name‘];
$mime = $file[‘pic‘][‘type‘];
$error = $file[‘pic‘][‘error‘];
$size = $file[‘pic‘][‘size‘];
//获取上传的文件的信息[dirname]目录路径//[basename]文件名//[extension]文件后缀名//[filename]不包含后缀的文件名
$info = pathinfo($oldName);
$suffix = $info[‘extension‘];//获取文件后缀
$newName = ‘up_‘ . time() . ‘.‘ . $suffix;
//判断有没有这个临时文件，就是说是不是要上传文件
if(!is_uploaded_file($tmpName)){
    return ‘不是上传的文件‘;
}
//然后在这里可以判断文件的类型、mime值、大小、后缀等信息是否符合规则，符合规则的话就可以将缓存中的文件保存到需要的路径中了
$result = move_uploaded_file($tmpName,$path . ‘/‘ . $newName);
//tp5 封装修改了return，可以作为ajax的数据直接返回，但是原生的return是只在server端（服务端）运行的，ajax不能获取到
echo json_encode($post);
function file_type($filename)
{
    $file = fopen($filename, "rb");
    $bin = fread($file, 2); //只读2字节
    fclose($file);
    $strInfo = @unpack("C2chars", $bin);
    $typeCode = intval($strInfo[‘chars1‘].$strInfo[‘chars2‘]);
    $fileType = ‘‘;
    switch ($typeCode)
    {
        case 7790:
            $fileType = ‘exe‘;
            break;
        case 7784:
            $fileType = ‘midi‘;
            break;
        case 8297:
            $fileType = ‘rar‘;
            break;
        case 8075:
            $fileType = ‘zip‘;
            break;
        case 255216:
            $fileType = ‘jpg‘;
            break;
        case 7173:
            $fileType = ‘gif‘;
            break;
        case 6677:
            $fileType = ‘bmp‘;
            break;
        case 13780:
            $fileType = ‘png‘;
            break;
        case 6063:
            $fileType = ‘php‘;
            break;
        case 4742:
            $fileType = ‘js‘;
            break;
        default:
            $fileType = ‘unknown: ‘.$typeCode;
    }
    //Fix
    if ($strInfo[‘chars1‘]==‘-1‘ AND $strInfo[‘chars2‘]==‘-40‘ ) return ‘jpg‘;
    if ($strInfo[‘chars1‘]==‘-119‘ AND $strInfo[‘chars2‘]==‘80‘ ) return ‘png‘;
    return $fileType;
}

canvas ajax 传照片 jquery js