close
為了可以看到檔案上傳的狀況，避免使用者點擊送出後，畫面一直沒有回饋效果給使用者，而產生不好的使用體驗。
在此筆記如何實作這樣的簡單效果
下圖使用ScreenToGif製作，並上傳至GIPHY，痞課幫似乎不支援動圖
為了呈現上述效果使用到axios，js部分
function sendForm () {
/* 檢查form之中是否有上傳圖片 */
var hasFile = false;
/* 取得上傳的progress bar */
var progress = document.getElementById('progress');
progress.value = 0;
/* 顯示目前上傳的%數 */
var percent = document.getElementById('percent');
percent.innerHTML = 0 + '%';
/* 上傳成功或失敗在title顯示訊息notice */
var notice = document.getElementById('notice');
/* 取得要上傳的資料 */
let content = document.getElementById('content');
let title = document.getElementById('title');
/* 使用FormData進行上傳 */
var data = new FormData();
/* 在FormData之中放置傳送的資料 */
data.append('content', content.value);
data.append('title', title.value);
/* 假設有上傳的檔案，將該檔案放進FormData */
if(document.getElementById('file').files.length > 0){
data.append('image', document.getElementById('file').files[0]);
hasFile = true;
}
/* !!!!關鍵的地方，Axios有onUploadProgress的參數，該參數會回傳已經發送出去的資料量 */
var config = {
onUploadProgress: function(progressEvent) {
/* 將百分比資料轉換為數字 */
var percentCompleted = Math.round( (progressEvent.loaded * 95) / progressEvent.total );
/* 將目前發送的資料顯示在html progress元素之上 */
progress.value = hasFile ? percentCompleted : 0;
/* 將上傳的內容以上傳進度: 0~100% 呈現 */
percent.innerHTML = hasFile ? percentCompleted + '%' : 0 + '%';
},
/* 表示上傳的資料型態為form-data，因為可能要上傳檔案所以必須使用此型態 */
Headers: {
'content-type': 'multipart/form-data'
}
};
/* 發送post方法到url */
axios.post('/blogPost/Post', data, config)
.then(function (res) {
/* 發送成功後需要執行的邏輯區塊 */
notice.style.display = "block";
notice.classList.remove('alert-danger');
notice.classList.add('alert-success');
notice.innerHTML = res.data;
progress.value = hasFile ? 100 : 0;
percent.innerHTML = hasFile ? 100 + '%' : 0 + '%';
console.log(res);
})
.catch(function (err) {
/* 執行失敗的處理邏輯 */
notice.classList.remove('alert-success');
notice.classList.add('alert-danger');
notice.style.display = "block";
notice.innerHTML = err.message;
/* output.className = 'container text-danger';
output.innerHTML = err.message; */
})
.then(function (){
/* 執行結束callback，不管失敗或成功都會執行到的區塊，這裡將notice訊息設定顯示五秒後消失*/
$("#notice").delay(5000).fadeOut();
});
}
HTML區塊
<div id="notice" style="display:none;" class="alert"></div>
<div class="form-group">
{{-- <form action="{{url('/blogPost/Post')}}" enctype="multipart/form-data" method="post">
@csrf --}}
<label for="" style="font-size:1.5rem;">
Title
</label>
<input class="form-control" name="title" id="title">
<label for="" style="font-size:1.5rem;">
Content
</label>
<textarea class="form-control rounded-0" name="content" id="content" cols="30" rows="15"></textarea>
<input id="file" type="file" name="image">
<div></div>
<div class="mt-2" style="display:inline-block;" >上傳進度:</div> <span id="percent">0%</span>
<progress style="display:block;" id="progress" max="100" value="0"></progress>
/* 點擊button 觸發上述的js */
<button id="upload" onclick="sendForm()" class="btn btn-primary float-right mr-4">送出</button>
全站熱搜
留言列表
