Dynamics CRM 365中结合注释和WebApi实现图片上传
首先需要在实体上使用注释,然后在窗体上引用WebResource。
WebResource的代码:
- <!DOCTYPE html>
- <html>
- <head>
- <title>上传图片</title>
- <style>
- ul,
- li {
- list-style: none;
- margin: 0;
- }
- .image-list {
- margin-top: 6px;
- overflow: hidden;
- padding-left: 0;
- }
- .image-list li {
- float: left;
- margin-right: 8px;
- width: 108px;
- height: 100px;
- position: relative;
- }
- .image-list li img {
- width: 100px;
- height: 100px;
- }
- .image-list li .delete {
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- width: 20px;
- height: 20px;
- font-size: 18px;
- text-align: center;
- line-height: 20px;
- border-radius: 50%;
- color: #fff;
- background-color: brown;
- cursor: pointer;
- }
- .add-pluse {
- background: url(data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABI0lEQVRoQ+1Xyw2CUBAcCGdjCxw2JJ7sQK3A2BEWYR3GCtQOvJI90ILxTNBoiPGA4e3jESUZj7jfmdlliTDyXzTy+sEGfs0gGSADPRGghNoALMtyWlXV/vlfkiSbNE2vPYH+6j4IA6q6BHBssq5E5MQGviBABtqAoYQMA0MJUUIGubSZUkKUECXUE4G/l1BRFHkcxwtjn1MA88bnAsB0jdZ1fc6yLHfJ2bmFVPXuEii0jYh01vbM2WmkqjMAO2OBvRgAsHU9wTsbMBb+MucxZ0CNDPz9GjWw+TblDBhQ4wxwBgxy4QeNK1jcQq5IuRxzhlif74EJgEPzYC0iN584Lj6DrFGXxKFs2EAoJH3jkAFf5EL5kYFQSPrGIQO+yIXyGz0DD07rnzHZA1b2AAAAAElFTkSuQmCC) no-repeat;
- background-position: top 20px center;
- background-size: 40px 40px;
- background-color: #f4f4f4;
- position: relative;
- }
- .add-pluse .tips {
- margin: 53px 0 0;
- font-size: 14px;
- color: #b9b9b9;
- text-align: center;
- }
- .add-pluse input {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- opacity: 0;
- }
- </style>
- </head>
- <body>
- <ul id="imageList" class="image-list">
- </ul>
- <script type="text/javascript">
- window.Xrm = window.parent.Xrm;
- var entityId = formatGuid(Xrm.Page.data.entity.getId());
- var entityName = Xrm.Page.data.entity.getEntityName();
- var entitySetName = Xrm.Page.data.entity.getEntitySetName();
- //加载数据
- function loadData() {
- var ulObj = document.getElementById("imageList");
- if (ulObj) {
- ulObj.innerHTML = '<li class="add-pluse">' +
- '<input type="file" id="file" onchange="uploadNoteImage()"/>' +
- '<p class="tips">点击上传图片</p>' +
- '</li>';
- }
- Xrm.WebApi.retrieveMultipleRecords("annotation",
- "?$select=annotationid,documentbody,mimetype&" +
- "$filter=_objectid_value eq " + entityId +
- " and isdocument eq true and startswith(mimetype, 'image/')&" +
- "$orderby=createdon asc").then(
- function success(result) {
- if (result.entities) {
- for (var i = 0; i < result.entities.length; i++) {
- var newLi = document.createElement("li");
- var note = result.entities[i];
- newLi.innerHTML = '<span class="delete" onclick="deleteImage(\'' + note.annotationid +
- '\')">×</span>' +
- '<img src="' + getNoteImageSrc(note) + '"/>';
- ulObj.append(newLi);
- }
- }
- },
- function (error) {
- Xrm.Utility.alertDialog(error.message);
- }
- );
- };
- //删除图片
- function deleteImage(id) {
- Xrm.WebApi.deleteRecord("annotation", id).then(
- function success(result) {
- loadData();
- },
- function (error) {
- Xrm.Utility.alertDialog(error.message);
- }
- );
- }
- //将图片保存至注释
- function uploadNoteImage() {
- var file = document.getElementById("file").files[0];
- var subject = "";
- var desc = "";
- if (file) {
- var reader = new FileReader();
- reader.onload = function (evt) {
- var str = arrayBufferToBase64(reader.result);
- createNote(subject, desc, str, file.name, file.type);
- }
- reader.readAsArrayBuffer(file);
- }
- }
- //创建注释记录
- function createNote(title, description, docBody, fName, mType) {
- var entity = {};
- if (docBody != null & fName != null & mType != null) {
- entity.documentbody = docBody;
- entity.filename = fName;
- entity.mimetype = mType;
- }
- entity.subject = title;
- entity.notetext = description;
- entity["objectid_" + entityName + "@odata.bind"] = "/" + entitySetName + "(" + entityId + ")";
- Xrm.WebApi.createRecord("annotation", entity).then(
- function success(result) {
- loadData();
- },
- function (error) {
- Xrm.Utility.alertDialog(error.message);
- }
- );
- }
- //获取图片地址
- function getNoteImageSrc(note) {
- if (note) {
- var mimeType = note.mimetype;
- var documentBody = note.documentbody;
- var src = "data:" + mimeType + ";base64," + documentBody;
- return src;
- }
- return "";
- }
- //将图片转换为BASE64字符串
- function arrayBufferToBase64(buffer) {
- var binary = '';
- var bytes = new Uint8Array(buffer);
- var len = bytes.byteLength;
- for (var i = 0; i < len; i++) {
- binary += String.fromCharCode(bytes[i]);
- }
- return window.btoa(binary);
- }
- //格式化GUID
- function formatGuid(guid) {
- return guid.replace("{", "").replace("}", "");
- }
- loadData();
- </script>
- </body>
- </html>
实现效果图:
参考文章:https://scaleablesolutions.com/upload-notes-attachments-using-javascript-and-rest/
Dynamics CRM 365中结合注释和WebApi实现图片上传的更多相关文章
- IOS5开发-http get/post调用mvc4 webapi互操作(图片上传)[转]
IOS5开发-http get/post调用mvc4 webapi互操作(图片上传) 目前最流行的跨平台交互是采用http协议通过JSON对象进行互操作.这种方式最简单,也很高效.webservi ...
- MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...
- Silverlight中的拖拽实现的图片上传
原文 http://blog.csdn.net/dujingjing1230/article/details/5443003 在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接 ...
- 在php中使用jquery uploadify进行多图片上传
jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadi ...
- Android开发中使用七牛云存储进行图片上传下载
Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储 ...
- Dynamics CRM 修改Excel 最大导出记录限制及 最大上传文件限制
CRM默认的Excel最大导出记录是10000条,最大上传文件限制为5m. 这样的限制可以满足少量数据的批量更新,但是如果数据量比较大的话需要修改最大的导出记录限制,和上传文件的大小,网上有的是直接修 ...
- .NET WebAPI 实现图片上传(包括附带参数上传图片)
博主的项目,客户端是APP,考虑到以后也可能会应用到微信端.网站等,图片上传方法就需要兼容多端,并且以目前的设计,不允许非登录用户上传图片,就得在上传时解决附带参数上传图片的问题. 先来看看后台方法( ...
- Dynamics CRM 365 不用按钮工具,直接用js脚本控制按钮的显示隐藏
Dynamics CRM 365 不用按钮工具,直接用js脚本控制按钮的显示隐藏: try { // 转备案按钮 let transferSpecialRequestButton = parent.p ...
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
随机推荐
- CCF_201612-3_炉石传说
http://115.28.138.223/view.page?gpid=T45 模拟. #include<iostream> #include<cstring> #inclu ...
- java9String类简单了解
public class jh_01_String类简单了解 { public static void main(String[] args) { /* * 函数:完成特定功能的代码块. * next ...
- 《Redis5.x入门教程》正式推出
关注公众号CoderBuff回复"redis"可抢先获取<Redis5.x入门教程>PDF完整版 在<ElasticSearch6.x实战教程>之后,又斗胆 ...
- 【5min+】 对象映射只有AutoMapper?试试Mapster
系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...
- node基础 day1
js为什么能在浏览器中运行 浏览器内部存在一个js解析器,解析ECMAscript 把引擎从浏览器中抽离出来,不再依赖浏览器,作为一个软件安装在电脑上,在命令行里面, 这个软件就是node node ...
- Kafka运维大全来了!优化、监控、故障处理……
Kafka概念 Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.Kafka是一个分布式的.可划分的.冗余备份的.持久性的日志服务.它主 ...
- aliyun---ossutil
上传文件: ossutil -c config cp -rf 源文件 oss://目标路径 config为存储key的文件 例子: ossutil -c config cp -rf /data/res ...
- 使用Unicode(宽字节字符集);多字节字符集中定义宽字节变量
2012-03-25 14:54 (分类:计算机程序) 2.2 宽字符和C 宽字符不一定是Unicode.Unicode是宽字符集的一种.然而,因为本书的焦点是Windows而不是C执行的理论,所以书 ...
- Nginx-2.初学者使用
原文 Nginx有一个master进程和几个worker进程.master进程用来读取和评估配置文件,以及维护worker进程.worker进程用来处理实际的请求.Nginx使用事件模型和基于操作系统 ...
- 使用docker创建MySQL容器,并在springboot中使用
最近在看网上找了个springboot的项目试试,在项目中需要的MySQL版本是5.7,但是本机的MySQL只有5.5.因此想着在我的服务器上跑一个MySQL:5.7的容器解决这一问题,但是在实际操作 ...