JSFiddle - React, Tailwind, and code Playground

by Ashley li

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input type="text" ID="txtPhoto" readonly="readonly" class="input" style="width:400px" />
<br/>  
               <div class="file-Upload  button-pick" style="width:160px;margin-left:240px;">
                   <span>選擇照片</span>
                   <input type="file" ID="file" runat="server" class="upload input" />
               </div>
               <img id="img0" style="z-index:1;width:450px;height:450px;" >

CSS

.button-pick {
	font-family: \5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4, Microsoft Jhenghei;
	margin-top:5px;
	cursor: pointer;
	/*width: 160px;*/
	height:40px;
	font-weight: bold;
	background-color: #E88EB0;
	vertical-align: center;
	color: #ffffff;
	font-size: 18px;
	font-size: 1rem;
	line-height: 40px;
	text-align: center;
	border: none;
    border-radius: 0;
    outline: none;
}

.button-pick:hover, .button-Send:hover, .button-Uploed:hover
{
	background-color: #A02050;
}		

     .file-Upload {
    position: relative;
    overflow: hidden;
}
.file-Upload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

JavaScript

document.getElementById("file").onchange = function () {
         document.getElementById("txtPhoto").value = this.value;
        };
        
        $("#file").change(function () {
            reader.readAsDataURL(this.files[0]);
            var objUrl = getObjectURL(this.files[0]);
            //console.log("objUrl = " + objUrl);
            if (objUrl) {
                $("#img0").attr("src", objUrl);
              
            }
        });
        
        /**
     * 建立一個可存取到該file的url
     * PS: 瀏覽器必須支援HTML5 File API
     */
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
        //console.log(url)
    }