顯示影像檔案

介紹

OpenClinica 允許我們向系統上傳檔案。該檔案只能透過連結訪問，不會在頁面上顯示。在本操作說明中，我們將瞭解如何自動顯示影像檔案。

上傳檔案的儲存位置

在 datainfo.properties 中，有一個名為 'attached_file_location' 的屬性。它指定上傳的檔案將儲存在伺服器上的哪個位置。如果我們將該項留空，則將使用預設位置：/usr/local/tomcat/<study_name>.data/。

預設上傳位置的挑戰

預設上傳位置不在 OpenClinica Web 應用程式的根目錄中。因此，當我們使用 <img> 標籤時，Tomcat 無法訪問它。有兩種解決方法。

更改預設位置
使用反向代理來提供影像服務

更改預設位置

當我們想要將檔案儲存在 Tomcat 可見的位置時，我們更改 datainfo.properties 中的行：

attached_file_location=/usr/local/tomcat/webapps/<study_name>/attached_files/

不要忘記將 <study_name> 佔位符更改為您的系統中有意義的名稱。

使用反向代理來提供影像服務

使用 OpenClinica_User_Manual/使用反向代理來安裝 Nginx 作為反向代理。將此行新增到 Nginx 的 https 伺服器配置中

location ~ ^/studies/attached_files/(.*)$ {
    #don't forget to change <study_name>
    alias /usr/local/tomcat/<study_name>.data/attached_files/$1;
}

現在，影像將由 Nginx 直接提供服務。如果您使用大量影像，這是首選配置。

新增到 Excel CRF 定義中的程式碼

閱讀 OpenClinica_User_Manual/使用 JQuery 進行樣式設計以更好地瞭解下面的程式碼。將程式碼放在 LEFT_ITEM_TEXT 中。

<script>
  jQuery(document).ready(function($) { 
    function showPicture(pIDSelector,pCSSMapInput) {     	
        // find the link to the picture
        var vPath = location.pathname; 
        // are we only viewing the data?
        if (vPath.search('ViewSectionDataEntry') > 0) {
            // yes, we are   
	    var picLink = $(pIDSelector).parent().next().find('a').attr('href');
        } else {
            // no, we are editing
            var picLink = $(pIDSelector).parent().parent().find('div').find('a').attr('href');
        }
        // accept only png and jpg files
        if (picLink.indexOf(".png") > 0 || picLink.indexOf(".jpg") > 0) {
            var vCSS = ""
	    for (css in pCSSMapInput) {
	      vCSS = vCSS + css + ":" + pCSSMapInput[css] + ";"; 
	    }
            //choose one of vUploadLocation, depending on your configuration (delete the other)
            // change <study_name> to a valid name for your installation
	    var vUploadLocation = '<study_name>.data'; 
	    var vUploadLocation = '<study_name>';
	    
            var picSrc = picLink.substr(picLink.search('attached_files'));
            $(pIDSelector).parent().parent().before('<tr><td><img style="' +  vCSS + ' " alt="pic" src="/' + vUploadLocation + '/' + picSrc + '"></td></tr>');
        }
    }
    //add your items here, note that the id must be the same as that of the span in the row that specifies the file upload.
    showPicture('#pic1',{'width':'200px'});		
});
</script>
//add a span with an named id to LEFT_ITEM_TEXT in the row that specifies the file upload.
<span id="pic1">left item text for my picture</span>

圖片將插入在替換或刪除檔案的標準按鈕之前。圖片不會立即顯示。在您儲存頁面並重新開啟它後，它將顯示。

例子