CSS自定義文件上傳

1. 樣式化文件上傳input元素

input[type="file"] {
visibility: hidden;
position: absolute;
}
.upload-btn {
display: inline-block;
padding: 10px;
background-color: #007bff;
color: #fff;
border-radius: 5px;
font-size: 16px;
}
.upload-btn:hover {
cursor: pointer;
background-color: #0062cc;
}

2. 點擊自定義按鈕觸發文件上傳功能

$('.upload-btn').on('click', function() {
$('input[type="file"]').trigger('click');
});

3. 顯示選擇的文件名

$('input[type="file"]').on('change', function() {
var fileName = $(this).val().split('\\').pop();
$('.upload-btn').html(fileName);
});

4. 提交表單、上傳文件到服務器

$('#upload-form').on('submit', function(event) {
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function(response) {
// 處理服務器返回的響應
},
error: function(xhr, status, error) {
console.error(error);
}
});
});