原来用的插件，里面东西太乱了，一会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;
}