Bootstrap 3 HTML5 檔案上傳外掛：AJAX 回應處理與進度條實現

外掛來源

htmleaf Bootstrap 3 預覽上傳外掛

AJAX 回應處理流程

1. 前端 FormData 發送，監聽 xhr.upload.onprogress 更新進度條。
2. 後端接收儲存，回傳 JSON：{success: true, url: '/uploads/xxx.jpg'}。
3. 前端 success 回呼中：
   - 隱藏進度條。
   - 顯示縮圖 <img src="url">。
   - 將 url 寫入隱藏域供表單提交。

前端核心代碼

$('#fileupload').fileupload({
    dataType: 'json',
    progressall: function(e, data) {
        var p = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css('width', p + '%');
    },
    done: function(e, data) {
        if (data.result.success) {
            $('#preview').attr('src', data.result.url).show();
            $('#fileUrl').val(data.result.url);
        } else {
            alert('上傳失敗：' + data.result.msg);
        }
    }
});

後端範例

@PostMapping("/upload")
@ResponseBody
public Map upload(@RequestParam("file") MultipartFile file) {
    String path = saveFile(file); // 自行實現儲存
    return Collections.singletonMap("success", true)
        .put("url", path);
}

完整外掛推薦

blueimp/jQuery-File-Upload：功能完整、支援分塊、拖拽、圖片預覽、進度條、跨域。