小黑小波比.选择文件按钮上传完文件后按钮内容为文件名

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

效果: