localResizeIMG图片压缩上传

时间 2019-12-06

标签 localresizeimg 图片压缩上传繁體版

原文原文链接

完整的先后端图片压缩上传，后台语言php javascript

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>文件api</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <style>
    #previewImgDiv {
        width: 200px;
        height: 200px;
        display: table-cell;
        background: #f2f2f2;
        border: 1px solid #ccc;
        vertical-align: middle;
        text-align: center;
        overflow: hidden;
        margin-bottom: 20px;
    }

    #previewImgDiv img {
        max-width: 100%;
        max-height: 100%;
    }
    </style>
</head>

<body style="padding:20px;">
    <div id="test-file-info"></div>
    <div id="previewImgDiv">图片预览</div>
    <div class="file-input" style="margin-top:20px;">
        <label for="xFile" class="btn btn-primary">选择图片</label>
        <button id="upload" class="btn btn-success">上传图片</button>
        <input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);">
        <!-- clip 是对绝对定位进行裁剪，其他的地方默认隐藏rect(top,right,bottom,left),rect的参数都是距离左边或者上边的距离，如top遇bottom是距离位裁剪前上面的距离，left与right距离左边的距离 -->
    </div>
    <div></div>
</body>
<script src="../jQuery/jQuery-2.1.4.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="dist/lrz.bundle.js"></script>
<script type="text/javascript">
var data;
document.querySelector('input').addEventListener('change', function() {
    // this.files[0] 是用户选择的文件
    lrz(this.files[0], { width: 500 })
        .then(function(rst) {

            // 把处理的好的图片给用户看看呗（可选）
            var imgDiv = document.getElementById('previewImgDiv');
            var img = new Image();
            img.src = rst.base64; //base64字符串
            imgDiv.innerHTML = "";
            imgDiv.appendChild(img);
            data = rst.formData
        })
        .catch(function(err) {
            // 万一出错了，这里能够捕捉到错误信息
            // 并且以上的then都不会执行
            alert(err);
        });
});

$("#upload").on("click", function() {
    $.ajax({
        url: 'upload.php',
        data: data,
        processData: false,
        contentType: false,
        type: 'POST',
        error: function(err) {
            console.log("上传失败" + err)
        },
        success: function(result) {
            alert("上传成功");

        },
    })
})
</script>

</html>

后台php

<?php
// 容许上传的图片后缀
header("Content-type: text/html; charset=utf-8");
$allowedExts = array("gif", "jpeg", "jpg", "png");
$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);

$extension = end($temp);     // 获取文件后缀名
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_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);
      echo "文件存储在: " . "upload/" . $_FILES["file"]["name"];
    }
  }
}
else
{
  echo "非法的文件格式";
}
//在使用move_uploaded_file时，路径upload/，必定要先创建upload的文件夹，不然出错
?>