首先需要在实体上使用注释，然后在窗体上引用WebResource。
WebResource的代码：
<!DOCTYPE html>
<html>
<head>
<title>上传图片</title>
<style>
ul,
li {
list-style: none;
margin: 0;
} .image-list {
margin-top: 6px;
overflow: hidden;
padding-left: 0;
} .image-list li {
float: left;
margin-right: 8px;
width: 108px;
height: 100px;
position: relative;
} .image-list li img {
width: 100px;
height: 100px;
} .image-list li .delete {
display: block;
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 20px;
font-size: 18px;
text-align: center;
line-height: 20px;
border-radius: 50%;
color: #fff;
background-color: brown;
cursor: pointer;
} .add-pluse {
background: url(data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABI0lEQVRoQ+1Xyw2CUBAcCGdjCxw2JJ7sQK3A2BEWYR3GCtQOvJI90ILxTNBoiPGA4e3jESUZj7jfmdlliTDyXzTy+sEGfs0gGSADPRGghNoALMtyWlXV/vlfkiSbNE2vPYH+6j4IA6q6BHBssq5E5MQGviBABtqAoYQMA0MJUUIGubSZUkKUECXUE4G/l1BRFHkcxwtjn1MA88bnAsB0jdZ1fc6yLHfJ2bmFVPXuEii0jYh01vbM2WmkqjMAO2OBvRgAsHU9wTsbMBb+MucxZ0CNDPz9GjWw+TblDBhQ4wxwBgxy4QeNK1jcQq5IuRxzhlif74EJgEPzYC0iN584Lj6DrFGXxKFs2EAoJH3jkAFf5EL5kYFQSPrGIQO+yIXyGz0DD07rnzHZA1b2AAAAAElFTkSuQmCC) no-repeat;
background-position: top 20px center;
background-size: 40px 40px;
background-color: #f4f4f4;
position: relative;
} .add-pluse .tips {
margin: 53px 0 0;
font-size: 14px;
color: #b9b9b9;
text-align: center;
} .add-pluse input {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
</style>
</head> <body>
<ul id="imageList" class="image-list">
</ul> <script type="text/javascript">
window.Xrm = window.parent.Xrm;
var entityId = formatGuid(Xrm.Page.data.entity.getId());
var entityName = Xrm.Page.data.entity.getEntityName();
var entitySetName = Xrm.Page.data.entity.getEntitySetName();
//加载数据
function loadData() {
var ulObj = document.getElementById("imageList");
if (ulObj) {
ulObj.innerHTML = '<li class="add-pluse">' +
'<input type="file" id="file" onchange="uploadNoteImage()"/>' +
'<p class="tips">点击上传图片</p>' +
'</li>';
}
Xrm.WebApi.retrieveMultipleRecords("annotation",
"?$select=annotationid,documentbody,mimetype&" +
"$filter=_objectid_value eq " + entityId +
" and isdocument eq true and startswith(mimetype, 'image/')&" +
"$orderby=createdon asc").then(
function success(result) {
if (result.entities) {
for (var i = 0; i < result.entities.length; i++) {
var newLi = document.createElement("li");
var note = result.entities[i];
newLi.innerHTML = '<span class="delete" onclick="deleteImage(\'' + note.annotationid +
'\')">×</span>' +
'<img src="' + getNoteImageSrc(note) + '"/>';
ulObj.append(newLi);
}
}
},
function (error) {
Xrm.Utility.alertDialog(error.message);
}
);
};
//删除图片
function deleteImage(id) {
Xrm.WebApi.deleteRecord("annotation", id).then(
function success(result) {
loadData();
},
function (error) {
Xrm.Utility.alertDialog(error.message);
}
);
}
//将图片保存至注释
function uploadNoteImage() {
var file = document.getElementById("file").files[0];
var subject = "";
var desc = "";
if (file) {
var reader = new FileReader();
reader.onload = function (evt) {
var str = arrayBufferToBase64(reader.result);
createNote(subject, desc, str, file.name, file.type);
}
reader.readAsArrayBuffer(file);
}
}
//创建注释记录
function createNote(title, description, docBody, fName, mType) {
var entity = {};
if (docBody != null & fName != null & mType != null) {
entity.documentbody = docBody;
entity.filename = fName;
entity.mimetype = mType;
}
entity.subject = title;
entity.notetext = description;
entity["objectid_" + entityName + "@odata.bind"] = "/" + entitySetName + "(" + entityId + ")";
Xrm.WebApi.createRecord("annotation", entity).then(
function success(result) {
loadData();
},
function (error) {
Xrm.Utility.alertDialog(error.message);
}
);
}
//获取图片地址
function getNoteImageSrc(note) {
if (note) {
var mimeType = note.mimetype;
var documentBody = note.documentbody;
var src = "data:" + mimeType + ";base64," + documentBody;
return src;
}
return "";
}
//将图片转换为BASE64字符串
function arrayBufferToBase64(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
//格式化GUID
function formatGuid(guid) {
return guid.replace("{", "").replace("}", "");
}
loadData();
</script>
</body> </html>
实现效果图：
参考文章：https://scaleablesolutions.com/upload-notes-attachments-using-javascript-and-rest/