Client/Views/person.tpl
1.在html页,也是把上传控件变为透明,叠放顺序优先级高于<button>
<div class="form-group">
<label class="col-lg-3 col-sm-2 control-label" >认证扫描件:</label>
<div class="col-lg-6">
<span class="fileinput-button">
<input id="fileupload" type="file" name="file" style="position:absolute;opacity:0;z-index:20" multiple>
<button type="button" name="opt" style="width:auto;height:auto;padding:0;position:absolute;top:0;z-index:19;"class="btn btn-default" multiple="multiple">选择文件</button>
</span>
</div>
</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.在客户端js,触发事件调用方法,这个方法可以把按钮的文字内容变为文件名内容.
change:function(sender){
var a = $(sender.target).val();
if(!a){
alert("1:"+a);
a = "选择文件";
_('[name="opt"]').html(a);
}else{
alert("2:"+a);
//截取文件名
a = a.substring(a.lastIndexOf('\\')+1);
_('[name="opt"]').html(a);
}
},
注意:这里方法又截取文件名方法,例如c:/a/b/test.txt 变成 test.txt
效果: