本文實例為大家分享了ajax上傳圖片到PHP并壓縮圖片顯示的具體代碼，供大家參考，具體內容如下
需求就是，上傳圖片并壓縮圖片頁面效果如下圖：
HTML代碼
div id="main">
div class="demo">
div class="btn btn-success">
span>上傳圖片/span>
input id="fileupload" type="file" name="mypic">
/div>
!--加載進度-->
div class="progress progress-striped">
span class="progress-bar progress-bar-success bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="">/span>
span class="percent">0%/span >
/div>
!--顯示圖片-->
div id="showimg">/div>
!--刪除圖片-->
div class="files">/div>
/div>
/div>
CSS代碼和引入的bootstrap
style type="text/css">
.demo{width:580px; margin:30px auto}
.btn{position: relative;overflow: hidden;margin-right: 4px;}
.btn input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0);}
.progress { position:relative; margin-left:100px; margin-top:-24px; width:200px; border-radius:3px; display:none}
.percent { position:absolute; top:1px; left:2%; color:#fff }
.files{margin:10px 0}
.delimg{margin-left:20px; color:#090; cursor:pointer;margin-top: -6px;}
/style>
!--bootstrap.css3.3.7-->
link rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
JS代碼
!--jquery1.8.1-->
script src="http://code.jquery.com/jquery-1.8.1.min.js">/script>
!--圖片jquery.form.js-->
script type="text/javascript" src="https://www.helloweba.net/demo/upload/jquery.form.js">/script>
script type="text/javascript">
$(function () {
//進度條百分比加載顏色
var bar = $('.bar');
//進度條百分比
var percent = $('.percent');
//圖片顯示
var showimg = $('#showimg');
//進度條
var progress = $(".progress");
//新增
var files = $(".files");
var btn = $(".btn span");
$(".demo").wrap("form id='myupload' action='action.php' method='post' enctype='multipart/form-data'>/form>");
//點擊上傳圖片
$("#fileupload").change(function(){
//提交表單
$("#myupload").ajaxSubmit({
dataType: 'json',
beforeSend: function() {
//顯示進度條
progress.show();
//進度條為0
var percentVal = '0%';
bar.width(percentVal);
percent.html(percentVal);
btn.html("上傳中...");
},
//上傳進度
uploadProgress: function(event, position, total, percentComplete) {
//進度條加載長度數據是number型
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function(data) {
//上傳成功返回參數
files.html("b>"+data.name+"("+data.size+"k)/b> span class='delimg btn btn-danger' rel='"+data.pic+"'>刪除/span>");
showimg.html("img src='"+data.pic+"'>");
btn.html("上傳圖片");
},
error:function(xhr){
//上傳失敗
btn.html("上傳失敗");
bar.width('0')
files.html(xhr.responseText);
},
clearForm: true
});
});
//刪除圖片js
$(".delimg").live('click',function(){
//獲取圖片地址
var pic = $(this).attr("rel");
$.post("action.php?act=delimg",{imagename:pic},function(msg){
if(msg=='delete'){
files.html("刪除成功.");
//刪除圖片效果
showimg.empty();
//隱藏進度條
progress.hide();
}else{
alert(msg);
}
});
});
});
/script>
PHP代碼
?php
date_default_timezone_set("PRC");
//引入圖片壓縮類
require 'imgcompress.class.php';
//如果有數據就是當前數據，沒有為空
$action=isset($_GET['act']) ? $action = $_GET['act']:'';
$filename=isset($_POST['imagename']) ? $_POST['imagename']:'';
if($action=='delimg'){
if(!empty($filename)){
//刪除圖片
unlink($filename);
//向頁面回調參數
echo 'delete';
}else{
echo '刪除失敗.';
}
}else{
//獲取圖片名字和原數據
$picname = $_FILES['mypic']['name'];
//獲取圖片大小
$picsize = $_FILES['mypic']['size'];
if ($picname != "") {
/**
*
* 注釋代碼為是否限制用戶上傳圖片大小和用戶上傳文件格式
*/
// if ($picsize > 512000) { //限制上傳大小
// echo '圖片大小不能超過500k';
// exit;
// }
// $type = strstr($picname, '.'); //限制上傳格式
// if ($type != ".gif" $type != ".jpg") {
// echo '圖片格式不對！';
// exit;
// }
// $rand = rand(100, 999);
// $pics = date("YmdHis") . $rand . $type; //命名圖片名稱
//防止上傳圖片名中文亂碼
$name=iconv("UTF-8","gb2312", $picname);
//上傳路徑
$pic_path = "files/". $name;
//移動圖片位置
move_uploaded_file($_FILES['mypic']['tmp_name'], $pic_path);
}
//圖片地址 拿到圖片地址可以傳遞到數據庫
$source = "files/". $picname;
$size = round($picsize/1024,2); //轉換成kb
$arr = array(
'name'=>$picname,
'pic'=>$source,
'size'=>$size
);
echo json_encode($arr); //輸出json數據
$dst_img = $picname;
$percent = 1; //原圖壓縮，不縮放
/**
* 方法一
* 壓縮圖片傳遞三個參數
* 1.資源文件
* 2.壓縮圖片質量 1是最高，從0.1開始
* 3.圖片壓縮名字
*/
(new Compress($source,$percent))->compressImg($dst_img);
/**
* 方法二
* 1.資源文件
* 2.壓縮圖片質量
* 3.圖片名字
*/
// require 'image.class.php';
// $src = "001.jpg";
// $image = new Image($src);··············
// $image->percent = 0.2;
// $image->saveImage(md5("aa123"));
}
圖片壓縮類請下載源碼
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- PHP等比例壓縮圖片的實例代碼
- php實現等比例壓縮圖片
- PHP實現壓縮圖片尺寸并轉為jpg格式的方法示例
- PHP 實現等比壓縮圖片尺寸和大小實例代碼
- php gd等比例縮放壓縮圖片函數
- 基于PHP實現等比壓縮圖片大小
- php實現批量壓縮圖片文件大小的腳本
- PHP按一定比例壓縮圖片的方法
