thinkphp ajaxfileupload实现异步上传图片的示例
2018-09-07 11:57
thinkphp开发图片上传，图片异步上传是目前比较方便的功能,这里我就不写css文件了，将代码写出来。引入核心文件下载
HTML
下面首先在html页面引入相关js资源
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>图片上传</title> <script type=text/javascript src=js/jquery-1.8.2.min.js></script> <script type=text/javascript src=js/ajaxfileupload.js></script> </head> <body> </body> </html>
接下来在body中创建相关div
<label class=title w100>封面图片:</label> <div class=f_l> <label class=fileupload onclick=upd_file(this,image_file);> <input type=file class=filebox name=image_file id=image_file/> <!--上传成功后图片会给value赋值图片路径，以便于form表单提交数据--> <input type=hidden name=image value=> </label> <label class=fileuploading hide ></label> </div> <div class=blank15></div> <!--上传成功后图片会在这里显示否则是默认图片--> <img id=image src=/Public/images/empty_thumb.gif />
解释一下：
其中upd_file(this,image_file)不可缺少
其中隐藏的input 是用于上传成功后赋值图片路径，以便于form表单提交数据
接下来在html中编辑javascript脚本以便于传递和提交图片功能
<script> function upd_file(obj,file_id){ $(input[name=+file_id+]).bind(change,function(){ $(obj).hide(); $(obj).parent().find(.fileuploading).removeClass(hide); $(obj).parent().find(.fileuploading).removeClass(show); $(obj).parent().find(.fileuploading).addClass(show); $.ajaxFileUpload ( { url:/index.php/home/avatar/app_upload_image,//上传图片处理文件 secureuri:false, fileElementId:file_id, dataType: json, success: function (data, status) { $(obj).show(); $(obj).parent().find(.fileuploading).removeClass(hide); $(obj).parent().find(.fileuploading).removeClass(show); $(obj).parent().find(.fileuploading).addClass(hide); if(data.status==1) { $(#image).attr(src,data.thumb_url+?r=+Math.random()); $(input[name=image]).val(data.url);//返回json后将隐藏input赋值 //$(#img_url).html(<input type=hidden name=img_url value=+ path.path + />); } else { $.showErr(data.msg); } }, error: function (data, status, e) { $.showErr(data.responseText);; $(obj).show(); $(obj).parent().find(.fileuploading).removeClass(hide); $(obj).parent().find(.fileuploading).removeClass(show); $(obj).parent().find(.fileuploading).addClass(hide); } } ); $(input[name=+file_id+]).unbind(change); }); } <script>
thikphp 中创建方法 app_upload_image()
function app_upload_image($maxSize=52428800){ $id=session(id); $config=array( rootPath =>Upload, //文件上传保存的根路径 savePath =>/avatar/, exts => array(jpg, gif, png, jpeg,bmp), maxSize => $maxSize, autoSub => true, ); $upload = new \Think\Upload($config);// 实例化上传类 $z = $upload->uploadOne($_FILES[image_file]); if($z) { //拼接图片的路径名 $img=/Upload.$z[savepath].$z[savename]; $_POST[image_file]=$img; //获取上传图片绝对路径 $imgsrc=$_SERVER[DOCUMENT_ROOT].__ROOT__.$_POST[image_file]; $image = new \Think\Image(); $image->open($imgsrc); //将图片裁剪为400x400并保存为corp.jpg $image->thumb(205, 160,\Think\Image::IMAGE_THUMB_CENTER)->save($imgsrc); $this->ajaxReturn(array(thumb_url=>$img,url=>$img,status=>1)); } }
OK这样就好了，首先和大家说一下，如果ajaxfileupload.js报错程序是不会跑通的，如果你的程序报错就检查你的ajaxfileupload文件是不是版本的问题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
上一篇：PHP中文汉字验证码
文章标题：thinkphp ajaxfileupload实现异步上传图片的示例
文章链接：http://soscw.com/index.php/essay/11397.html