是该功能的最后一步，新增插件：layer.js弹出层组件jquery.form异步表单提交插件-inAddCSS:图层扩展文件修改图层弹窗的皮肤，默认的不喜欢！基本代码与上一节类似，修改了upload.js中的一些东西。先来看看演示吧！简单数据表：--图片表DROPTABLEIFEXISTSimages;CREATETABLEIFNOTEXISTSimages(idINT(11)UNSIGNEDPRIMARYKEYAUTO_INCREMENTCOMMENT'id',img_urlVARCHAR(255)NOTNULLDEFAULT''COMMENT'图片名称',create_timeINTNOTNULLCOMDEFAULT'创建时间',update_timeINTNOTNULLDEFAULT0COMMENT'更新时间')ENGINEinnodbCHARSETutf8COMMENT'图片表';--usertableDROPTABLEifEXISTSuser;CREATETABLEIFNOTEXISTSuser(idINT(11)UNSIGNEDPRIMARYKEYAUTO_INCREMENTCOMMENT'id',img_idint(11)UNSIGNEDNOTNULLDEFAULT0COMMENT'图片ID',create_timeINTNOTNULLDEFAULT0COMMENT'创建时间',update_timeINTNOTNULLDEFAULT0COMMENT'更新时间')ENGINEinnodbCHARSETutf8COMMENT'用户表';之后在aliyunOss配置文件中添加一个配置，就是访问域名；//AliyunOSS配置return['KeyId'=>'***',//YourAccessKeyID'KeySecret'=>'***',//YourAccessKeySecret'Endpoint'=>'****',//阿里云oss外网地址endpoint'Bucket'=>'****',//Bucket名称'OssDomain'=>'http://thinkpjax.cn/',//这个配置是新加的];创建基础模型类(application/index/model/base.php)hasOne('Images','id','img_id');}}创建用户模型(application/index/model/User.php)继承基础模型类创建图片模型(application/index/model/Images.php)');}$face.find($("input[name='imgId']")).val(response.data.imgId);完整代码：/***用户：李昊天*日期：2018/5/18*时间：1:15*Email：haotian0607@gmail.com*/$(function(){var$face=$("#face"),thumbnailWidth=100,thumbnailHeight=100;//创建上传器实例WebUploader.create({server:uploaderUrl,//服务器异步接受地址！pick:{id:"#changeFile",//指定按钮容器用于选择文件multiple:false,//禁止多选},resize:false,//不压缩图片auto:true,//选择后自动上传swf:'../flash/Uploader.swf',//防止低版本浏览器使用flash//只允许选择图片文件accept:{title:'Images',extensions:'gif,jpg,jpeg,bmp,png',mimeTypes:'image/*'}}).on('fileQueued',function(file){//当有afile添加时var$img=$face.find('img');//获取头像的DOM//创建缩略图this.makeThumb(file,function(error,src){if(error){$img.replaceWith('无法预览');return;}$img.attr('src',src);},thumbnailWidth,thumbnailHeight);}).on('uploadProgress',function(file,percentage){//文件上传时实时显示创建进度条。$percent=$face.find(".progress.progress-bar");$ImgId=$face.find($("输入[name='imgId']"));如果(!$ImgId.length){$ImgId=$face.append('
