JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!--//BootStrap手刻檔案上傳20171206-->
<div class="container choosefile">
	<div class="col-sm-10 col-xs-8"> 
		<!--假的FileUpload Start-->
		<div class="input-group filepicker"> 
		<div class="input-group-btn">
			<div class="btn btn-info">選擇檔案</div>
		</div>
		<input type="text" class="uploadlist form-control" placeholder="上傳附檔"/>
		</div>
		<!--假的FileUpload End-->
		
		<!--真的.Net FileUpload Start-->
		<input type="file" multiple="multiple" id="ContentPlaceHolder1_BeforePage_UC_ctl00_AttachmentFiles_UC_FileUpload1">
		<!--真的FileUpload End-->
	</div>
	<div class="col-sm-2 col-xs-4">
		<!--.Net Button-->
		<input type="submit"  value="上傳附檔" class="btn btn-info">
	</div> 
</div>

CSS

.choosefile {
	margin-top: 15px;
	margin-bottom: 15px;
}

.filepicker {
	cursor :pointer;
	font-family: 微軟正黑體;
}

/*把愛藏起來*/
input[id$='_FileUpload1'] {
	display:none;	
}

JavaScript

$(function () {
	//如果真的FileUploader選檔有改變，就改寫顯示的內容
  var $ul = $("[id$='FileUpload1']").on("change", function () {
    var $this = $(this);
    var fileliststr = "";
    $.each($this[0].files, function (idx) {
      if (idx == 0) {
        fileliststr = this.name;
      } else {
        fileliststr = fileliststr + ", " + this.name;
      }
    });
    $fp.val(fileliststr);
  });
  
  //如果顯示的內容被點，就觸發選檔動作
   var $fp = $(".filepicker input[type='text']").on("click keypress", function () {
            $ul.trigger("click");
        });
  //如果顯示的選檔按鈕被點，就觸發選檔動作
  var $fpbtn = $(".filepicker .btn").on("click keypress", function () {
    $ul.trigger("click");
  });
});