Adaptive Forms中的內嵌影像
常見的使用案例是在最適化表單中將上傳的影像顯示為內嵌影像。 依預設,上傳的影像會顯示為連結,而此體驗可以透過在最適化表單中顯示影像來增強。 本文將逐步引導您完成顯示內嵌影像的步驟。
新增預留位置影像
第一個步驟是在檔案附件元件前面加上預留位置div。 在下方的程式碼中,檔案附件元件由其CSS類別名稱photo-upload識別。 JavaScript函式屬於與調適型表單相關聯的使用者端資料庫的一部分。 此函式是在檔案附件元件的初始化事件中呼叫。
/**
* Add Placeholder Image
* @return {string}
*/
function addTempImage(){
$(".photo-upload").prepend(" <div class='preview'' style='border:2px solid;height:225px;width:175px;text-align:center'><br><br><div class='text'>3.5mm * 4.5mm<br>2Mb max<br>Min 600dpi</div></div><br>");
}
顯示內嵌影像
使用者上傳影像後,系統會在檔案附件元件的認可事件中叫用下列函式。 函式會接收上傳的檔案物件作為引數。
/**
* Consume Image
* @return {string}
*/
function consumeImage (file) {
var reader = new FileReader();
console.log("Reading file");
reader.addEventListener("load", function (e) {
console.log("in the event listener");
var image = new Image();
$(".photo-upload .preview .imageP").remove();
$(".photo-upload .preview .text").remove();
image.width = 170;image.height = 220;
image.className = "imageP";
image.addEventListener("load", function () {
$(".photo-upload .preview")[0].prepend(this);
});
image.src = window.URL.createObjectURL(file);
});
reader.readAsDataURL(file);
}
在您的伺服器上部署
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e