在做檔案上傳時,想把很醜的 <input type="file">
換成漂亮的按鈕。
做法:
先將 input file 隱藏,
接著新增一個 button,利用 button 的 onclick 事件來開啟檔案選取視窗。
程式碼:
Javascript 寫法
<form id="form1" runat="server">
<div>
<input id="file" type="file" onchange="upload(this)" style="display: none" />
<button type="button" onclick="file.click()">檔案上傳</button>
</div>
</form>
<script>
function upload(e) {
var file = e.files[0];
if (!file) {
return;
}
//檔案上傳
//...
//檔案上傳
//上傳後將檔案清除
e.value = '';
}
</script>
AngularJS 寫法
<form id="form1" runat="server">
<div>
<input id="file" type="file" onchange="angular.element(this).scope().upload(this)" style="display: none" />
<button type="button" onclick="file.click()">檔案上傳</button>
</div>
</form>
<script>
//Controller 內
$scope.upload = function(e) {
var file = e.files[0];
if (!file) {
return;
}
//檔案上傳
//...
//檔案上傳
//上傳後將檔案清除
e.value = '';
}
</script>
Angular 寫法
<form id="form1" runat="server">
<div>
<input id="file" type="file" (change)="upload($event)" style="display: none" />
<button type="button" onclick="file.click()">檔案上傳</button>
</div>
</form>
<script>
//Component 內
upload($event) {
const file = $event.target.files[0];
if (!file) {
return;
}
//檔案上傳
//...
//檔案上傳
//上傳後將檔案清除
$event.target.value = '';
}
</script>
<form id="form1" runat="server">
<label class="btn btn-outline-dark" for="file1">檔案上傳</label>
<input class="hidden" id="file1" type="file"/>
</form>
<script>
document.getElementById("file1")
.addEventListener("change", function($event) {
const file = $event.target.files[0];
if (!file) { return; }
//檔案上傳
//...
//檔案上傳
//上傳後將檔案清除
$event.target.value = '';
});
</script>
可以用 label 觸發阿,感謝您提供的資訊,又學到一種新的寫法。