1.已有图片可以删除
2.有一个新增的按钮
3.点击新增按钮，跳出frame框
4.在frame框中实现图片异步上传与及时效果
5.上传成功后，调用回调函数
6.弹出框中的图片可以进行删除
7.frame弹出框点击保存，把图片通过js展示到页面中
8.页面点击保存，把图片数据保存到数据库
<?php foreach($info['product_img'] as $product_img) { ?> <div> <input type="hidden" value="<?php echo $product_img['img'];?>"> <a href="<?php echo $product_img['img'];?>" target="_blank"><img src="<?php echo $product_img['img'];?>"></a> <br> <a href="javascript:void(0)">删除</a> </div> <?php } ?> <div> <input type="hidden" /> <a href="javascript:void(0);"><img src="<?php echo IMG_PATH?>add-button.jpg" /></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" 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 type="text/css" href="<?php echo PLUGIN_STATICS_PATH?>uploadify/uploadify.css" /> </head> <body> <div> <div></div> <div> <div> <h3><?php echo $info['title'];?></h3> <a href="javascript:Close();" title="关闭"></a> </div> <div> <p>最多上传<strong><?php echo $info['num'];?></strong>个附件,单文件最大<strong><?php echo $info['size'];?></strong>,类型<strong><?php echo $info['type'];?></strong></p> <div> <input type="file" multiple="true" /> <!-- <span><input type="checkbox" /><label>是否添加水印</label></span>--> </div> <div> <fieldset> <legend>列表</legend> <ul> </ul> <div> </div> </fieldset> </div> <div> <button>保存</button> <button>取消</button> </div> </div> <!--[if IE 6]> <iframe frameborder="0"></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>'; sLi += '<img src="' + obj.url + '" onerror="this.src=\'<?php echo PLUGIN_STATICS_PATH?>uploadify/nopic.png\'">'; sLi += '<input type="hidden" 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><input type="text" value="'+ this.value +'" /><a href="javascript:void(0);">删除</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插件