localResizeIMG图片压缩上传 原
完整的前后端图片压缩上传，后台语言php
<!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
// 允许上传的图片后缀
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的文件夹，否则出错
?>(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018/03/17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
文件存储
文件存储（Cloud File Storage，CFS）为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用，为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用，可实现对现有应用的无缝集成；按实际用量付费，为您节约成本，简化 IT 运维工作。
腾讯云开发者
