Client/Views/Admin/person.tpl

1.html页面代码,上传文件控件和头像叠放重合,并且把上传控件设为透明,叠放顺序优先级高于<img>

<span style="white-space:pre">                           </span><div class="form-group"><label for="name" class="col-lg-5 col-sm-2 control-label"><img  class="img-thumbnail"  style="cursor:pointer;width:100px;margin-left:300px;margin-right:300px;"  alt="头像" on="btnHead" src='apis/admin/person/p?params={"url":"${Data.uimage}"}'><span class="fileinput-button"><input id="fileupload"  type="file" name="files" style="position:absolute;opacity:0;z-index:20;top:7px;height:100px;width:100px;cursor:pointer;margin-left:300px;margin-right:300px;" multiple></span><small style="float:both;">如要更换头像,请点击头像</small></label></div>

注:这里的表单随着窗口大小显示异常问题没有处理.

2.在客户端的js,如果上传控件发生变化而触发实现,(并不是点击触发事件)

awf.task({code: "Data",method: function(e) {//e.success();_.post("api/admin/person/read", {},function(r) { //难点if (r.length > 0) {e.success(r[0]);} else {/*e.result({"failure":true});*/}}, "json");}}).task({code: "tpl",method: function(e) {app.tpl("Admin->person", function(tpl) {e.success(tpl);});}}).async({success: function(result) {result.cid = 'main' + app.genID();var info = result.tpl(result, {});app.gui.page(info);app.gui.on(_('#' + result.cid), events);//input改变值而触发事件,change方法events.parent.find('input[name="file"]').on("change",events.change)events.parent.find('input[name="files"]').on("change",events.btnUpload)//events.parent.find('input[name="files"]').on("btnUpload",events.btnUpload)},
/*      failure:function(result){result.result({"failure":false});
}*/
});

3.调用上传方法

btnUpload:function(sender,arg){var form = _(sender.target).parents('form');//var form = events.parent;if(sending){//再点击"发送"按钮,提示文件发送中,在这之前要定义号var sending= false;form.find('.alert-warning').html('文件发送中...').show();return;}sending = true;var parms = JSON.stringify({t:Date.now()});form.upload("api/admin/person/upload",{params:parms,key : auth.key,sign : md5.Sign(parms+auth.sign)},{failure:function(){sending = false;},success:function(str){sending = false;var r = JSON.parse(str);form.find('.alert').html("").hide();if(r.status){form.find('.alert-warning').html(r.status.description).show();}else{//form[0]&&form[0].reset();if (form[0]) {form[0].reset();}form.find('[name="filename"]').html("无");events.btnPer();}},progress:function(){},cancel:function(){sending = false;}});},

4.服务端的js

upload: {attribute: {"user":true},method: function(e) {var _ = this.apis;var ucode = e.action.user.ucode;var sql = "update userbase set uimage=:fileid where ucode=:ucode";//console.log("files="+files+", "+"path="+path+", "+"id="+id+","+"name=" + name + "," + "type=" + type);//console.log(e.params.files);if(e.params.files && e.params.files.path){app.store.save({id:e.params.files.hash,path:e.params.files.path,name:e.params.files.name,type:e.params.files.type}).success(function(fileid){_.sql.save(sql,{fileid:fileid,ucode:ucode}).success(function(result){e.result({url:fileid});}).failure(function(){e.result({"failure":false});});}).failure(function(e){console.log(e.params.files.hash,e);e.result({"failure":false});}).end();}else{e.result({"failure":false});}}  },

5.效果: