重庆分公司

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

ajax如何上传图片到PHP并压缩图片显示

本篇内容主要讲解“ajax如何上传图片到PHP并压缩图片显示”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“ajax如何上传图片到PHP并压缩图片显示”吧!

在网站设计、成都做网站过程中，需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析，以确定网站的风格、色彩、版式、交互等方面的设计方向。成都创新互联还需要根据客户的需求进行功能模块的开发和设计，包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。

HTML代码

 
  
   
   上传图片

CSS代码和引入的bootstrap

 
 .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;}

JS代码

 
  
  
  
 
 $(function () { 
  //进度条百分比加载颜色 
  var bar = $('.bar'); 
  //进度条百分比 
  var percent = $('.percent'); 
  //图片显示 
  var showimg = $('#showimg'); 
  //进度条 
  var progress = $(".progress"); 
  //新增 
  var files = $(".files"); 
  var btn = $(".btn span"); 
  $(".demo").wrap(""); 
  //点击上传图片 
  $("#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(""+data.name+"("+data.size+"k) 删除"); 
     showimg.html(""); 
     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); 
    } 
   }); 
  }); 
 });

PHP代码

 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")); 
}

到此，相信大家对“ajax如何上传图片到PHP并压缩图片显示”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

分享名称：ajax如何上传图片到PHP并压缩图片显示
文章链接：http://cqcxhl.cn/article/gpgcpe.html