ajax上传图片到服务器端编程语言(专业超文本预处理器的缩写)并压缩图片显示的方法

本文实例为大家分享了创建交互式、快速动态网页应用的网页开发技术上传图片到服务器端编程语言(专业超文本预处理器的缩写)并压缩图片显示的具体代码，供大家参考，具体内容如下

需求就是，上传图片并压缩图片页面效果如下图：

超文本标记语言代码

div id=' main ' div=' demo ' div=' BTNBTN-成功' span上传图片/span输入id='文件上传'类型='文件'名称='我的pic '/div！-加载进度-div class=' progress progress-striped ' span class=' progress-bar progress-bar-success bar '角色=' progress bar ' aria-value now=' 60 ' aria-value min=' 0 ' aria-value max=' 100 ' style=' '/span class=' percent ' 0%/span/div！-显示图片- div id='showimg'/div！-删除图片-div class=' files '/div/div/div CSS代码和引入的引导程序

样式类型='text/css ' .演示{ width :580 pxmargin :30 px auto } .btn {位置：相对；飞越：隐藏；右边距： 4px} .按钮输入{位置：绝对值；top : 0；右： 0；保证金： 0；border:固体透明；opa城市3360 0；filter:alpha(不透明度=0);} .进度{位置：相对；左边距左侧：100像素边距-top :-24px；宽度宽度：200像素边界半径：3 pxdisplay:none} .百分比{ position : absolutetop :1 px左侧：2%;color:#fff } .文件{margin:10px 0} .delimg { margin-left :20 px；颜色： # 090光标：指针指针；边距-top :-6px；} /style！- bootstrap.css3.3.7 - link rel='样式表href=' https://cdn。bootscs。com/bootstrap/3。3 .7/CSS/bootstrap。量滴CSS ' integrity=' sha 384-bvyiisifek1dgmjrakycuharg 32 mucw 73 rydg 4va pmtsz/k68 vbdejh4u '交叉原点='匿名射流研究…代码

！-jquery 1。8 .1-脚本src=' http :http://代码。jquery。com/jquery-1。8 .1 .量滴js '/脚本！-图片jquery。形式。js-script type=' text/JavaScript ' src=' http :https://www。helloweba。net/demo/上传/jquery。形式。js/script脚本类型=' text/JavaScript ' $(function(){//进度条百分比加载颜色var bar=$(' .bar’)；//进度条百分比var百分比=$(' .百分比');//图片显示var show img=$(' # show img ')；//进度条var progress=$(' .进步');//新增定义变量文件=$('。文件');var btn=$(' .BTN斯潘)；$('.演示')。包装('表单id='我的上传'操作='操作。' PHP '方法=' post ' enctype=' multipart/form-data '/form ')；//点击上传图片$('#fileupload ').change(function(){ //提交表单$('#myupload ').ajaxSubmit({ dataType: 'json '，beforeSend:函数(){ //显示进度条进步。show()；//进度条为0 var percentVal=' 0% '；bar.width(百分比值);percent.html(百分比值);' btn.html('上传中.');}, //上传进度上传进度：函数（事件、位置、总计、百分比完成){ //进度条加载长度数据是数字型var percentVal=完成百分比" % "；bar.width(百分比值)百分比. html(百分比值);}，成功：函数（数据){ //上传成功返回参数文件。html(“”数据。名称'('数据。BTNBTN-危险数据。pic“”删除/span’)；显示img。html(' img src='数据。pic ' ')；' btn.html('上传图片');}，error:function(xhr){ //上传失败' btn.html('上传失败');酒吧。宽度(' 0 ')文件。html(xhr。response text)；}，clear form : true })；});//删除图片js $(' .交付').live('click '，function(){ //获取图片地址var pic=$(this).attr(' rel ')；$.post('action.php？act=delimg '，{imagename:pic}，function(msg){ if(msg==' delete '){ files。html(“”删除成功.');//删除图片效果显示img。empty()；//隐藏进度条进步。hide()；} else { alert(msg)；} });});});/脚本服务器端编程语言（Professional Hypertext Preprocessor的缩写）代码

？PHP date _ default _ time zone _ set(' PRC ')；//引入图像压缩类需要' imgccompresss . class . PHP '；//如果有数据，则为当前数据，但不为空。$action=isset($_GET['act'])？$ action=$ _ GET[' act ']:“”；$ filename=isset($ _ POST[' imagename '])？$ _ POST[' imagename ']:“”；if($action=='delimg'){ if(！空($文件名)){ //删除图片取消链接($文件名)；//将参数echo 'delete '回调到页面；}else{ echo '删除失败。} }else{ //获取图片名称和原始数据$ picname=$ _ files[' mypic '][' name ']；//获取图片大小$ picsize=$ _ files[' my pic '][' size ']；if ($picname！='') {/* * * *评论代码是是否限制用户上传图片的大小和用户上传文件的格式*///if ($picsize 512000) {//限制上传大小//echo‘图片大小不能超过50万’；//退出；//}/$ type=strtr($ pic name，'。);//限制上传格式//if ($type！='.gif' $type！='.jpg’){//echo“图片格式错误！”；//退出；//}/$ rand=rand(100，999)；//$pics=date('YmdHis ')。$兰特。$ 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=数组(' name'=$ picname，' pic'=$ source，' size '=$ size)；echo JSON _ encode($ arr)；//输出json数据$ dst _ img=$ picname$ percent=1；//原始图像压缩，无缩放/* * *方法1 *压缩图像通过三个参数* 1。资源文件* 2。压缩图像质量1最高，从0.1 * 3开始。图像压缩名称*/(新压缩($ source，$ percent))-compresseimg($ dst _ img)；/* * *方法2 * 1。资源文件* 2。压缩图像质量* 3。图片名称*///需要“image . class . PHP”；//$ src=' 001 . jpg '；//$ Image=new Image($ src)；//$ image-percent=0.2；//$ image-save image(MD5(' aa 123 '))；}请下载图像压缩类的源代码

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。