当前位置： 移动技术网 > IT编程>开发语言>c# > Dynamics CRM 365中结合注释和WebApi实现图片上传

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

2020年01月10日  | 移动技术网IT编程  | 我要评论

 

首先需要在实体上使用注释，然后在窗体上引用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>

 

 

实现效果图：

 

 

 

 

参考文章：

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网