原来用的插件，里面东西太乱了，一会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. ADO.NET(二）

     对Command的拓展延伸 执行SQL语句. Command 对象需要取得将要执行的SQL语句,通过调用该类的多种方法,向数据库提交SQL语句. ExecuteNonQuery(),ExecuteR ...

  2. Springboot整合https原来这么简单

    1 简介 HTTP是不安全的,我们需要给它套上SSL,让它变成HTTPS.本文章将用实例介绍Springboot整合HTTPS. 2 密码学基础 要谈https就要谈Security,自然就要谈安全: ...

  3. jquery选择时分插件

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

  4. linux 磁盘存储和文件系统

    1.磁盘结构 设备文件:关联至一个设备驱动程序,进而能够与之对应硬件设备进行通信 I/O Ports:I/O 设备地址 一切皆文件:open(),read(),write(),close() 设备类型 ...

  5. 2019-2020-1 20199329《Linux内核原理与分析》第二周作业

    <Linux内核原理与分析>第二周作业 一.上周问题总结: 未能及时整理笔记 Linux还需要多用 markdown格式不熟练 发布博客时间超过规定期限 二.本周学习内容: <庖丁解 ...

  6. Linux 文件常用权限

    -rw------- (600) 只有所有者才有读和写的权限 -rw-r--r-- (644) 只有所有者才有读和写的权限,组群和其他人只有读的权限 -rwx------ (700) 只有所有者才有读 ...

  7. 数据挖掘入门系列教程（十一）之keras入门使用以及构建DNN网络识别MNIST

    简介 在上一篇博客:数据挖掘入门系列教程(十点五)之DNN介绍及公式推导中,详细的介绍了DNN,并对其进行了公式推导.本来这篇博客是准备直接介绍CNN的,但是想了一下,觉得还是使用keras构建一个D ...

  8. Java反射机制概念及使用

    反射机制 —— 将类中的所有成员反射成对于的类. 以“com.test.Person”类为例                      转换对应的类                获取方法      ...

  9. vue2.x学习笔记（三十二）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12684060.html. 深入响应式原理 vue最独特的特性之一,是其非侵入式(耦合度低)的响应式系统:数据模型仅 ...

  10. Django入门4: ORM 数据库操作

    大纲 一.DjangoORM 创建基本类型及生成数据库表结构 1.简介 2.创建数据库 表结构 二.Django ORM基本增删改查 1.表数据增删改查 2.表结构修改 三.Django ORM 字段 ...