Jansy Bootstrap圖像上傳用戶頭像 - 編輯用戶時

Question

我使用Jansy的Bootstrap通過我的管理控制面板上傳用戶頭像，如下例所示：http://www.jasny.net/bootstrap/javascript/#fileinput-examples。

當添加新用戶時，這一切都很好，但是編輯用戶時又如何，我需要用戶的頭像默認顯示在插件中，所以基本上我需要圖片上傳插件的狀態，選擇一張圖片。

這可能嗎？

Answer 1

是的，這是可能的，你用JavaScript（jQuery）實現這一點！

所以，當你在你的edit user page你需要有用戶數據（id，name，...，頭像）。你需要avatar.extension來填充輸入文件。 （ex。picture1.jpg）這不是問題，因爲這些數據存儲在數據庫中。

考慮到你在JavaScript的avatar變量保持你的形象的名字，和你的輸入類型的文件名是avatar，所有你需要做的是添加這段代碼在你的文件：

var avatar="user_avatar.jpg"; 

if (avatar != '') { 
    $('.fileinput').addClass('fileinput-exists').removeClass('fileinput-new'); 
    $('.fileinput-filename').html(avatar); 
} 

隨着此代碼將add state更改爲此自定義文件輸入的edit state。

我甚至舉了一個例子來證明這個工作，你可以檢查它here。

您甚至可以嘗試在該示例上進行圖片上傳，以查看頁面刷新後您將看到該上傳的edit state。你也可以用螢火蟲檢查代碼，以防你不明白某些事情甚至問我。