js canvas压缩图片和jQuery ajax上传图片简单demo
Posted dayin1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js canvas压缩图片和jQuery ajax上传图片简单demo相关的知识，希望对你有一定的参考价值。
原来用的插件，里面东西太乱了，一会jq，一会原生js，本来原生js就不熟，看起来更难受，而且感觉好多东西都是没用的，而且后端php转存文件一直不是很熟悉，正好一起整理一下。就是很简单的一个demo，如果需要复杂的功能的话需要自己添加。但是原理基本都在这了，不是很熟的时候可以拿来看看直接用。
<!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的主要内容，如果未能解决你的问题，请参考以下文章