功能: | Thinkphp单图片上传及预览 |
开发环境: | jquery+thinkPHP3.2.3 |
开发人: | 刘武星 |
控制器 |
public function Form(){ if(!session('login')){ $this ->display("login"); return; } //检查登录状态,如过不需要请删除 if(IS_GET){ $this ->display(); } if(IS_POST){ //保存图片 $value = $this->addimg(); //调用函数 //if($value != "0"){ unlink($_SERVER['DOCUMENT_ROOT'].I('del_img')); } //删除上一张图片 $this->assign('value',$value); //返回 $this->display(); } } public function addimg(){ $url ='/ueditor/php/upload/image/'; //图片添加的路径 $upload = new \Think\Upload(); // 实例化上传类 $upload->maxSize = 3145728 ; // 设置附件上传大小 $upload->exts = array('jpg', 'gif', 'png', 'jpeg'); // 设置附件上传类型 $upload->rootPath = '.'.$url; // 设置附件上传根目录 $info = $upload->uploadOne($_FILES['file']); // 上传单个文件 if(!$info) { return "错误信息"; } // 上传错误提示错误信息 else{ return $url.$info['savepath'].$info['savename']; } // 上传成功 获取上传文件信息 } |
需要在当前的页面引入内框架<iframe src="__URL__/form.html" id="iframe" style="display: none;"></iframe> |
<html> <head> <meta charset="UTF-8"> </head> <body> <form id="form" action="__URL__/Form" enctype="multipart/form-data" method="post"> <input id="file" type="file" name="file"> <input class="url_img" name="del_img" type="text" value="{$value}"> <button></button> </form> </body> </html> |
jquery封装 |
(function () { $.fn.addimg = function (e) { //描述: 单图片上传 [配合form文件及控制器方法]; this.click(function () { $_img = this; //当前节点 $('#iframe').contents().find('#file').click(); //触发绑定 $('#iframe').contents().find('#file').on("charset",function () {}); // $('#iframe').contents().find("input[type='file']").change(function () { //触发文件 $('#iframe').contents().find("form").submit(); //提交 setTimeout(function () { //延时触发 var value = $('#iframe').contents().find("input[type='text']").val(); //读取iframe内url新路径 $($_img).attr("src",value); $($_img).attr("typeof",value); //显示 if(typeof(e)!= 'undefined'){ e(value); } //返回值 },500); }); }); } })(jQuery); |
封装的jquery使用 |
第一种使用 $(function () { $(".img_alt img").addimg(); }) 第二种使用 [可以把显示中的显示那行代码去掉,在下面返回的地方自己写入指定位置] $(function () { $(".img_alt img").addimg(function (data) { alert(data); //返回的是url地址 }); }) |
注:我是以img本身来点击及预览,如果是按钮点击请使用
第二种jquery的使用方法.