Dynamics CRM 365中结合注释和WebApi实现图片上传

 

首先需要在实体上使用注释,然后在窗体上引用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 = '
  • ' + 87 '' + 88 '

    点击上传图片

    ' + 89 '
  • '; 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 = '' + note.annotationid + 102 '\')">×' + 103 '' + 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>

     

     

    实现效果图:

     Dynamics CRM 365中结合注释和WebApi实现图片上传_第1张图片

     

     

     

    参考文章:https://scaleablesolutions.com/upload-notes-attachments-using-javascript-and-rest/

    你可能感兴趣的:(Dynamics CRM 365中结合注释和WebApi实现图片上传)