原来用的插件，里面东西太乱了，一会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. C# WCF 之优势及特性

    Windows Communication Foundation(WCF)是由微软开发的一系列支持数据通信的应用程序框架,可以翻译为Windows 通讯开发平台. 整合了原有的windows通讯的 . ...

  2. python 规范篇 如何合理使用 assert

    assert 的合理使用,可以增加代码的健壮度,同时也方便了程序出错时开发人员的定位排查. 什么是 assert? Python 的 assert 语句,可以说是一个 debug 的好工具,主要用于测 ...

  3. Python爬虫篇（代理IP）--lizaza.cn

    在做网络爬虫的过程中经常会遇到请求次数过多无法访问的现象,这种情况下就可以使用代理IP来解决.但是网上的代理IP要么收费,要么没有API接口.秉着能省则省的原则,自己创建一个代理IP库. 废话不多说, ...

  4. tp3.2的__construct和_initialize方法

    在tp3.2框架里面,有一个php自带的__construct()构造函数和tp3自带的构造函数_initialize()的实行顺序是先实行 php自带的__construct()构造函数 再实行 t ...

  5. tp5 -- 控制器的参数

    方法的参数是可以直接获取的到get和post这集中提交格式的数据的. 但是呢. 前置操作时不能这样操作的, 只能老老实实的使用input()这个方法来获取!!!

  6. QT 获取可执行程序的路径

    获取到生成.exe目录 QCoreApplication::applicationDirPath(); 获取当前工程目录 QDir::currentPath()

  7. awk命令及随机数的产生

    3.sed 操作,将文件第9行至第15行的数据复制到第十六行 sed -i  '9,15H;16G' 文件 4.用awk获取文件中的三行的倒数第二列字段 awk -F":" 'NR ...

  8. 【linux三剑客】sed命令

    sed - stream editor for filtering and transforming text sed 流编辑器 strem edition,实现对文件的增删改替换查是Linux中第二 ...

  9. Eclipse Mac OS 安装 Subversion插件subclipse 缺失JavaHL解决方案

    安装 SVN 插件 subclipse 时可能遇到问题 subclipse 安装完成后,当我们选择使用 的时候还是会提示:javaHL not available, SVN接口选择 client:选择 ...

  10. 《C Primer Plus（第6版）中文版》一1.12　复习题

    本节书摘来自异步社区<C Primer Plus(第6版)中文版>一书中的第1章,第1.12节,作者 傅道坤,更多章节内容可以访问云栖社区"异步社区"公众号查看. 1. ...