html筆記

常用軟體,程式語言的筆記和疑問
Forum rules
盡量做到:
每一個貼子都精心編輯;
每一個疑問都得到解答。
ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

上傳圖片預覽

Post by ejsoon » 2017 Oct 26, 15:20

from here
HTML:

Code: Select all

<form id="form1" runat="server">
   <input type='file' id="imgInp" />
   <img id="blah" src="#" alt="your image" />
</form>
jQuery

Code: Select all

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

範圍滑塊

Post by ejsoon » 2017 Oct 28, 11:25

範圍滑塊

Code: Select all

					<input id="temperature1" class="temperature" type="range" value="25" max="50" min="20" onchange="tmi_tmprt(this.value)" oninput="tmi_tmprt(this.value)">
					<script>
						function tmi_tmprt(thsval) {
							$("#temperature_value").text(thsval);
						}
					</script>

ejsoon
Site Admin
Posts: 3767
Joined: 2016 Jan 10, 22:15

搜索匹配datalist

Post by ejsoon » 2017 Nov 10, 15:51

這裡介紹html5的新功能 ,搜索匹配,datalist,但是safari不支持。

Post Reply