原来用的插件，里面东西太乱了，一会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. Python 类学习的一些Tips

    这里不详细介绍类,只总结一些小萌新在学习python 类时会有的一些疑点. 类的私有性 在python中,属性和方法的访问权限只有两种,公开的,和私有的.在给属性命名时用两个“__”下划线作为开头,就 ...

  2. eclipse添加方法注释

    打开注释模板编辑窗口:Window ->Preferences->java -> Code Style -> Code Template->Comments type 设 ...

  3. vue结合百度地图Api实现周边配置查询及根据筛选结果显示对应坐标详情

    在我们平常写房地产相关项目的时候经常会用到百度地图,因为这一块客户会考虑到房源周围的配套或者地铁线路所以在这类项目中就不可以避免的会用到百度地图,当然这只是其中一种,其他地图工具也可以,因为我这个项目 ...

  4. tensorflow1.0 矩阵相乘

    import tensorflow as tf matrix1 = tf.constant([[3,3]]) matrix2 = tf.constant([[2],[2]]) product = tf ...

  5. ASP.NET Core 与 ASPOSE.Words for .NET

    Aspose.Total是Aspose公司旗下的最全的一套office文档管理方案,它提供的原生API可以对Word.Excel.PDF.Powerpoint.Outlook.CAD.图片.3D.ZI ...

  6. mysql插入数字都变成2147483647的解决方法

    2147483647是int类型的最大值,所以插入11位的数字都会变成2147483647,把int改为bigint即可

  7. 2019-2020-1 20199328《Linux内核原理与分析》第五周作业

    实验要求: 实验步骤: 这里以20号系统调用getpid为例进行实验,该函数的功能为:返回当前进程标识. getpid.c代码: 查看实验结果: 当前进程pid为:31042. 在C语言中编入汇编代码 ...

  8. Tomcat系列教材 （一）- 教程

    Tomcat系列教材 (一)- 教程 Tomcat是常见的免费的web服务器. Tomcat 这个名字的来历,Tomcat是一种野外的猫科动物,不依赖人类,独立生活. Tomcat的作者,取这个名字的 ...

  9. java中的Atomic类

    文章目录 问题背景 Lock 使用Atomic java中的Atomic类 问题背景 在多线程环境中,我们最常遇到的问题就是变量的值进行同步.因为变量需要在多线程中进行共享,所以我们必须需要采用一定的 ...

  10. redis- info调优入门-《每日五分钟搞定大数据》

    本文根据redis的info命令查看redis的内存使用情况以及state状态,来观察redis的运行情况以及需要作出的相应优化. info 1.memory used_memory:13409011 ...