显示图像文件

介绍

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>

图片将插入在替换或删除文件的标准按钮之前。图片不会立即显示。在您保存页面并重新打开它后，它将显示。

例子