Dynamics CRM 365中結合註釋和WebApi實現圖片上傳

時間 2020-01-08
標籤 dynamics crm 結合註釋 webapi 實現圖片上傳欄目 Microsoft 简体版
原文原文鏈接
首先須要在實體上使用註釋，而後在窗體上引用WebResource。javascript
WebResource的代碼：html
  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>