首先需要在实体上使用注释，然后在窗体上引用WebResource。
WebResource的代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>上传图片</title>
5 <style>
6 ul,
7 li {
8 list-style: none;
9 margin: 0;
10 }
11
12 .image-list {
13 margin-top: 6px;
14 overflow: hidden;
15 padding-left: 0;
16 }
17
18 .image-list li {
19 float: left;
20 margin-right: 8px;
21 width: 108px;
22 height: 100px;
23 position: relative;
24 }
25
26 .image-list li img {
27 width: 100px;
28 height: 100px;
29 }
30
31 .image-list li .delete {
32 display: block;
33 position: absolute;
34 top: 0;
35 right: 0;
36 width: 20px;
37 height: 20px;
38 font-size: 18px;
39 text-align: center;
40 line-height: 20px;
41 border-radius: 50%;
42 color: #fff;
43 background-color: brown;
44 cursor: pointer;
45 }
46
47 .add-pluse {
48 background: url(data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABI0lEQVRoQ+1Xyw2CUBAcCGdjCxw2JJ7sQK3A2BEWYR3GCtQOvJI90ILxTNBoiPGA4e3jESUZj7jfmdlliTDyXzTy+sEGfs0gGSADPRGghNoALMtyWlXV/vlfkiSbNE2vPYH+6j4IA6q6BHBssq5E5MQGviBABtqAoYQMA0MJUUIGubSZUkKUECXUE4G/l1BRFHkcxwtjn1MA88bnAsB0jdZ1fc6yLHfJ2bmFVPXuEii0jYh01vbM2WmkqjMAO2OBvRgAsHU9wTsbMBb+MucxZ0CNDPz9GjWw+TblDBhQ4wxwBgxy4QeNK1jcQq5IuRxzhlif74EJgEPzYC0iN584Lj6DrFGXxKFs2EAoJH3jkAFf5EL5kYFQSPrGIQO+yIXyGz0DD07rnzHZA1b2AAAAAElFTkSuQmCC) no-repeat;
49 background-position: top 20px center;
50 background-size: 40px 40px;
51 background-color: #f4f4f4;
52 position: relative;
53 }
54
55 .add-pluse .tips {
56 margin: 53px 0 0;
57 font-size: 14px;
58 color: #b9b9b9;
59 text-align: center;
60 }
61
62 .add-pluse input {
63 position: absolute;
64 top: 0;
65 left: 0;
66 right: 0;
67 bottom: 0;
68 opacity: 0;
69 }
70 </style>
71 </head>
72
73 <body>
74 <ul id="imageList" class="image-list">
75 </ul>
76
77 <script type="text/javascript">
78 window.Xrm = window.parent.Xrm;
79 var entityId = formatGuid(Xrm.Page.data.entity.getId());
80 var entityName = Xrm.Page.data.entity.getEntityName();
81 var entitySetName = Xrm.Page.data.entity.getEntitySetName();
82 //加载数据
83 function loadData() {
84 var ulObj = document.getElementById("imageList");
85 if (ulObj) {
86 ulObj.innerHTML = '<li class="add-pluse">' +
87 '<input type="file" id="file" onchange="uploadNoteImage()"/>' +
88 '<p class="tips">点击上传图片</p>' +
89 '</li>';
90 }
91 Xrm.WebApi.retrieveMultipleRecords("annotation",
92 "?$select=annotationid,documentbody,mimetype&" +
93 "$filter=_objectid_value eq " + entityId +
94 " and isdocument eq true and startswith(mimetype, 'image/')&" +
95 "$orderby=createdon asc").then(
96 function success(result) {
97 if (result.entities) {
98 for (var i = 0; i < result.entities.length; i++) {
99 var newLi = document.createElement("li");
100 var note = result.entities[i];
101 newLi.innerHTML = '<span class="delete" onclick="deleteImage(\'' + note.annotationid +
102 '\')">×</span>' +
103 '<img src="' + getNoteImageSrc(note) + '"/>';
104 ulObj.append(newLi);
105 }
106 }
107 },
108 function (error) {
109 Xrm.Utility.alertDialog(error.message);
110 }
111 );
112 };
113 //删除图片
114 function deleteImage(id) {
115 Xrm.WebApi.deleteRecord("annotation", id).then(
116 function success(result) {
117 loadData();
118 },
119 function (error) {
120 Xrm.Utility.alertDialog(error.message);
121 }
122 );
123 }
124 //将图片保存至注释
125 function uploadNoteImage() {
126 var file = document.getElementById("file").files[0];
127 var subject = "";
128 var desc = "";
129 if (file) {
130 var reader = new FileReader();
131 reader.onload = function (evt) {
132 var str = arrayBufferToBase64(reader.result);
133 createNote(subject, desc, str, file.name, file.type);
134 }
135 reader.readAsArrayBuffer(file);
136 }
137 }
138 //创建注释记录
139 function createNote(title, description, docBody, fName, mType) {
140 var entity = {};
141 if (docBody != null & fName != null & mType != null) {
142 entity.documentbody = docBody;
143 entity.filename = fName;
144 entity.mimetype = mType;
145 }
146 entity.subject = title;
147 entity.notetext = description;
148 entity["objectid_" + entityName + "@odata.bind"] = "/" + entitySetName + "(" + entityId + ")";
149 Xrm.WebApi.createRecord("annotation", entity).then(
150 function success(result) {
151 loadData();
152 },
153 function (error) {
154 Xrm.Utility.alertDialog(error.message);
155 }
156 );
157 }
158 //获取图片地址
159 function getNoteImageSrc(note) {
160 if (note) {
161 var mimeType = note.mimetype;
162 var documentBody = note.documentbody;
163 var src = "data:" + mimeType + ";base64," + documentBody;
164 return src;
165 }
166 return "";
167 }
168 //将图片转换为BASE64字符串
169 function arrayBufferToBase64(buffer) {
170 var binary = '';
171 var bytes = new Uint8Array(buffer);
172 var len = bytes.byteLength;
173 for (var i = 0; i < len; i++) {
174 binary += String.fromCharCode(bytes[i]);
175 }
176 return window.btoa(binary);
177 }
178 //格式化GUID
179 function formatGuid(guid) {
180 return guid.replace("{", "").replace("}", "");
181 }
182 loadData();
183 </script>
184 </body>
185
186 </html>
实现效果图：
参考文章：https://scaleablesolutions.com/upload-notes-attachments-using-javascript-and-rest/
来源：https://www.cnblogs.com/leostudy/archive/2020/01/06/12154508.html