PHP实现多图上传(结合uploadify插件)思路分析
程序员文章站
2024-03-05 08:55:30
本文实例讲述了php实现多图上传的方法。分享给大家供大家参考,具体如下:
1.已有图片可以删除
2.有一个新增的按钮
3.点击新增按钮,跳出frame框
4...
本文实例讲述了php实现多图上传的方法。分享给大家供大家参考,具体如下:
1.已有图片可以删除
2.有一个新增的按钮
3.点击新增按钮,跳出frame框
4.在frame框中实现图片异步上传与及时效果
5.上传成功后,调用回调函数
6.弹出框中的图片可以进行删除
7.frame弹出框点击保存,把图片通过js展示到页面中
8.页面点击保存,把图片数据保存到数据库
<?php foreach($info['product_img'] as $product_img) { ?> <div style="width:100px; text-align:center; margin: 5px; display:inline-block;" class="goods_xc"> <input type="hidden" value="<?php echo $product_img['img'];?>" name="product_img[]"> <a onclick="" href="<?php echo $product_img['img'];?>" target="_blank"><img width="100" height="100" src="<?php echo $product_img['img'];?>"></a> <br> <a href="javascript:void(0)" onclick="clearpicarr2(this,'<?php echo $product_img['img'];?>')">删除</a> </div> <?php } ?> <div class="goods_xc" style="width:100px; text-align:center; margin: 5px; display:inline-block;"> <input type="hidden" name="product_img[]" /> <a href="javascript:void(0);" onclick="getuploadify(10,'','product','call_back2');"><img src="<?php echo img_path?>add-button.jpg" width="100" height="100" /></a> <br/> <a href="javascript:void(0)"> </a> </div>
点评:点击的时候,调用getuploadify方法。
/* * 上传图片 后台专用 * @access public * @null int 一次上传图片张图 * @elementid string 上传成功后返回路径插入指定id元素内 * @path string 指定上传保存文件夹,默认存在public/upload/temp/目录 * @callback string 回调函数(单张图片返回保存路径字符串,多张则为路径数组 ) */ function getuploadify(num,elementid,path,callback) { var pc_hash = $('#pc_hash').val(); var upurl ='?m=admin&c=upload&a=upload&num='+num+'&input='+elementid+'&path='+path+'&func='+callback+'&pc_hash='+pc_hash; var iframe_str='<iframe frameborder="0" '; iframe_str=iframe_str+'id=uploadify '; iframe_str=iframe_str+' src='+upurl; iframe_str=iframe_str+' allowtransparency="true" class="uploadframe" scrolling="no"> '; iframe_str=iframe_str+'</iframe>'; $("body").append(iframe_str); $("iframe.uploadframe").css("height",$(document).height()).css("width","100%").css("position","absolute").css("left","0px").css("top","0px").css("z-index","999999").show(); $(window).resize(function(){ $("iframe.uploadframe").css("height",$(document).height()).show(); }); }
点评:生成一个iframe框。
public function upload(){ $func = $_request['func']; $path = $_request['path'] ? $_request['path'] :'temp'; $info = array( 'num'=> $_request['num'], 'title' => '', 'upload' =>'?m=admin&c=upload&a=imageup&savepath='.$path.'&pictitle=banner&dir=images&pc_hash='.$_session['pc_hash'], 'size' => '4m', 'type' =>'jpg,png,gif,jpeg', 'input' => $_request['input'], 'func' => empty($func) ? 'undefined' : $func, ); include $this->admin_tpl('upload_upload'); }
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>uploadify</title> <link rel="stylesheet" type="text/css" href="<?php echo plugin_statics_path?>uploadify/uploadify.css" /> </head> <body> <div class="w"> <div class="bg"></div> <div class="wrap" id="wrap"> <div class="title"> <h3 class="maintit" id="maintit"><?php echo $info['title'];?></h3> <a href="javascript:close();" title="关闭" class="close"></a> </div> <div class="cont"> <p class="note">最多上传<strong><?php echo $info['num'];?></strong>个附件,单文件最大<strong><?php echo $info['size'];?></strong>,类型<strong><?php echo $info['type'];?></strong></p> <div class="flashwrap"> <input name="uploadify" id="uploadify" type="file" multiple="true" /> <!-- <span><input type="checkbox" name="iswatermark" id="iswatermark" /><label>是否添加水印</label></span>--> </div> <div class="filewarp"> <fieldset> <legend>列表</legend> <ul> </ul> <div id="filequeue"> </div> </fieldset> </div> <div class="btnbox"> <button class="btn" id="savebtn">保存</button> <button class="btn" id="cancelbtn">取消</button> </div> </div> <!--[if ie 6]> <iframe frameborder="0" style="width:100%;height:100px;background-color:transparent;position:absolute;top:0;left:0;z-index:-1;"></iframe> <![endif]--> </div> </div> <script src="<?php echo plugin_statics_path?>uploadify/jquery.min.js" type="text/javascript"></script> <!--防止客户端缓存文件,造成uploadify.js不更新,而引起的“喔唷,崩溃啦”--> <script> document.write("<script type='text/javascript' "+ "src='<?php echo plugin_statics_path?>uploadify/jquery.uploadify.js?" + new date()+ "'></s" + "cript>"); </script> <script src="<?php echo plugin_statics_path?>uploadify/uploadify-move.js" type="text/javascript"></script> <script type="text/javascript"> function close(){ $("iframe.uploadframe", window.parent.document).remove(); } $("#cancelbtn").click(function(){ $("iframe.uploadframe", window.parent.document).remove(); //$('#uploadify').uploadifyclearqueue(); //$(".filewarp ul li").remove(); }); $(function() { $('#uploadify').uploadify({ 'auto' : true, 'method' : 'post', 'multi' : true, 'swf' : '<?php echo plugin_statics_path?>uploadify/uploadify.swf', 'uploader' : '<?php echo $info["upload"];?>', 'progressdata' : 'all', 'queuesizelimit' : '<?php echo $info["num"];?>', 'uploadlimit' : 5, 'filesizelimit' : '20000kb', 'filetypedesc' : 'image files', 'filetypeexts' : '*.jpeg; *.jpg; *.png; *.gif', 'buttonimage' : '<?php echo plugin_statics_path?>uploadify/select.png', 'queueid' : 'filequeue', 'onuploadstart' : function(file){ $('#uploadify').uploadify('settings', 'formdata', {'iswatermark':$("#iswatermark").is(':checked')}); }, 'onuploadsuccess' : function(file, data, response){ $(".filewarp ul").append(setimgcontent(data)); setuploadfile(); } }); }); function setimgcontent(data){ var obj=eval('('+data+')'); if(obj.state == 'success'){ var sli = ""; sli += '<li class="img">'; sli += '<img src="' + obj.url + '" width="100" height="100" onerror="this.src=\'<?php echo plugin_statics_path?>uploadify/nopic.png\'">'; sli += '<input type="hidden" name="fileurl_tmp[]" value="' + obj.url + '">'; sli += '<a href="javascript:void(0);">删除</a>'; sli += '</li>'; return sli; }else{ //window.parent.message(obj.text,8,2); alert(obj.msg); return; } } function setuploadfile(){ $("ul li").each(function(l_i){ $(this).attr("id", "li_" + l_i); }) $("ul li a").each(function(a_i){ $(this).attr("rel", "li_" + a_i); }).click(function(){ $.get( '?m=admin&c=upload&a=delupload&pc_hash=<?php echo $_session["pc_hash"];?>',{action:"del", filename:$(this).prev().val()},function(){} ); $("#" + this.rel).remove(); }) } /*点击保存按钮时 *判断允许上传数,检测是单一文件上传还是组文件上传 *如果是单一文件,上传结束后将地址存入$input元素 *如果是组文件上传,则创建input样式,添加到$input后面 *隐藏父框架,清空列队,移除已上传文件样式*/ $("#savebtn").click(function(){ var callback = "<?php echo $info['func'];?>"; var num = "<?php echo $info['num'];?>"; var fileurl_tmp = []; if(callback != "undefined"){ if(num > 1){ $("input[name^='fileurl_tmp']").each(function(index,dom){ fileurl_tmp[index] = dom.value; }); }else{ fileurl_tmp = $("input[name^='fileurl_tmp']").val(); } eval('window.parent.'+callback+'(fileurl_tmp)'); $(window.parent.document).find("iframe.uploadframe").remove(); return; } if(num > 1){ var fileurl_tmp = ""; $("input[name^='fileurl_tmp']").each(function(){ fileurl_tmp += '<li rel="'+ this.value +'"><input class="input-text" type="text" name="{$info.input}[]" value="'+ this.value +'" /><a href="javascript:void(0);" onclick="clearpicarr(\''+ this.value +'\',\'\')">删除</a></li>'; }); $(window.parent.document).find("#{$info.input}").append(fileurl_tmp); }else{ $(window.parent.document).find("#{$info.input}").val($("input[name^='fileurl_tmp']").val()); } $(window.parent.document).find("iframe.uploadframe").remove(); }); </script> </body> </html>
点评:调用uploadify插件
$(function() { $('#uploadify').uploadify({ 'auto' : true, 'method' : 'post', 'multi' : true, 'swf' : '<?php echo plugin_statics_path?>uploadify/uploadify.swf', 'uploader' : '<?php echo $info["upload"];?>', 'progressdata' : 'all', 'queuesizelimit' : '<?php echo $info["num"];?>', 'uploadlimit' : 5, 'filesizelimit' : '20000kb', 'filetypedesc' : 'image files', 'filetypeexts' : '*.jpeg; *.jpg; *.png; *.gif', 'buttonimage' : '<?php echo plugin_statics_path?>uploadify/select.png', 'queueid' : 'filequeue', 'onuploadstart' : function(file){ $('#uploadify').uploadify('settings', 'formdata', {'iswatermark':$("#iswatermark").is(':checked')}); }, 'onuploadsuccess' : function(file, data, response){ $(".filewarp ul").append(setimgcontent(data)); setuploadfile(); } }); });
点评:表单提交图片文件到服务器,成功后调用回调函数。
/** * @function imageup */ public function imageup() { // 有文件传入,现在要做的就是把它保存起来 // 处理上传并返回数据 // 上传图片框中的描述表单名称, $title = htmlspecialchars($_request['pictitle'], ent_quotes); // $path = htmlspecialchars($_request['dir'], ent_quotes); $savepath = htmlspecialchars($_request['savepath'], ent_quotes); $up = new think_upload(); $path = './uploadfile/'.$savepath; //设置属性(上传的位置, 大小, 类型, 名是是否要随机生成) $up -> set("path", $path); $up -> set("maxsize", 2000000); $up -> set("allowtype", array("gif", "png", "jpg","jpeg")); $up -> set("israndname", true); //使用对象中的upload方法, 就可以上传文件, 方法需要传一个上传表单的名子 pic, 如果成功返回true, 失败返回false if($up -> upload("filedata")) { $name = $up->getfilename(); $return_data['url'] = $path.'/'.$name; $return_data['title'] = $title; $return_data['state'] = 'success'; exit(json_encode($return_data)); } else { $return_data['state'] = 'failure'; $return_data['msg'] = $up->geterrormsg(); exit(json_encode($return_data)); } }
点评:后台处理图片上传表单请求,返回图片路径
<?php /** * file: fileupload.class.php 文件上传类fileupload * 本类的实例对象用于处理上传文件,可以上传一个文件,也可同时处理多个文件上传 */ class think_upload { private $path = "./uploadfile"; //上传文件保存的路径 private $allowtype = array('jpg','gif','png'); //设置限制上传文件的类型 private $maxsize = 1000000; //限制文件上传大小(字节) private $israndname = true; //设置是否随机重命名文件, false不随机 private $originname; //源文件名 private $tmpfilename; //临时文件名 private $filetype; //文件类型(文件后缀) private $filesize; //文件大小 private $newfilename; //新文件名 private $errornum = 0; //错误号 private $errormess=""; //错误报告消息 /** * 用于设置成员属性($path, $allowtype,$maxsize, $israndname) * 可以通过连贯操作一次设置多个属性值 *@param string $key 成员属性名(不区分大小写) *@param mixed $val 为成员属性设置的值 *@return object 返回自己对象$this,可以用于连贯操作 */ function set($key, $val){ $key = strtolower($key); if( array_key_exists( $key, get_class_vars(get_class($this) ) ) ){ $this->setoption($key, $val); } return $this; } /** * 调用该方法上传文件 * @param string $filefile 上传文件的表单名称 * @return bool 如果上传成功返回数true */ function upload($filefield) { $return = true; /* 检查文件路径是滞合法 */ if( !$this->checkfilepath() ) { $this->errormess = $this->geterror(); return false; } /* 将文件上传的信息取出赋给变量 */ $name = $_files[$filefield]['name']; $tmp_name = $_files[$filefield]['tmp_name']; $size = $_files[$filefield]['size']; $error = $_files[$filefield]['error']; /* 如果是多个文件上传则$file["name"]会是一个数组 */ if(is_array($name)){ $errors=array(); /*多个文件上传则循环处理 , 这个循环只有检查上传文件的作用,并没有真正上传 */ for($i = 0; $i < count($name); $i++){ /*设置文件信息 */ if($this->setfiles($name[$i],$tmp_name[$i],$size[$i],$error[$i] )) { if(!$this->checkfilesize() || !$this->checkfiletype()){ $errors[] = $this->geterror(); $return=false; } }else{ $errors[] = $this->geterror(); $return=false; } /* 如果有问题,则重新初使化属性 */ if(!$return) $this->setfiles(); } if($return){ /* 存放所有上传后文件名的变量数组 */ $filenames = array(); /* 如果上传的多个文件都是合法的,则通过销魂循环向服务器上传文件 */ for($i = 0; $i < count($name); $i++){ if($this->setfiles($name[$i], $tmp_name[$i], $size[$i], $error[$i] )) { $this->setnewfilename(); if(!$this->copyfile()){ $errors[] = $this->geterror(); $return = false; } $filenames[] = $this->newfilename; } } $this->newfilename = $filenames; } $this->errormess = $errors; return $return; /*上传单个文件处理方法*/ } else { /* 设置文件信息 */ if($this->setfiles($name,$tmp_name,$size,$error)) { /* 上传之前先检查一下大小和类型 */ if($this->checkfilesize() && $this->checkfiletype()){ /* 为上传文件设置新文件名 */ $this->setnewfilename(); /* 上传文件 返回0为成功, 小于0都为错误 */ if($this->copyfile()){ return true; }else{ $return=false; } }else{ $return=false; } } else { $return=false; } //如果$return为false, 则出错,将错误信息保存在属性errormess中 if(!$return) $this->errormess=$this->geterror(); return $return; } } /** * 获取上传后的文件名称 * @param void 没有参数 * @return string 上传后,新文件的名称, 如果是多文件上传返回数组 */ public function getfilename(){ return $this->newfilename; } /** * 上传失败后,调用该方法则返回,上传出错信息 * @param void 没有参数 * @return string 返回上传文件出错的信息报告,如果是多文件上传返回数组 */ public function geterrormsg(){ return $this->errormess; } /* 设置上传出错信息 */ private function geterror() { $str = "上传文件<font color='red'>{$this->originname}</font>时出错 : "; switch ($this->errornum) { case 4: $str .= "没有文件被上传"; break; case 3: $str .= "文件只有部分被上传"; break; case 2: $str .= "上传文件的大小超过了html表单中max_file_size选项指定的值"; break; case 1: $str .= "上传的文件超过了php.ini中upload_max_filesize选项限制的值"; break; case -1: $str .= "未允许类型"; break; case -2: $str .= "文件过大,上传的文件不能超过{$this->maxsize}个字节"; break; case -3: $str .= "上传失败"; break; case -4: $str .= "建立存放上传文件目录失败,请重新指定上传目录"; break; case -5: $str .= "必须指定上传文件的路径"; break; default: $str .= "未知错误"; } return $str.'<br>'; } /* 设置和$_files有关的内容 */ private function setfiles($name="", $tmp_name="", $size=0, $error=0) { $this->setoption('errornum', $error); if($error) return false; $this->setoption('originname', $name); $this->setoption('tmpfilename',$tmp_name); $arystr = explode(".", $name); $this->setoption('filetype', strtolower($arystr[count($arystr)-1])); $this->setoption('filesize', $size); return true; } /* 为单个成员属性设置值 */ private function setoption($key, $val) { $this->$key = $val; } /* 设置上传后的文件名称 */ private function setnewfilename() { if ($this->israndname) { $this->setoption('newfilename', $this->prorandname()); } else{ $this->setoption('newfilename', $this->originname); } } /* 检查上传的文件是否是合法的类型 */ private function checkfiletype() { if (in_array(strtolower($this->filetype), $this->allowtype)) { return true; }else { $this->setoption('errornum', -1); return false; } } /* 检查上传的文件是否是允许的大小 */ private function checkfilesize() { if ($this->filesize > $this->maxsize) { $this->setoption('errornum', -2); return false; }else{ return true; } } /* 检查是否有存放上传文件的目录 */ private function checkfilepath() { if(empty($this->path)){ $this->setoption('errornum', -5); return false; } if (!file_exists($this->path) || !is_writable($this->path)) { if (!@mkdir($this->path, 0755)) { $this->setoption('errornum', -4); return false; } } return true; } /* 设置随机文件名 */ private function prorandname() { $filename = date('ymdhis')."_".rand(100,999); return $filename.'.'.$this->filetype; } /* 复制上传文件到指定的位置 */ private function copyfile() { if(!$this->errornum) { $path = rtrim($this->path, '/').'/'; $path .= $this->newfilename; if (@move_uploaded_file($this->tmpfilename, $path)) { return true; }else{ $this->setoption('errornum', -3); return false; } } else { return false; } } }
点评:php文件上传类。
然后处理好,图片数据删除对应的文件上传,减轻服务器空间压力。
public function delete() { $id = intval($_get['id']); $this->db->delete(array('id'=>$id)); // 遍历删除原图片 $product_img = $this->product_img_db->select(array('product_id'=>$id)); foreach ($product_img as $k => $v) { unlink($v['img']); } // 删除表数据 $this->product_img_db->delete(array('product_id'=>$id)); exit("1"); }
更多关于php相关内容感兴趣的读者可查看本站专题:《php图形与图片操作技巧汇总》、《php文件操作总结》、《php数组(array)操作技巧大全》、《php基本语法入门教程》、《php运算与运算符用法总结》、《php面向对象程序设计入门教程》、《php网络编程技巧总结》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》
希望本文所述对大家php程序设计有所帮助。