本文實例為大家分享了ajax上傳圖片到PHP并壓縮圖片顯示的具體代碼,供大家參考,具體內(nèi)容如下
需求就是,上傳圖片并壓縮圖片頁面效果如下圖:
HTML代碼
div id="main"> div class="demo"> div class="btn btn-success"> span>上傳圖片/span> input id="fileupload" type="file" name="mypic"> /div> !--加載進(jìn)度--> 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 () { //進(jìn)度條百分比加載顏色 var bar = $('.bar'); //進(jìn)度條百分比 var percent = $('.percent'); //圖片顯示 var showimg = $('#showimg'); //進(jìn)度條 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() { //顯示進(jìn)度條 progress.show(); //進(jìn)度條為0 var percentVal = '0%'; bar.width(percentVal); percent.html(percentVal); btn.html("上傳中..."); }, //上傳進(jìn)度 uploadProgress: function(event, position, total, percentComplete) { //進(jìn)度條加載長度數(shù)據(jù)是number型 var percentVal = percentComplete + '%'; bar.width(percentVal) percent.html(percentVal); }, success: function(data) { //上傳成功返回參數(shù) 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(); //隱藏進(jìn)度條 progress.hide(); }else{ alert(msg); } }); }); }); /script>
PHP代碼
?php date_default_timezone_set("PRC"); //引入圖片壓縮類 require 'imgcompress.class.php'; //如果有數(shù)據(jù)就是當(dāng)前數(shù)據(jù),沒有為空 $action=isset($_GET['act']) ? $action = $_GET['act']:''; $filename=isset($_POST['imagename']) ? $_POST['imagename']:''; if($action=='delimg'){ if(!empty($filename)){ //刪除圖片 unlink($filename); //向頁面回調(diào)參數(shù) echo 'delete'; }else{ echo '刪除失敗.'; } }else{ //獲取圖片名字和原數(shù)據(jù) $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); } //圖片地址 拿到圖片地址可以傳遞到數(shù)據(jù)庫 $source = "files/". $picname; $size = round($picsize/1024,2); //轉(zhuǎn)換成kb $arr = array( 'name'=>$picname, 'pic'=>$source, 'size'=>$size ); echo json_encode($arr); //輸出json數(shù)據(jù) $dst_img = $picname; $percent = 1; //原圖壓縮,不縮放 /** * 方法一 * 壓縮圖片傳遞三個參數(shù) * 1.資源文件 * 2.壓縮圖片質(zhì)量 1是最高,從0.1開始 * 3.圖片壓縮名字 */ (new Compress($source,$percent))->compressImg($dst_img); /** * 方法二 * 1.資源文件 * 2.壓縮圖片質(zhì)量 * 3.圖片名字 */ // require 'image.class.php'; // $src = "001.jpg"; // $image = new Image($src);·············· // $image->percent = 0.2; // $image->saveImage(md5("aa123")); }
圖片壓縮類請下載源碼
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
標(biāo)簽:衡陽 海南 樂山 德陽 內(nèi)江 邯鄲 黔東 婁底
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《ajax上傳圖片到PHP并壓縮圖片顯示的方法》,本文關(guān)鍵詞 ajax,上傳,圖片,到,PHP,并,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。