小黑小波比.点击头像直接上传的实现

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.效果: