點擊按鈕觸發上傳文件的功能

10-15

點擊按鈕觸發上傳文件的功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{ padding: 0; margin: 0; } html{ width: 100%; height: 100%; } body{ width: 100%; height: 100%; /*background:url("../img/dhlkbg.png");*/ background-size: cover; position: relative; } .uploadCenter{ width: 464px; height: 36px; margin-top: 68px; margin-bottom: 58px; } .upBox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .pTitle{ font-size: 20px; font-weight: bold; text-align: center; } .checkFile{ width: 360px; height: 100%; background: #fff; border-radius: 5px; /*font-size: 16px;*/ color: #afafaf; line-height: 36px; text-indent: 10px; float: left; } .checkBtn{ float: left; width: 98px; background-color: #134298; color: #fff; text-align: center; line-height: 36px; height: 36px; margin-left: 4px; border-radius: 5px; } .buttUpload{ clear: both; width: 98px; background-color: #134298; color: #fff; text-align: center; line-height: 36px; height:100%; border-radius: 5px; margin: 0 auto; } .tip{ margin-top: 60px; text-align: center; color: #505050; }</style><body> <div class="upBox"> <p class="pTitle">xxxx平台部雲端項目上傳</p> <div class="uploadCenter"> <div class="checkFile">選擇你要上傳的文件(小於1G)</div> <div class="checkBtn">選擇文件</div> </div> <div class="buttUpload">上傳</div> <p class="tip">The file size you upload must be within 1G</p> <input type="file" value="" stylex="display: none" id="file1"> </div></body></html><script src="jquery.js" type="text/javascript"></script><script type="text/javascript"> $(function() { // 點擊updateFile文本框觸發上傳按鈕 $(".checkBtn").click(function() { $("#file1").trigger("click"); }); $("#file1").change(function(){ // 獲取FileUpload對象 var x = document.getElementById("file1").files; // 把獲得的文件名放入text裡面顯示 $(".checkFile").html(x[0].name); }); $(".buttUpload").click(function () { console.log(上傳); }) });</script>