首先需要在物體上使用注釋，然后在表單上參考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 >' + 87 '<input type="file" id="file" onchange="uploadNoteImage()"/>' + 88 '<p >點擊上傳圖片</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 onclick="deleteImage(\'' + note.annotationid + 102 '\')">×</span>' + 103 '<img src="https://www.cnblogs.com/leostudy/p/' + 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.uj5u.com/net/83007.html
標籤：C#