图片裁切上传插件cropper的使用
图片上传格式一般是文件格式和base64格式，比较方便的是图片格式，后台可以方便的处理上传的图片。
首先引入cropper的样式和js
<link rel="stylesheet" href="../dist/cropper.css">
<script src="../dist/cropper.js"></script>HTML结构
<div class="content-wrap">
<h4 class="uploadPicTitle">上传头像</h4>
<div class="box">
<div class="preview-wrap">
<div class="title">裁切预览</div>
<div class="preview-img-wrap">
<img src="" alt="" id="imga" class="preview-img-big" />
<div>150 * 150</div>
<div class="img-wrap">
<img src="../dist/imgs/online-people1.png" alt="" id="img" />
<div class="btn-wrap">
<input type="file" id="file" style="clip:rect(0,0,0,0)" />
<label for="file" class="btn btn-primary" style="margin-right:20px;">选择图片</label>
<button class="btn btn-success">上传图片</button>
</div>css样式
<style>
.uploadPicTitle{line-height:35px;border-bottom:1px solid #ccc;font-weight:bold;}
.content-wrap{width:1000px;}
.box{height:400px;margin-bottom:20px;}
.img-wrap{margin-right:300px;height:100%;background:#f6f6f6;text-align:center;position:relative;}
#img{left:50%;top:50%;transform:translate(-50%,-50%);max-width:100%;max-height:100%;}
.preview-wrap{width:280px;float:right;height:100%;background:#f6f6f6;text-align:center;}
.preview-wrap .title{font-weight:bold;height:35px;line-height:35px;padding:0 10px;text-align:center;margin-top:15px;}
.preview-img-wrap{width:150px;height:150px;border:1px solid #ccc;margin:0 auto;margin-bottom:15px;margin-top:15px;}
.preview-img-big{width:100%;}
</style>js 代码
<script>
var image = document.getElementById('img');
var cropper, canvas;
$('#file').change(function(e) {
if (cropper) {
cropper.destroy();
var file;
var files = e.target.files;
if (files && files.length > 0) {
file = URL.createObjectURL(files[0]);
$('#img').attr({ 'src': file })
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
background: false, //是否显示网格背景
zoomable: false, //是否允许放大图像
guides: false, //是否显示裁剪框虚线
crop: function(event) { //剪裁框发生变化执行的函数。
canvas = cropper.getCroppedCanvas({ //使用canvas绘制一个宽和高200的图片
width: 200,
height: 200,
$('#imga').attr("src", canvas.toDataURL("image/png", 0.3)) //使用canvas toDataURL方法把图片转换为base64格式
$('button').click(function() {
var file = dataURLtoBlob($('#imga').attr("src")); //将base64格式图片转换为文件形式
var formData = new FormData();
var newImg = new Date().getTime() + '.png'; //给图片添加文件名 如果没有文件名会报错
formData.append('file', file, newImg) //formData对象添加文件
$.ajax({
type: "POST",
//url: url + "/res/upload",
url: "upload.php",
data: formData,
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
success: function(data) {
//console.log(data)
alert("上传成功")
//var data = JSON.parse(data); 如果后台传过来是Json格式的文件 不需要再次转换,转换的话会报错
var data = data;
// 将base64格式图片转换为文件形式
// data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAA
// atob 是ASCII 转换成 binary（二进制）btoa是二进制转换成ASCII
// Uint8Array 8位无符号整数类型
// Blob是类文件对象
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
//[u8arr] [] 不能省略
return new Blob([u8arr], { type: mime });
</script>后台php接收就按表单提交方式的接收
<?php
// 允许上传的图片后缀
header("Content-type: text/html; charset=utf-8");
$allowedExts = array("gif", "jpeg", "jpg", "png", "pdf", "txt");
$temp = explode(".", $_FILES["file"]["name"]);
//获取文件对象，键名为name属性或者key
//Array ( [file] => Array ( [name] => 居中.jpg [type] => image/jpeg [tmp_name] => E:\wamp\tmp\php8C86.tmp [error] => 0 [size] => 9742 ) )
print_r($_FILES);
print($_FILES["file"]["name"]);
echo '<br>';
print($_FILES["file"]["type"]);//application/pdf
echo '<br>';
$extension = end($temp); // 获取文件后缀名
print($extension);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "application/pdf")
|| ($_FILES["file"]["type"] == "text/plain")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
//&& ($_FILES["file"]["size"] < 204800) // 小于 200 kb
&& in_array($extension, $allowedExts))
if ($_FILES["file"]["error"] > 0)
echo "错误：: " . $_FILES["file"]["error"] . "<br>";
echo "上传文件名: " . $_FILES["file"]["name"] . "<br>";
echo "文件类型: " . $_FILES["file"]["type"] . "<br>";
echo "文件大小: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "文件临时存储的位置: " . $_FILES["file"]["tmp_name"] . "<br>";
// 判断当期目录下的 upload 目录是否存在该文件
// 如果没有 upload 目录，你需要创建它，upload 目录权限为 777
if (file_exists("upload/" . $_FILES["file"]["name"]))
echo $_FILES["file"]["name"] . " 文件已经存在。 ";
// 如果 upload 目录不存在该文件则将文件上传到 upload 目录下
$name=iconv("UTF-8", "gbk",$_FILES["file"]["name"]);
//move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . "lily".".".$extension);
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" .$name);
echo "文件存储在: " . "upload/" . $_FILES["file"]["name"];