原来用的插件，里面东西太乱了，一会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. Os-Hax: 1 靶机记录

    靶机地址:172.16.1.197 Kali地址:172.16.1.108 1 信息搜集 靶机首页 相关信息查看 端口扫描: 开放22和80 目录扫描: 访问http://172.16.1.197/c ...

  2. Python修改paramiko模块开发运维审计保垒机

    目前市面上,专门做IT审计堡垒机的厂商有很多,他们的产品都有一个特点,那就是基本上每台的售价都在20万以上.像我们做技术的,不可能每次待的公司都是大公司,那么在小公司,是不太可能投资20多万买一台硬件 ...

  3. tensorflow1.0 lstm学习曲线

    import tensorflow as tf import numpy as np import matplotlib.pyplot as plt BATCH_START = 0 TIME_STEP ...

  4. JDBC 工具类封装

    每次使用jdbc 我们都要 加载驱动类 创建链接 创建Statement 接口对象执行sql 关闭资源 按照这样的套路可以封装一些重用代码方便在其他方法中调用 package com.xzlf.jdb ...

  5. JVM 真的很难学么?不、只是你“不敢学”而已

    JVM 真的很难学么?不.只是你"不敢学"而已        许多招聘的信息上面都说,要了解jvm.多线程什么的对于 java 程序员来说,这是工作好多年的程序员都不一定能掌握的东 ...

  6. ISO及安全业务,机制

    ISO 应用层 为应用软件提供接口,使应用程序能够使用网络服务. 各种应用程序协议如HTTP(Web),Telnet(远程控制),FTP(文本传输) 表示层 数据的交换格式.数据加密解密.数据的压缩解 ...

  7. thinkphp 5 一些常见问题

    ##  请求缓存 request_cache        

  8. 深入理解PHP之数组(遍历顺序)

    作者: Laruence 本文地址: http://www.laruence.com/2009/08/23/1065.html 转载请注明出处 经常会有人问我, PHP的数组, 如果用foreach来 ...

  9. Ubuntu 安装 Qt， 安装辅助软件

    sudo apt-get install libgl1-mesa-dev libglu1-mesa-dev sudo apt-get install gcc g++ sudo apt-get inst ...

  10. Querying for Event Information

    https://docs.microsoft.com/zh-cn/windows/desktop/EventLog/querying-for-event-source-messages #includ ...