专栏首页前端之攻略图片裁切上传插件cropper的使用

图片裁切上传插件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>
            <div>150 * 150</div>
        </div>
        <div class="img-wrap">
            <img src="../dist/imgs/online-people1.png" alt="" id="img" />
        </div>
    </div>
    <div class="btn-wrap">
        <input type="file" id="file" style="position:absolute;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>
</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{position:absolute;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>";
  }
  else
  {
    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"] . " 文件已经存在。 ";
    }
    else
    {
      // 如果 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"];
    }
  }
}
else
{
  echo "非法的文件格式";
}
//在使用move_uploaded_file时,路径upload/,一定要先建立upload的文件夹,否则出错
?>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【产品设计】基于业务中台的多租户权限管理设计方案

    在设计后台系统(如:CRM、EPR、EHR、电商管理后台等)时,权限管理是必不可少的功能,绝大部分的后台系统都是处理企业业务流程的,会涉及到多个部门的协同合作,...

    物流IT圈
  • 我采访了 PornHub 一位开发者!

    原文:https://davidwalsh.name/pornhub-interview

    GitHubDaily
  • 网站优化之SEO优化三大禁忌

    看到很多不懂的网站优化的网站喜欢关键词堆积,认为关键词越多越好,恨不得写上百八十个关键词,把相关的搜索流量都揽过来。

    大脸猫
  • java微信公众号接入(2)

    conllter类:这里边有个坑,@PostMapping和上一篇文章的@GetMapping路径必须一致

    爱敲代码的猫
  • 史上最全Windows安全工具锦集

    近日,深信服安全团队整理了一些常见的PE工具、调试反汇编工具、应急工具、流量分析工具和WebShell查杀工具,希望可以帮助到一些安全行业的初学者。

    FB客服
  • 软件开发环境被感染 导致“锋彩直播”app携带病毒

    近日火绒安全团队发现,一款名为“锋彩直播”的安卓直播app中带有病毒“TrojanDropper/Ramnit.h”。

    用户6477171
  • 某电商网站jQuery脚本被挂马 大量用户信用卡信息被窃

    【快讯】近日,火绒收到某境外电商网站求助,其网站页面遭遇不明攻击。火绒团队远程分析后,发现该电商网站所使用的jQuery脚本遭遇“挂马”,并被植入恶意代码,可盗...

    用户6477171
  • Qt编写自定义控件61-通用移动

    通用移动类,目标就是为了实现放入任意的控件以后,支持鼠标拖动,在容器中或者父类中拖动,这个应用场景非常多,比如在地图上放置的设备,需要用户自行按下拖动到指定的合...

    feiyangqingyun
  • 路由之POST请求(三)

    这一次我们讲POST请求 post请求和get请求的定义方式一样,只不过在laravel中为了安全,post请求会有csrf限制 老规矩,上代码

    大话swift
  • 面向前端工程师的 Node.js 入门手册(一)

    本文面向的读者已经是了解JavaScript基本使用的前端程序员,但是缺乏服务端的经验,接下来将带你走进在服务端的世界,看看运行在服务端的JavaScript是...

    五月君

扫码关注云+社区

领取腾讯云代金券