html5实现图片压缩上传功能附代码示例
日期：2019-03-26
来源：程序思维浏览：1912次
图片上传用到了FileReader，FormData，实际上主要用这两个我们基本能实现图片的预览和上传了。实现图片压缩，我们需要借助canvas，是的，就是canvas！
看代码：
index.html文件代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Html5实现图片的压缩文件上传</title>
<style>
.weui-uploader__file{width:100px;height:100px;overflow:hidden;}
.weui-uploader__file img{width:100%;height:100%;}
</style>
</head>
<body>
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">照片：</p>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files yiwu">
</ul>
<div class="weui-uploader__input-box xiyipic">
<input id="file" class="weui-uploader__input" type="file" accept="image/*" capture="camera"><!--自动调用相机功能-->
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
$("#file").on("change",function(){
var _this = $(this)[0];
var _file = _this.files[0];
var fileType = _file.type;
var fileSize = _file.size;
var maxSize = 5*1024*1024;
//上传大小判断
if(fileSize > maxSize){
alert('上传图片超出允许上传大小');
return false;
}
if(/image\/\w+/.test(fileType)){
var fileReader = new FileReader();//将文件内容读入内存
fileReader.readAsDataURL(_file);//图片转成base64
fileReader.onload = function(event){
var result = event.target.result; //返回的dataURL
var image = new Image();
image.src = result;
image.onload = function(){ //创建一个image对象，给canvas绘制使用
var cvs = document.createElement('canvas');
var scale = 1;
if(this.width > 1000 || this.height > 1000){
if(this.width > this.height){
scale = 1000 / this.width;
}else{
scale = 1000 / this.height;
}
}
cvs.width = this.width*scale;
cvs.height = this.height*scale; //计算等比缩小后图片宽高
var ctx = cvs.getContext('2d');
ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
var newImageData = cvs.toDataURL('image/jpeg', 0.8);
var sendData = newImageData.replace('data:base64', 'data:image/jpeg;base64');
$.ajax({
url: 'upload.php',
type: 'POST',
dataType: 'json',
data: {img: sendData},
success:function(data){
if(data.code == 1){
//上传成功后自动动创建img标签放在指定位置
var img =$('<div class="weui-uploader__file" ><img src="./'+data.img.substring(1)+'" alt=""></div>');
$(".yiwu").append(img);
$(".xiyipic").append('<input type="hidden" name="xiyipic[]" value="'+data.img.substring(1)+'" />');
}else{
alert('上传失败');
}
}
});
}
}
}else{
alert('请选择图片格式文件');
}
});
</script>
</body>
</html>
upload.php文件代码：
<?php
$post = $_POST['img'];//获取到的base64编码
$data = base64_decode(str_replace('data:image/jpeg;base64', '', $post));//替换
$time = date('Y-m-d');
$path = "./uploadfiles";
if(!file_exists($path)){
mkdir($path);//创建文件夹
}
$dst = $path.'/'.date('H-i-s').'.jpg';//目标路径
$a = file_put_contents($dst, $data);//将编码写入本地文件
if($a){
echo json_encode(array('code' => 1,'img' => $dst));die;
}else{
echo json_encode(array('code' => 0));die;
}
源码下载
看代码：
index.html文件代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Html5实现图片的压缩文件上传</title>
<style>
.weui-uploader__file{width:100px;height:100px;overflow:hidden;}
.weui-uploader__file img{width:100%;height:100%;}
</style>
</head>
<body>
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">照片：</p>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files yiwu">
</ul>
<div class="weui-uploader__input-box xiyipic">
<input id="file" class="weui-uploader__input" type="file" accept="image/*" capture="camera"><!--自动调用相机功能-->
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script>
$("#file").on("change",function(){
var _this = $(this)[0];
var _file = _this.files[0];
var fileType = _file.type;
var fileSize = _file.size;
var maxSize = 5*1024*1024;
//上传大小判断
if(fileSize > maxSize){
alert('上传图片超出允许上传大小');
return false;
}
if(/image\/\w+/.test(fileType)){
var fileReader = new FileReader();//将文件内容读入内存
fileReader.readAsDataURL(_file);//图片转成base64
fileReader.onload = function(event){
var result = event.target.result; //返回的dataURL
var image = new Image();
image.src = result;
image.onload = function(){ //创建一个image对象，给canvas绘制使用
var cvs = document.createElement('canvas');
var scale = 1;
if(this.width > 1000 || this.height > 1000){
if(this.width > this.height){
scale = 1000 / this.width;
}else{
scale = 1000 / this.height;
}
}
cvs.width = this.width*scale;
cvs.height = this.height*scale; //计算等比缩小后图片宽高
var ctx = cvs.getContext('2d');
ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
var newImageData = cvs.toDataURL('image/jpeg', 0.8);
var sendData = newImageData.replace('data:base64', 'data:image/jpeg;base64');
$.ajax({
url: 'upload.php',
type: 'POST',
dataType: 'json',
data: {img: sendData},
success:function(data){
if(data.code == 1){
//上传成功后自动动创建img标签放在指定位置
var img =$('<div class="weui-uploader__file" ><img src="./'+data.img.substring(1)+'" alt=""></div>');
$(".yiwu").append(img);
$(".xiyipic").append('<input type="hidden" name="xiyipic[]" value="'+data.img.substring(1)+'" />');
}else{
alert('上传失败');
}
}
});
}
}
}else{
alert('请选择图片格式文件');
}
});
</script>
</body>
</html>
upload.php文件代码：
<?php
$post = $_POST['img'];//获取到的base64编码
$data = base64_decode(str_replace('data:image/jpeg;base64', '', $post));//替换
$time = date('Y-m-d');
$path = "./uploadfiles";
if(!file_exists($path)){
mkdir($path);//创建文件夹
}
$dst = $path.'/'.date('H-i-s').'.jpg';//目标路径
$a = file_put_contents($dst, $data);//将编码写入本地文件
if($a){
echo json_encode(array('code' => 1,'img' => $dst));die;
}else{
echo json_encode(array('code' => 0));die;
}
源码下载
- 上一篇：redux-thunk使用详解
- 下一篇：javascript实现单例模式附源码解析
精品好课
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...