ThinkPHP+Uploadify图片上传预览与缩略

控制文件内容:

1public function uploadimages(){ 2        $date = date('Ymd'); 3        $targetFolder = '../Uploads/'.$date.'/'; // Relative to the root 4        if(I('action')=='del'){//判断是否删除图片 5            $img = I('img'); 6            if(in_array($img,$_SESSION['uploadimages'])){//检查提交的图片是否存在session 7                unset($_SESSION['uploadimages'][array_search($img,$_SESSION['uploadimages'])]);//删除对应的图片 8                unlink($targetFolder.'s_'.$img); 9                unlink($targetFolder.'m_'.$img); 10                unlink($targetFolder.'b_'.$img); 11            } 12            foreach($_SESSION['uploadimages'] as $key => $value){ 13                echo '<img src="'.$targetFolder.'m_'.$value.'" width="300" height="300" /><br />'; 14                echo '<a href="javascript:void(0);" id="'.$value.'" class="mylink">删除</a><br />'; 15 16 17            } 18            //session('uploadimages',NULL); 19        }else{ 20            //上传图片 21            import("ORG.Net.UploadFile"); 22            $upload = new UploadFile(); 23            $upload->maxSize  = 10485760 ; 24            $upload->allowExts  = array('jpg', 'gif', 'png', 'jpeg'); 25            $upload->savePath =  $targetFolder; 26            $upload->thumb = true; 27            $upload->thumbPrefix='s_,m_,b_'; 28            $upload->thumbMaxWidth='200,300,620'; 29            $upload->thumbMaxHeight='120,180,300'; 30            $upload->thumbRemoveOrigin=true; 31            if(!$upload->upload()) { 32                echo $upload->getErrorMsg(); 33            }else{ 34                $info =  $upload->getUploadFileInfo(); 35            } 36            $_SESSION['uploadimages'][] = $info[0]['savename'];//将图片放进session,并以数组形式保存 37            foreach($_SESSION['uploadimages'] as $key => $value){ 38                echo '<img src="'.$targetFolder.'m_'.$value.'" width="300" height="300" /><br />'; 39                echo '<a href="javascript:void(0);" id="'.$value.'" class="mylink">删除</a><br />'; 40            } 41        } 42    }

前台HTML:

1<div class="control-group"> 2 <label class="control-label" for="file_upload">图片:</label> 3 <div class="controls"> 4 <input data-no-uniform="true" id="file_upload" type="file" name="file_upload" multiple /> 5 <p> 6 <a href="javascript:$('#file_upload').uploadify('upload','*')" class="label label-success">确认上传</a> 7 <a href="javascript:$('#file_upload').uploadify('cancel','*')" class="label label-warning">重置上传队列</a> 8 </p> 9 <div id="uploadsuccess" style="display: none"></div> 10</div>

JS内容:

1$(document).ready(function() { 2 $('#file_upload').uploadify({ 3 'removeCompleted' : false, 4 'auto' : false, 5 'fileTypeExts' : '*.gif;*.jpg;*.png', 6 'fileSizeLimit' : 1024, 7 'swf' : '__PLUGIN__/uploadify/uploadify.swf', 8 'uploader' : '{:U("goods/uploadimages")}', 9 'onUploadSuccess' : function(file,data,response){ 10 $('#uploadsuccess').html(data).show(); 11 } 12 }); 13 14 $(document).on("click", "a.mylink", function(){ 15 var img = $(this).attr('id'); 16 if(confirm('确定要取消上传这张图片?')){ 17 $.post("{:U('goods/uploadimages')}",{img:img,action:'del'},function(data){ 18 $('#uploadsuccess').html(data).show(); 19 }); 20 } 21 }); 22 }); 23 24上传队列: 在goods/add

上传预览效果:(上传到:goods/uploadimages)

一张图生成3张缩略图,怎么样把3张缩略图放在不同的文件夹下呢?

知道的请告知!

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )