-
Dynamics CRM 365中结合注释和WebApi实现图片上传
本站最新发布 C#从入门到精通
试听地址 https://www.xin3721.com/eschool/CSharpxin3721/
试听地址 https://www.xin3721.com/eschool/CSharpxin3721/
首先需要在实体上使用注释,然后在窗体上引用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/
栏目列表
最新更新
python数据库连接池技术总结
成人网站性能提升 20 倍之经验谈 [Python
python动态捕获异常
python 探测网站目录的GUI程序
python实现中文字符繁体和简体中文转换
Python服务器开发 -- 网络基础
python高性能编程方法一
使用python管理Cisco设备
python抓取google搜索结果
Python 自动备份SVN版本库并复制到远程主机
基于UDP的服务器端和客户端
再谈UDP和TCP
在socket编程中使用域名
网络数据传输时的大小端问题
socket编程实现文件传输功能
如何优雅地断开TCP连接?
图解TCP四次握手断开连接
详细分析TCP数据的传输过程
图解TCP数据报结构以及三次握手(非常详
TCP协议的粘包问题(数据的无边界性)
Excel数据导入到Sql server
SQL Server like 字段
SQL Server中的LEFT、RIGHT函数
sql server 安装出现需要sqlncli.msi文件,错误
SQL Server学习内容(一)
SQLServer执行大脚本文件时,提示“无法执
数据库敏捷版本控制之3个数据库策略
将select 转为json
SQL Server 创建索引(index)
GROUP BY中的WITH CUBE、WITH ROLLUP原理测试及