原来用的插件，里面东西太乱了，一会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;

}

js canvas压缩图片和jQuery ajax上传图片简单demo的更多相关文章

  1. js canvas压缩图片上传

    $('input[type="file"]').on('change',function(){ var files = !!this.files ? this.files : [] ...

  2. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  3. vue上传图片 base64+canvas压缩图片

    这是先将图片 base64转码 在拿canvas压缩的

  4. 使用canvas压缩图片 并上传

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

  6. 使用Canvas压缩图片

    讲干货,不啰嗦,当涉及对图片有质量压缩要求的时候,可以使用Canvas实现图片压缩. 步骤: 1.获取img元素,既要压缩的图片 2.创建canvas对象 3.使用canvas的drawImage方法 ...

  7. 利用canvas压缩图片

    现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...

  8. canvas压缩图片

    1.canvas.toDataUrl压缩图片 canvas的toDataUrl方法可以将内容导出为base64编码格式的图片,采用base64编码将比源文件大1/3,但是该方法可以指定导出图片质量,所 ...

  9. canvas压缩图片变模糊问题

    canvas 画图图片变模糊问题 问题描述 在使用 canvas 对图片进行编辑导出图片之后发现图片和原图相比变得模糊了 canvas 画图线条变粗 问题产生原因 该问题在 PC 下面并不会产生,原因 ...

随机推荐

  1. MyBatis model、xml、mapper 自动生成，附源码

    Mybatis 代码自动生成 model.xml.mapper 代码结构图 代码地址 https://github.com/shootercheng/codegen 需要修改的地方见 readme

  2. Netty入门与实战教程总结分享

    前言:都说Netty是Java程序员必须要掌握的一项技能,带着不止要知其然还要知其所以然的目的,在慕课上找了一个学习Netty源码的教程,看了几章后着实有点懵逼.虽然用过Netty,并且在自己的个人网 ...

  3. MVC-前端设计

    来源于:https://www.cnblogs.com/miro/p/4030622.html 从前端的UI开始 MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端U ...

  4. python 工具链 包管理工具 pip

    Installation mac下可以采用 brew,easy_install(python自带)等方式安装. centos下可以采用yum,easy_install等方式安装. 但是上面两种方式在系 ...

  5. react: typescript integrate withRouter

    define interface: export interface INav { nav: string } export interface IModuleItem { state?: strin ...

  6. Go语言 2019 调查报告发布

    Go 官方博客昨日公布了[ 2019 年 Go 语言调查报告].本次调查收到的回复达到 10,975 份,约为去年的两倍. 这些受访者的反馈意见将被选取用于改进 Go 语言的发展. 以下是 2019 ...

  7. 高性能的JavaScript,这是一个高级程序员必备的技能

    不知道大家有没有看过高性能JavaScript,这个书是一本好书,推荐有JavaScript的基础的同学可以看一看这本书. 下面是我根据这本书整理出来的知识: 1.将经常使用的对象成员.数组项.和域外 ...

  8. Linux 日常操作

    Linux 日常操作 */--> Linux 日常操作 Table of Contents 1. 查看硬件信息 1.1. 服务器型号序列号 1.2. 主板型号 1.3. 查看BIOS信息 1.4 ...

  9. thinkphp5.1生成缩略图很模糊

    缩略图一定要从大分辨率往小生成 $image->thumb(400,400,\think\Image::THUMB_CENTER)->save(Env::get('root_path'). ...

  10. python 开发一款图片压缩工具（四）：上传图床

    上一篇使用了 pngquant 图片压缩工具进行压缩,并通过 click 命令行工具构建了 picom 包.这篇的主要功能是实现图片上传. 图片上传功能的实现 通过 pngquant 压缩图片后,得到 ...