關於 HTML 標簽的 for 屬性的用法，和修改上傳控件的樣式

W3C中的定義和用法

　　for 屬性規定 label 與哪個表單元素綁定。

<!--label標簽for 屬性規定 label 與哪個表單元素綁定。-->

        <label for="male">Male</label>
        <input type="radio" name="sex" id="male" />
        <br />
        <label for="female">Female</label>
        <input type="radio" name="sex" id="female" />

label的for屬性綁定效果

　　這種情況下，點擊   “關聯按鈕”   就會觸發input的點擊事件getA（）,從而彈出  ‘ok’  。

　　　　 <input id="btnA" onclick="getA()" hidden="hidden" />
        <label for="btnA">
            <span>關聯按鈕</span>
        </label>
        <script>
            function getA() {
                alert('ok');
            }
        </script>

 

我第一次是用在了修改上傳控件的樣式上，感覺效果很好

　　用Label的for屬性綁定表單控件input，然后隱藏掉上傳控件，用label中的一張圖片代替上傳控件，這時候，點擊圖片，就相當於點擊了上傳控件

<!--圖片上傳並即時顯示-->
        <input type="file" class="imgInput" id="imgUp" multiple="multiple" style="width: 0px;" />
        <!--用for屬性綁定file控件-->
        <label for="imgUp">
            <img src="/file/sys.png" alt="" width="100" />
        </label>
        <div id="xs"></div>
        <div id="imgInfo"></div>
        <script>
            $(".imgInput").change(function () {
                //清空上一次選中的圖片信息
                $("#xs").empty();
                $("#imgInfo").empty();
                //獲取文件上傳域內輸入的多個文件
                var fileList = this.files;
                //遍歷每個文件
                for (var i = 0; i < fileList.length; i++) {
                    //展示上傳圖片
                    var ImgControls = new Image();
                    ImgControls.className = "img" + i;
                    ImgControls.width = 100;
                    document.getElementById("xs").appendChild(ImgControls);
                    $(".img" + i + "").attr("src", URL.createObjectURL($(this)[0].files[i]));
                    //展示上傳文件的信息
                    var file = fileList[i];
                    div = document.getElementById("imgInfo");
                    div.innerHTML += "第" + (i + 1) + "個文件&nbsp;文件名：" + file.name + "&nbsp;文件類型:" + file.type + "&nbsp;文件大小:" + file.size + "<br/>";
                }
            });
        </script>